Viewpager+标签切换动画实例

最新推荐文章于 2026-07-04 18:11:08 发布

原创最新推荐文章于 2026-07-04 18:11:08 发布 · 903 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文介绍了一个自定义的ViewPager顶部切换动画实现方案，包括布局文件、关键代码及逻辑解析。通过位移动画与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+顶部切换动画，如果对您有所帮助，请点个赞吧～！

标签

#Android #UI #Fragment #viewpager #Animation