淺談ViewPager與TabLayout的簡單用法

  今天介紹一下ViewPager與TabLayout的簡單用法

1.准備#

  在一切開始之前，你懂得，先導庫，老方法，在build.gradle直接添加下面這一句

  implementation 'com.android.support:design:27.1.1'

  可能版本有差異，具體視情況而定，知識是活的

2.設計布局

(1).主布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
    android:id="@+id/title"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@android:color/holo_blue_light"
    android:gravity="center"
    android:text="示例"
    android:textColor="@android:color/white"
    android:textSize="18sp" />

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    app:layout_constraintTop_toBottomOf="@+id/title"
    android:layout_marginTop="0dp"
    app:tabIndicatorColor="@android:color/holo_blue_light"
    app:tabSelectedTextColor="@android:color/holo_blue_light"
    app:tabTextColor="@android:color/black"
    tools:ignore="NotSibling" />
<android.support.v4.view.ViewPager
    android:id="@+id/view"
    app:layout_constraintTop_toBottomOf="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>  

  這次采用的依舊是谷歌最新的ConstraintLayout布局，里面的控件很少，第一個TextView的作用就是一個示例，告訴你當前在第幾頁，第二個是TabLayout，不是TableLayout，不要搞錯了哈，不然又要怪我了，這里的很多屬性都已經配置好了，比如下划線的顏色，選擇之后的字體顏色，以及未被選擇時的字體顏色。第三個是ViewPager，用來切換布局的。

(2).三個分布局

1.layout_first

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/First"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="This is the first page !"
    android:gravity="center"/>
</android.support.constraint.ConstraintLayout>

2.layout_second

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/Second"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="This is the second page !"
    android:gravity="center"/>
</android.support.constraint.ConstraintLayout>

3.layout_third

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/Third"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="This is the third page !"
    android:gravity="center"/>
</android.support.constraint.ConstraintLayout>

  以上三個布局比較簡單，我就不介紹了

3.界面邏輯

(1).配置適配器

package com.project.software.myapplication;

import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class ViewPaperAdapter extends PagerAdapter {

private List<View>mViewList;
private List<String>mTitleLists;

public ViewPaperAdapter(List<View>mViewList,List<String>mTitleLists){
    this.mViewList = mViewList;
    this.mTitleLists = mTitleLists;
}

@Override
public int getCount() {
    return mViewList.size();      //頁卡數
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
    return view == object;       //官方推薦
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    container.addView(mViewList.get(position));           //添加頁卡
    return mViewList.get(position);
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    container.removeView(mViewList.get(position));         //刪除頁卡
}

public CharSequence getPageTitle(int position){
    return mTitleLists.get(position);             //頁卡標題
}
}

  上面的代碼便是ViewPaperAdapter中的內容，他繼承自PagerAdapter這個適配器，通過這個適配器，才有可能實現左右切換呦。

(2).主頁邏輯

package com.project.software.myapplication;

import android.support.design.widget.TabLayout;
import android.support.v4.view.LayoutInflaterCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private TabLayout mTabLayout;
private ViewPager mViewPager;
private LayoutInflater mInflater;
private View view1;
private View view2;
private View view3;
private List<String>mTitleList = new ArrayList<>();
private List<View>mViewList = new ArrayList<>();

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

private void init() {
    mViewPager = findViewById(R.id.view);
    mTabLayout = findViewById(R.id.tabs);
    mInflater = LayoutInflater.from(this);
    view1 = mInflater.inflate(R.layout.layout_first,null);
    view2 = mInflater.inflate(R.layout.layout_second,null);
    view3 = mInflater.inflate(R.layout.layout_third,null);
    mViewList.add(view1);
    mViewList.add(view2);
    mViewList.add(view3);
    mTitleList.add("第一頁");
    mTitleList.add("第二頁");
    mTitleList.add("第三頁");
    mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設置tab模式，當前為系統默認模式
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//添加選項卡
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2)));
    ViewPaperAdapter mAdapter = new ViewPaperAdapter(mViewList,mTitleList);
    mViewPager.setAdapter(mAdapter);//給ViewPager設置適配器
    mTabLayout.setupWithViewPager(mViewPager);  //將TabLayout和ViewPager關聯起來。
    mTabLayout.setTabsFromPagerAdapter(mAdapter);//給Tabs設置適配器
}
}

  上面代碼的注釋很詳細，不過多介紹，但是將TabLayout和ViewPager關聯在一起很重要哦，如果沒有這句，emmmmm，你可以動手試一下結果。
  最后，將那個難看的標題欄去掉，老規矩，在manifests里直接修改

  android:theme="@style/Theme.AppCompat.Light.NoActionBar"

  有的同學就問了：沒有標題欄豈不是更丑？沒錯，但是仔細回顧一下，我們已經在主布局文件里面加了一個假的標題欄呦。
  最最最后，放圖示效果：

Over