android TabLayout+ViewPager的联动应用

好久没写过博客了，今天难得有空（主要自己还是懒哈哈），如题弄下这个应用，这个范围用的还是比较广，闲话少说，先上图：

这个就是我们想要的效果，上面可以无限滑动（左右），下面不多话了，我们上代码：

布局：

<LinearLayout 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"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".view.activity.GameRankingListActivity">

    <include layout="@layout/common_title_bar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:background="@color/color_9999" />
  
    <android.support.design.widget.TabLayout
        android:id="@+id/id_game_ranking_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabBackground="@android:color/transparent"
        app:tabGravity="center"
        app:tabMaxWidth="200dp"
        app:tabMinWidth="10dp"
        app:tabPaddingStart="5dp"
        app:tabPaddingEnd="5dp"
        app:tabIndicatorColor="@color/blue"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/blue"
        app:tabTextAppearance="@style/TabLayoutTextSizeStyle"
        app:tabTextColor="@color/gray_69" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:background="@color/color_9999" />

    <com.xuyuyou.box.view.custom.NoScrollViewPager
        android:id="@+id/id_game_ranking_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

这里采用了原生的tablayout，主要的一些配置基本就是这么多了，app:tabBackground="@android:color/transparent"这个属性主要做点击消除了tab的阴影效果， app:tabMaxWidth="200dp" app:tabMinWidth="10dp" 设置我们的tab最大最小控制值，app:tabPaddingStart="5dp" app:tabPaddingEnd="5dp"设置左右距离，tabMode有两种属性:fixed和scrollable;fixed:指的是固定tab;scrollable指的是tab可滑动

源码：

private void initView() {
    setTitles();//获取标题
    new Thread( this ).start();
}
@Override
public void run() {
    //添加fragment
    Message msg = new Message();
    msg.what = COMPLETED;
    mhandler.sendMessage(msg);
}
private static final int COMPLETED = 0;
@SuppressLint("HandlerLeak")
Handler mhandler=new Handler(){
    @Override
    public void handleMessage(Message msg) {
        for (int i = 0; i <tabTexts.size() ; i++) {
            GameNewRankingFragment newRankingFragment=new GameNewRankingFragment();
            newRankingFragment.setType_flag(i);
            fragments.add( newRankingFragment);

            TabLayout.Tab tab = tabLayout.newTab();
            View inflate = View.inflate(GameRankingListActivity.this, R.layout.view_tab, null);
            TextView tv = inflate.findViewById(R.id.tv_tabName);
            tv.setText(tabTexts.get(i));
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tv.getLayoutParams();
            layoutParams.rightMargin = 10;
            layoutParams.leftMargin = 10;
            tv.setLayoutParams(layoutParams);
            tab.setCustomView(tv);
            tabLayout.addTab(tab);

        }
        mAdapter = new ManagementAdapter( getSupportFragmentManager() );
        mAdapter.setArray( fragments );
        mAdapter.setmTitleList( tabTexts );
        runOnUiThread( () -> {
            viewPager.setAdapter( mAdapter );
            viewPager.setCurrentItem( 0 );
            viewPager.setOffscreenPageLimit( 5 );
        } );
        tabLayout.setupWithViewPager( viewPager );
    }
};

实现Runnable接口，通过线程来处理UI操作，减少UI操作时间。因为我准备采用自定义的textView来定义tab对象所以这里需要通过Handler+message的方式操作，不能再线程里面直接对UI直接进行操作。前面我们做好了tablayout+viewpager基本可以动起来了，但是运行发现tab没有间距，所有的tab都挤在一起了，这个肯定是非常不美观的，所以关键的代码来了：

TabLayout.Tab tab = tabLayout.newTab();
View inflate = View.inflate(GameRankingListActivity.this, R.layout.view_tab, null);
TextView tv = inflate.findViewById(R.id.tv_tabName);
tv.setText(tabTexts.get(i));
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tv.getLayoutParams();
layoutParams.rightMargin = 10;
layoutParams.leftMargin = 10;
tv.setLayoutParams(layoutParams);
tab.setCustomView(tv);
tabLayout.addTab(tab);

这里我们自定义一个textView ，在TabLayout.Tab对象进行设置，并且获取textView的LinearLayout.LayoutParams对象，设置布局参数layoutParams.rightMargin = 10; layoutParams.leftMargin = 10;，这样就能让tab相互产生一定间距，能达到我们想要的效果了。