android中的tablayout+view_pager快速实现标签页效果

效果图

前言

　　在android中常见到滑动切换页面同时标签也同步移动,这种效果经过我查阅后得知是由tablayout+view_pager实现的,其中TabLayout是Android support中的一个控件android.support.design.widget.TabLayout,view_pager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。那如何使用它呢，与LisstView类似，我们也需要一个适配器，他就是PagerAdapter.

一、导入包

　　在app的build.gradle中添加如下代码

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

　　也可观察Android studio中页面布局设计器中contaniners中有无包含，如果包含了可以直接拖拽下来使用。

二、编写xml布局代码

2.1、简单使用

　　在Android中简单使用的画只需添加一个tablayout即可快速实现效果，代码如下

　　xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TabLayoutActivity">
    
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>

　　java中控制标签的标题：

import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class TabLayoutActivity extends AppCompatActivity {

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

        TabLayout mTabLayout = findViewById(R.id.tab_layout);
        // 添加 tab item
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB1"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB2"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB3"));
        mTabLayout.addTab(mTabLayout.newTab().setText("TAB4"));
    }
}

2.2、详细自定义

　　自定义实现复杂效果的话一般是由tablayout+view_page实现的，由tablayout负责显示标签页的标题，由view_pager负责显示界面，xml布局代码举例:

  <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.1" />

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.5"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

　　层级关系如图：

 

 

 

 三、适配器及控制方法

　　像listview等一样，view_pager也需要写适配器，它的适配器由 继承PagerAdapter适配器实现，具体代码我封装好了，参考如下代码：

ViewAdapter.java

package chenlong.chenlong.retester;

import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;

class ViewAdapter extends PagerAdapter {

    public static ArrayList<ArrayList> datasxx =new ArrayList<ArrayList>();//总数据源

    public static ArrayList<Object> additem(String Title, View view){
        //添加键值对，标题：view
        ArrayList<Object> item=new ArrayList<Object>();
        item.add(Title);
        item.add(view);
        datasxx.add(item);
        return item;
    }

    private ArrayList<ArrayList> datas;

    //        private String [] t=new String[]{"高亮", "结果"};
    public ViewAdapter(ArrayList<ArrayList> list) {
        datas=list;//手动控制
    }
    public ViewAdapter() {
        datas=datasxx;//自动
    }


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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return (String)datas.get(position).get(0);//设置标题
//            return super.getPageTitle(position);

    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=(View)datas.get(position).get(1);//设置view
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)datas.get(position).get(1));//删除view
    }
}

适配器更新2020年11月25日：

package chenlong.chenlong.retester;

import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;

class ViewAdapter extends PagerAdapter {

    public ArrayList<ArrayList> datasxx =new ArrayList<ArrayList>();//总数据源

    public  ArrayList<Object> additem(String Title, View view){
        //添加键值对，标题：view
        ArrayList<Object> item=new ArrayList<Object>();
        item.add(Title);
        item.add(view);
        datasxx.add(item);
        return item;
    }

    private ArrayList<ArrayList> datas;

    //        private String [] t=new String[]{"高亮", "结果"};
    public ViewAdapter(ArrayList<ArrayList> list) {
        datas=list;//手动控制
    }
    public ViewAdapter() {
        datas=datasxx;//自动
    }


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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return (String)datas.get(position).get(0);//设置标题
//            return super.getPageTitle(position);

    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=(View)datas.get(position).get(1);//设置view
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)datas.get(position).get(1));//删除view
    }
}

 

在actvity中使用方法如下：

text = new BootstrapEditText(this);
text.setGravity(Gravity.TOP);
text.setHint("文本内容");

ret = new BootstrapEditText(this);
ret.setGravity(Gravity.TOP);
ret.setHint("输出内容");
///2020年11月25日
ViewPager viewPager = findViewById(R.id.view_pager);
ViewAdapter.additem("高亮",text);
ViewAdapter.additem("结果",ret);

PagerAdapter adapter=new ViewAdapter();//初始化适配器
viewPager.setAdapter(adapter);//绑定适配器
///2020年11月25日

//使用方法更新
ViewAdapter xx =new ViewAdapter();
xx.additem("高亮",text);
xx.additem("结果",ret);

viewPager.setAdapter(xx);

 viewPager.setCurrentItem (0);设置开始页0页 TabLayout tabs = findViewById(R.id.tabs);//获取tablayout tabs.setupWithViewPager(viewPager);绑定viewPager

　　也可设置为读取自定义xml布局代码如下：

//用LayoutInflater加载布局

LayoutInflater factory = LayoutInflater.from(MainActivity.this);

//获取xml布局文件获取View

final View textEntryView = factory.inflate(R.layout.dialog, null);

// 通过textEntryView来获取控件

final TextView tv1 = (TextView) textEntryView

.findViewById(R.id.textView1);
//后续步骤如上步骤添加键值对时把view换成这里即可

四、效果

 

 

五、小结

　　刚开始尝试这个时，搜索了一阵子资料，发现百度搜索氛围和体验极差，大多数搜索结果都是写一通废话，明明只是想了解如何使用，搜出来真的是什么鬼都有，就是说不到点上，然后自己写了一下。吐槽一下百度搜索真的体验极差！

 

ViewAdapter xx =new ViewAdapter();
xx.additem("高亮",text);
xx.additem("结果",ret);

viewPager.setAdapter(xx);