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); }}

文章至此结束，原谅我这个喜欢省时省力的家伙这里写图片描述