Android 通过ViewPager实现点击和滑动切换Fragment标签页

最新推荐文章于 2023-04-20 09:32:20 发布

liuwan1992

最新推荐文章于 2023-04-20 09:32:20 发布

阅读量5.2k

点赞数 31

分类专栏： Android 组件

本文链接：https://blog.csdn.net/liuwan1992/article/details/52790544

版权

Android 组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如上图效果，要切换 Fragment 标签页，可以通过点击标签或者滑动标签页来实现。

网上应该有封装好的开源库可以直接利用，不过这里介绍一下自己通过 ViewPager 实现该效果。

首先是布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color2"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color11"
        android:orientation="horizontal"
        android:paddingTop="25dp">

        <LinearLayout
            android:id="@+id/back"
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:background="@null"
            android:baselineAligned="true"
            android:gravity="center_vertical|start"
            android:orientation="vertical"
            android:paddingStart="15dp">

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/back" />

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_toEndOf="@+id/back"
            android:layout_toStartOf="@+id/refresh"
            android:background="@null"
            android:gravity="center"
            android:text="逆变器"
            android:textColor="@color/color1"
            android:textSize="18sp" />

        <LinearLayout
            android:id="@+id/refresh"
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:layout_alignParentEnd="true"
            android:background="@null"
            android:baselineAligned="true"
            android:gravity="center_vertical|end"
            android:orientation="vertical"
            android:paddingEnd="15dp">

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/refresh" />

        </LinearLayout>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color1"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/maxValue"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txMaxValue"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:gravity="center"
                android:text="最大值"
                android:textColor="@color/color11"
                android:textSize="16sp" />

            <View
                android:id="@+id/lineMaxValue"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/color11"
                android:visibility="visible" />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="15dp"
            android:background="@color/color4" />

        <LinearLayout
            android:id="@+id/minValue"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txMinValue"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:gravity="center"
                android:text="最小值"
                android:textColor="@color/color6"
                android:textSize="16sp" />

            <View
                android:id="@+id/lineMinValue"
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/color11"
                android:visibility="invisible" />

        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/color4" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:background="@color/color1"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/color4" />

        <android.support.v4.view.ViewPager
            android:id="@+id/inverterViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</LinearLayout>

大体分三块，最顶端是标题栏，中间是标签栏，底部是标签页，即ViewPager。

接下来是代码实现：

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    private LinearLayout maxValue, minValue, back;
    private ViewPager viewPager;
    private List<Fragment> fragmentList = new ArrayList<>();
    private TextView txMaxValue, txMinValue;
    private View lineMaxValue, lineMinValue;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 透明状态栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        // 透明导航栏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

        initLayout();
        MyAdapter fragmentPagerAdapter = new MyAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(fragmentPagerAdapter);
        changeListener();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.maxValue:
                viewPager.setCurrentItem(0, true);
                txMaxValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color11));
                lineMaxValue.setVisibility(View.VISIBLE);
                txMinValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color6));
                lineMinValue.setVisibility(View.INVISIBLE);
                break;

            case R.id.minValue:
                viewPager.setCurrentItem(1, true);
                txMaxValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color6));
                lineMaxValue.setVisibility(View.INVISIBLE);
                txMinValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color11));
                lineMinValue.setVisibility(View.VISIBLE);
                break;

            case R.id.back:
                MainActivity.this.finish();
                break;
        }
    }

    /**
     * 初始化控件
     */
    public void initLayout() {
        maxValue = (LinearLayout) findViewById(R.id.maxValue);
        maxValue.setOnClickListener(this);
        minValue = (LinearLayout) findViewById(R.id.minValue);
        minValue.setOnClickListener(this);
        back = (LinearLayout) findViewById(R.id.back);
        back.setOnClickListener(this);

        txMaxValue = (TextView) findViewById(R.id.txMaxValue);
        lineMaxValue = findViewById(R.id.lineMaxValue);
        txMinValue = (TextView) findViewById(R.id.txMinValue);
        lineMinValue = findViewById(R.id.lineMinValue);
        viewPager = (ViewPager) findViewById(R.id.inverterViewPager);

        InverterMaxFragment inverterMaxFragment = new InverterMaxFragment();
        fragmentList.add(inverterMaxFragment);
        InverterMinFragment inverterMinFragment = new InverterMinFragment();
        fragmentList.add(inverterMinFragment);
    }

    /**
     * ViewPager适配器
     */
    public class MyAdapter extends FragmentPagerAdapter {

        private List<Fragment> list;

        public MyAdapter(FragmentManager fragmentManager, List<Fragment> list) {
            super(fragmentManager);
            this.list = list;
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Fragment getItem(int arg0) {
            return list.get(arg0);
        }

    }

    /**
     * 监听事件
     */
    public void changeListener() {
        // 监听viewPager选中页面，改变顶部标题栏
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        txMaxValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color11));
                        lineMaxValue.setVisibility(View.VISIBLE);
                        txMinValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color6));
                        lineMinValue.setVisibility(View.INVISIBLE);
                        break;

                    case 1:
                        txMaxValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color6));
                        lineMaxValue.setVisibility(View.INVISIBLE);
                        txMinValue.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.color11));
                        lineMinValue.setVisibility(View.VISIBLE);
                        break;
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

}

这里为 ViewPager 设置了一个适配器，该适配器继承了 FragmentPagerAdapter 并重写了其中的两个方法，通过 List 存储要切换的

Fragment 。这里还需要为 ViewPager 添加一个 OnPageChangeListener 事件，并重写其中的 onPageSelected 方法，用于监听滑动

切换页面后，同时改变顶部标签的样式。

完整源码