TabLayout与ViewPager的简单混合使用

由于一直在小公司待着，所做的安卓开发工作都是面对的工厂内部使用，所以对于界面的要求很低。现在突然想要换到互联网公司去工作，面试的过程中碰了很多的壁，因为对于传统生产线上的安卓产品和互联网的安卓产品有很大的不同，传统产线的产品要求高性能，对于界面要求则是尽可能的简单。但是对于互联网产品则侧重点在界面效果丰富强大。基于这种，所以在后面的开发中使用一些Material Design提供的控件开发。以此来记录自己使用这些控件时的困惑，然后在学习该控件的实现。

   TabLayout控件是在android.support.design.widget 包中，首先使用的时候需要在gradle中引入'com.android.support:design:28.0.0'。

我在学习使用的过程中，查看别人的写法有说design包25以下会有问题，所以我直接使用最新的28版本，至于25以下是否有问题则没有测试过，以下笔记内容在我使用过程当中，如果有用到什么随时添加相应的使用内容。

 属性tabmode是当你的tab页在铺满屏幕的时候可以选择的模式scrollable是表示可滑动的，fixed则表示不可滑动。
 其中tabBackground是设置你的TabLayout整个控件的背景，
 tabIndicatorColor则是设置下划线的颜色，tabIndicatorHeight设置下划线的高度，tabSelectedTextColor则是设置选中的文字的渲染的颜色。

以下是我activity页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_marginLeft="@dimen/dp_15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabBackground="@color/white"
        app:tabIndicatorColor="@color/work_flow_tabunderline"
        app:tabIndicatorHeight="4dp"
        app:tabSelectedTextColor="@color/black"
        android:layout_marginBottom="@dimen/dp_11"
        >
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

activity的界面逻辑

public class TestActivity extends AppCompatActivity {

  ViewPager vp;
  VPAdapter adapter;
  List<Fragment> list=new ArrayList<>();
  Fragment1 fragment1;
  Fragment2 fragment2;
  Fragment3 fragment3;
  TabLayout tl;


  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.test1);
      vp=findViewById(R.id.vp);
      tl=findViewById(R.id.tl);
      FragmentManager fm=this.getSupportFragmentManager();
      adapter=new VPAdapter(fm,list);
      vp.setAdapter(adapter);
      initView();
      tl.setupWithViewPager(vp);
  }

  public void initView()
  {
      fragment1=new Fragment1();
      fragment2=new Fragment2();
      fragment3=new Fragment3();
      list.add(fragment1);
     list.add(fragment2);
      list.add(fragment3);
      adapter.notifyDataSetChanged();
  }
}

这里的 tl.setupWithViewPager(vp);方法是将ViewPager和TabLayout关联起来，但是当关联之后要重写viewpager里适配器的一个方法才能显示tablayout的tab页文字。以下是viewpager的adapter适配器里的代码

public class VPAdapter extends FragmentPagerAdapter {

  List<Fragment> list;
  String[] title=new String[]{"待办","已办","委托"};

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

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

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

  @Nullable
  @Override
  public CharSequence getPageTitle(int position) {
      return title[position];
  }
}

其中getPageTitle(int position)就是当viewpager和tablayout进行关联的时候tablayout的tab页的文字信息就是由该方法来的。
Fragment的页面布局

<?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:orientation="vertical">
<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/srl"
        android:layout_marginTop="@dimen/dp_24"
        android:layout_marginLeft="@dimen/dp_15"
        android:layout_marginRight="@dimen/dp_15"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rvInfo"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

这里的3个fragment共用这一个布局，fragment代码相同，这里贴出一个fragment的代码

    public class Fragment1 extends MVPBaseFragment<WorkPresent,WorkConstract.IWorkView> implements WorkConstract.IWorkView
,SwipeRefreshLayout.OnRefreshListener {


    EditText etSearch;
    SwipeRefreshLayout srl;
    RecyclerView rvInfo;
    WorkAdapter adapter;
    List<Work> list=new ArrayList<>();
    LinearLayoutManager linearLayoutManager;

    @Override
    protected void initData() {
        list.clear();
        mPresent.getData();//调用接口
    }

    @Override
    protected void initView(View view) {
        srl=view.findViewById(R.id.srl);
        rvInfo=view.findViewById(R.id.rvInfo);
        etSearch=view.findViewById(R.id.etSearch);
        adapter=new WorkAdapter(R.layout.item_work,list);
        linearLayoutManager=new LinearLayoutManager(getActivity());
        rvInfo.setLayoutManager(linearLayoutManager);
        rvInfo.setAdapter(adapter);
        srl.setColorSchemeColors(getResources().getColor(R.color.colorAccent));
        srl.setOnRefreshListener(this);
    }

    @Override
    protected WorkPresent creatPresent(MVPBaseFragment<WorkPresent, WorkConstract.IWorkView> workPresentIWorkViewMVPBaseFragment) {
        return new WorkPresent();
    }



    @Override
    protected View initLayout(LayoutInflater inflater, ViewGroup container) {
        View view=inflater.inflate(R.layout.frg_work,container,false);
        return view;
    }

    @Override
    public void showLoading() {

    }

    @Override
    public void hideLoading() {

    }

    @Override
    public void showError(String message) {

    }

    @Override
    public void getData() {
        mPresent.getData();
    }

    @Override
    public String getSearch() {
        return etSearch.getText().toString();
    }

    @Override
    public void setSearch(String str) {
        etSearch.setText(str);
    }

    @Override
    public void onRefresh() {
        list.clear();
        mPresent.getData();
    }

    public BaseQuickAdapter getAdapter()
    {
        return  adapter;
    }
}

这里使用的mvp模式做的不去管里面的逻辑实现，这里调用接口和数据的业务处理在present里面。
当我在里面切换fragment的时候，viewpager里的fragmentAdapter是保存了fragment的状态的，也就是说这里的fragment是重用的，不是每次切换的时候重新创建的fragment，所以在initData初始化数据的时候需要清空数据源list，在一开始做的时候没有在initData里面调用list.clean()清空，我在切换viewpager看到里面的数据源的数量一直在不断的递增，所以启用调试模式查看fragment在viewpager里面切换的时候fragment对象没有重新创建，但是adapter在切换的时候对象改变了，list的对象也是不变的，调试到这里的时候就可以确定了fragment是重用的，该对象的属性对象list的指针指向的地址不变也是同一个对象，而fragment从不可见变的可见的时候onCreateView()的声明周期重新调用，其中initView(View view)和initData()方法是在超类(抽象类)的onCreateView()里的抽象方法，所以子类的这2个方法在onCreateView()里会重新调用，证明了adapter被重新创建，list和fragment被复用没有创建新的对象。那么这里的解决数据个数不对的问题可以在initView()里对list实例化，不在声明的时候实例化该对象，或者在initData()里面调用list.clean()方法清空数据源也能解决数据错乱的问题。
之所以记录上面的这个数据错乱问题，是因为我在使用fragment的时候从来不没有考虑过复用的问题，一直是用replace方法来替换fragment，所以习惯的这种方式之后再用到复用的时候，出现了数据错乱的问题。所以记录下，以后再用刀fragment时候在写业务逻辑的时候要考虑复用问题对于业务的影响，第二个是优化自己使用Fragment，尽量使用能复用的fragment对于性能的消耗要小。
以上是使用tablayout和viewpager混合使用当中遇到的问题，以作记录，方便自己以后查阅。