如上圖效果，要切換 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) {
            }
        });
    }

}
 

Fragment 。這裡還需要為 ViewPager 新增一個 OnPageChangeListener 事件，並重寫其中的 onPageSelected 方法，用於監聽滑動

切換頁面後，同時改變頂部標籤的樣式。

完整原始碼