浅谈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