2017年第一篇仿攜程機票頁自動輪播和行程切換的動畫

2019-11-09 15:10:12

字體：大中小

來源：轉載

供稿：網友

因工作原因不知為何都時刻關注著國內的TMC相關的APP 新年剛過來到公司沒什么大的任務來做，就拿我們的競品app看了看，然后發現當中有一些不錯的效果！剛好我對動畫這點也不是很熟悉就自己琢磨了思考了下！準備仿一個差不多能實現效果的~ 效果原圖如：這里寫圖片描述

要的效果就是上面的紅框中的！一開始我想的是自定義TabLayout 不過想來自定義太麻煩了 ~我也不太會！簡單點的還可以這種復雜的效果就算了這里寫圖片描述

不自定義那就只能組合用基本控件咯，我的思路是這樣的： 1.自用RelativeLayout的特性用三層布局進行疊加(布局等會貼); 2.就是用屬性動畫進行下面一層控件內容的移動了 3.Viewpager的自動無限輪播好了上代碼，首先是布局的代碼比較簡單eg:

中間RadioGroup也可以用其實的布局一樣實現我這是為了圖簡單然后就是Activity中的內容了，這里的動畫我用了ValueAnimator，只要找準備移動的位置就可以了剛好我這里對應的三個RadioButton是等比分的也就是對應下面的三個背景！所以只需要移動下面三個背景的不同位置就可以了！下面貼上三個RadioButton的點擊事件的內容：

@Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.button1: button3.setTextColor(Color.parseColor("#ffffff")); button2.setTextColor(Color.parseColor("#ffffff")); button1.setTextColor(Color.parseColor("#000000")); System.out.PRintln(tag + "位置1"); if (3 == tag) {// 當image1在第三個位置時 ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image2.getLeft(), 0); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (1 == tag) { } { ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image3.getLeft(), 0); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 1; break; case R.id.button2: button2.setTextColor(Color.parseColor("#000000")); button3.setTextColor(Color.parseColor("#ffffff")); button1.setTextColor(Color.parseColor("#ffffff")); System.out.println(tag + "位置2"); if (1 == tag) {// 當image1在第一個位置時 ValueAnimator animator = ValueAnimator.ofFloat(0, image1.getRight() - image1.getLeft()); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (2 == tag) { } else { ValueAnimator animator = ValueAnimator.ofFloat(image3.getLeft(), image2.getLeft()); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 2; break; case R.id.button3: button3.setTextColor(Color.parseColor("#000000")); button1.setTextColor(Color.parseColor("#ffffff")); button2.setTextColor(Color.parseColor("#ffffff")); if (1 == tag) {// 當image1在第一個位置時 ValueAnimator animator1 = ValueAnimator.ofFloat(0, image3.getLeft()); animator1.setTarget(image1); animator1.setDuration(1000).start(); animator1.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (3 == tag) { } else { ValueAnimator animator1 = ValueAnimator.ofFloat(image1.getRight(), image3.getLeft()); animator1.setTarget(image1); animator1.setDuration(1000).start(); animator1.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 3; break; default: break; } }

再就是ViewPager的自動輪播了，其實這個也是網上一大堆的DEMO 我也是從這里扒過來的 Android無限循環與自動播放ViewPager的簡單實現(廣告欄) 完整的代碼：

package com.example.menutabdemo.anim;import java.util.ArrayList;import java.util.List;import java.util.Timer;import java.util.TimerTask;import com.example.menutabdemo.R;import com.example.menutabdemo.R.drawable;import com.example.menutabdemo.R.id;import com.example.menutabdemo.R.layout;import android.R.integer;import android.animation.ObjectAnimator;import android.animation.ValueAnimator;import android.animation.ValueAnimator.AnimatorUpdateListener;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.os.SystemClock;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.Log;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.RadioButton;import android.widget.TextView;public class AnimValueActivity extends Activity implements OnClickListener { private ViewPager mViewPager; private RadioButton button1; private RadioButton button2; private RadioButton button3; private TextView image1; private TextView image2; private TextView image3; /** * 輪播圖自動輪播消息 */ public static final int AUTOBANNER_CODE = 0X1001; private Timer timer = new Timer(); /** * 自動輪播任務 */ private BannerTimerTask mBannerTimerTask; /** * 用戶當前是否點擊輪播圖 */ private boolean mIsUserTouched = false; /** * 當前輪播圖位置 */ private int mBannerPosition; int tag = 1; int images[] = { R.drawable.one, R.drawable.two, R.drawable.three }; ImageView imageView; public static final int FAKE_BANNER_SIZE = 10000; List<Integer> myList = new ArrayList<Integer>(); Handler handler = new Handler() { public void handleMessage(Message msg) { // 當用戶點擊時,不進行輪播 if (!mIsUserTouched) { // 獲取當前的位置 mBannerPosition = mViewPager.getCurrentItem(); // 更換輪播圖 mBannerPosition = (mBannerPosition + 1) % FAKE_BANNER_SIZE; mViewPager.setCurrentItem(mBannerPosition); } }; }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_anim_value); mViewPager = (ViewPager) findViewById(R.id.mViewPager); button1 = (RadioButton) findViewById(R.id.button1); button2 = (RadioButton) findViewById(R.id.button2); button3 = (RadioButton) findViewById(R.id.button3); image1 = (TextView) findViewById(R.id.mImageView); image2 = (TextView) findViewById(R.id.mImageView1); image3 = (TextView) findViewById(R.id.mImageView2); button1.setOnClickListener(this); button2.setOnClickListener(this); button3.setOnClickListener(this); initData(); mViewPager.setAdapter(new myPagerAdapter()); //設置viewpager輪播的起始位置 mViewPager.setCurrentItem(myList.size() * 100); startBannerTimer(); } /** * 初始化數據 * * void * @throws * @author jingxiang * @date 2017年2月9日上午11:36:27 */ private void initData() { myList.add(R.drawable.one); myList.add(R.drawable.two); myList.add(R.drawable.three); } /** * 開始輪播 * * void * @throws * @author jingxiang * @date 2017年2月9日上午11:36:44 */ private void startBannerTimer() { if (timer == null) { timer = new Timer(); } if (mBannerTimerTask != null) { mBannerTimerTask.cancel(); } mBannerTimerTask = new BannerTimerTask(handler); if (timer != null && mBannerTimerTask != null) { // 循環5秒執行 timer.schedule(mBannerTimerTask, 5000, 3000); } } /** * viewpager適配器 *@ClassName：myPagerAdapter *@authur：lijia lijia@baoku.com *@date：2017年2月9日上午11:37:05 * */ class myPagerAdapter extends PagerAdapter { @Override public int getCount() { // TODO Auto-generated method stub //設置pager項 return FAKE_BANNER_SIZE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub View view = LayoutInflater.from(AnimValueActivity.this).inflate(R.layout.item, container, false); ImageView imageView = (ImageView) view.findViewById(R.id.item); imageView.setScaleType(ScaleType.CENTER_CROP); //獲取當前顯示位置 position %= myList.size(); imageView.setImageResource(myList.get(position)); container.addView(view); return view; } } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.button1: button3.setTextColor(Color.parseColor("#ffffff")); button2.setTextColor(Color.parseColor("#ffffff")); button1.setTextColor(Color.parseColor("#000000")); System.out.println(tag + "位置1"); if (3 == tag) {// 當image1在第三個位置時 ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image2.getLeft(), 0); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (1 == tag) { } { ValueAnimator animator = ValueAnimator.ofFloat(image3.getRight() - image3.getLeft(), 0); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 1; break; case R.id.button2: button2.setTextColor(Color.parseColor("#000000")); button3.setTextColor(Color.parseColor("#ffffff")); button1.setTextColor(Color.parseColor("#ffffff")); System.out.println(tag + "位置2"); if (1 == tag) {// 當image1在第一個位置時 ValueAnimator animator = ValueAnimator.ofFloat(0, image1.getRight() - image1.getLeft()); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (2 == tag) { } else { ValueAnimator animator = ValueAnimator.ofFloat(image3.getLeft(), image2.getLeft()); animator.setTarget(image1); animator.setDuration(1000).start(); animator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 2; break; case R.id.button3: button3.setTextColor(Color.parseColor("#000000")); button1.setTextColor(Color.parseColor("#ffffff")); button2.setTextColor(Color.parseColor("#ffffff")); if (1 == tag) {// 當image1在第一個位置時 ValueAnimator animator1 = ValueAnimator.ofFloat(0, image3.getLeft()); animator1.setTarget(image1); animator1.setDuration(1000).start(); animator1.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } else if (3 == tag) { } else { ValueAnimator animator1 = ValueAnimator.ofFloat(image1.getRight(), image3.getLeft()); animator1.setTarget(image1); animator1.setDuration(1000).start(); animator1.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { image1.setTranslationX((Float) animation.getAnimatedValue()); } }); } tag = 3; break; default: break; } }}

BannerTimerTask 代碼：

package com.example.menutabdemo.anim;import java.util.TimerTask;import android.os.Handler;public class BannerTimerTask extends TimerTask{ Handler handler; public BannerTimerTask(Handler handler) { super(); this.handler = handler; } @Override public void run() { // TODO Auto-generated method stub handler.sendEmptyMessage(AnimValueActivity.AUTOBANNER_CODE); }}

文章至此結束，原諒我這個喜歡省時省力的家伙這里寫圖片描述