Viewpager+标签切换动画实例

最近开始整理以前做过的项目，把其中用到的一些知识点做了一个整理，会写成一个系列，最后汇成一般企业开发中所需的各种技术汇总。对自己来说可以在汇总过程中更好的理解这些知识点，融会贯通，还可以作为记录以后使用的时候方便查看，也希望公布到博客上能帮到需要这些东西的童鞋。

这里是一个Viewpager+页签切换动画的简单整合，Viewpager其实是有顶部的切换标签效果的，但易用性不怎么好，我们还是自己来定制吧！

先看一下布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    ><include layout="@layout/title_view"></include><View    android:layout_width="match_parent"    android:layout_height="@dimen/DIMEN_1PX"    android:background="#33000000"    />    <LinearLayout        android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingBottom="@dimen/DIMEN_30PX"        android:paddingTop="@dimen/DIMEN_30PX"        >        <TextView            android:gravity="center"            android:id="@+id/tv_tag1"            android:layout_width="wrap_content"            android:layout_weight="1"            android:text="标签1"            android:layout_height="wrap_content" />        <TextView            android:gravity="center"            android:id="@+id/tv_tag2"            android:text="标签2"            android:layout_width="wrap_content"            android:layout_weight="1"            android:layout_height="wrap_content" />        <TextView            android:gravity="center"            android:id="@+id/tv_tag3"            android:text="标签3"            android:layout_width="wrap_content"            android:layout_weight="1"            android:layout_height="wrap_content" />        <TextView            android:gravity="center"            android:id="@+id/tv_tag4"            android:text="标签4"            android:layout_width="wrap_content"            android:layout_weight="1"            android:layout_height="wrap_content" />    </LinearLayout>    <View        android:layout_width="match_parent"        android:layout_height="@dimen/DIMEN_8PX"        android:background="#33000000"        android:id="@+id/view_cursor"        />    <android.support.v4.view.ViewPager        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/viewpager_main"        ></android.support.v4.view.ViewPager></LinearLayout>

这里include了一个title，自己的项目中不怎么使用系统的actionbar，一般都是自定义一个顶部视图title_view来实现。这里是title_view的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent" android:layout_height="wrap_content">    <LinearLayout        android:id="@+id/ll_title_left"        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="@dimen/DIMEN_20PX"        >        <ImageView            android:id="@+id/iv_title_left"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            />        <TextView            android:id="@+id/tv_title_left"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:text="left"            android:gravity="center"            />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_title_center"        android:layout_centerInParent="true"        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        >        <ImageView            android:id="@+id/iv_title_center"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            />        <TextView            android:id="@+id/tv_title_center"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:text="center"            android:gravity="center"            android:textSize="@dimen/DIMEN_36PX"            android:textStyle="bold"            />    </LinearLayout>    <LinearLayout        android:id="@+id/ll_title_right"        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="@dimen/DIMEN_20PX"        android:layout_alignParentRight="true"        >        <ImageView            android:id="@+id/iv_title_right"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            />        <TextView            android:id="@+id/tv_title_right"            android:layout_width="wrap_content"            android:layout_height="50dp"            android:text="right"            android:gravity="center"            />    </LinearLayout></RelativeLayout>

主要的逻辑在MainActivity中实现，写之前理清思路：

1.初始化Viewpager要显示的视图列表

2.初始化用到的控件

3.计算屏幕尺寸计算得出指示光标宽度

4.初始化Viewpager以及adapter、滑动监听器

5.在滑动监听器中实现光标切换动画

6.将Viewpager的切换绑定到顶部标签的点击事件上

代码如下：

public class MainActivity extends Activity {    private int screenWidth;    private int screenHeight;    private View view_cursor;    private List<View> views;    private ViewPager viewpager_main;    private int origIndex = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initData();        initView();    }    private void initView() {        int cursorWidth = screenWidth / 4;        view_cursor = findViewById(R.id.view_cursor);        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view_cursor.getLayoutParams();        params.width = cursorWidth;        view_cursor.setLayoutParams(params);        viewpager_main = (ViewPager) findViewById(R.id.viewpager_main);        viewpager_main.setAdapter(new MyViewpagerAdapter(views));        viewpager_main.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                int offset = screenWidth / 4;                translateAnimation = new TranslateAnimation(origIndex * offset, position * offset, 0, 0);                translateAnimation.setFillAfter(true);                translateAnimation.setInterpolator(new AccelerateInterpolator());                translateAnimation.setDuration(300);                view_cursor.startAnimation(translateAnimation);                origIndex = position;            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        findViewById(R.id.tv_tag1).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                viewpager_main.setCurrentItem(0);            }        });        findViewById(R.id.tv_tag2).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                viewpager_main.setCurrentItem(1);            }        });        findViewById(R.id.tv_tag3).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                viewpager_main.setCurrentItem(2);            }        });        findViewById(R.id.tv_tag4).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                viewpager_main.setCurrentItem(3);            }        });        ((TextView)findViewById(R.id.tv_title_left)).setText("Back");        ((TextView)findViewById(R.id.tv_title_right)).setText("Menu");        ((TextView)findViewById(R.id.tv_title_center)).setText("Title");    }    private void initData() {        views = new ArrayList<View>();        View view1 = View.inflate(this, R.layout.view1,null);        View view2 = View.inflate(this,R.layout.view2,null);        View view3 = View.inflate(this,R.layout.view3,null);        View view4 = View.inflate(this,R.layout.view4,null);        views.add(view1);        views.add(view2);        views.add(view3);        views.add(view4);        Display display = getWindowManager().getDefaultDisplay();        DisplayMetrics displayMetrics = new DisplayMetrics();        display.getMetrics(displayMetrics);        screenWidth = displayMetrics.widthPixels;        screenHeight = displayMetrics.heightPixels;    }    TranslateAnimation translateAnimation;    class MyViewpagerAdapter extends PagerAdapter{        private List<View> views;        public MyViewpagerAdapter(List<View> views) {            this.views = views;        }        @Override        public int getCount() {            return views.size();        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }        @Override        public void destroyItem(View container, int position, Object object) {            ((ViewPager) container).removeView(views.get(position));        }        @Override        public Object instantiateItem(View container, int position) {            ((ViewPager) container).addView(views.get(position));            return views.get(position);        }        public View getItemAtPosition(int position) {            return views.get(position);        }    }}

光标的动画效果是一个位移动画，和Viewpager的切换关联起来即可，整体来说还是很简单的，这样的页面结构还是可以匹配很多APP的页面需求的，下面是这个简单Demo的源码：

ViewPager切换动画

demo是Android Studio写的，如果您是Eclipse，代码不多粘贴一下也很省事。这个小功能算是一个常用的布局，ViewPager+Fragment+顶部切换动画，如果对您有所帮助，请点个赞吧～！