Android|TabLayout + ViewPager + Fragment 实现滑动布局 Android|UI

TabLayout属性：

设置背景：app:tabBackground
设置指示器颜色： app:tabIndicatorColor="@color/colorPrimary"
设置选中文字颜色：app:tabSelectedTextColor="#ffffff"
设置未选中文字颜色：app:tabTextColor="#000000"
设置背景：app:tabBackground="@color/colorPrimary"
设置标签距离：
app:tabPaddingStart=“10dp”
app:tabPaddingBottom=“10dp”
app:tabPadding=“10dp”
app:tabPaddingEnd=“10dp”
app:tabPaddingTop=“10dp”
设置显示模式:
app:tabMode=“scrollable” 可滑动:
app:tabMode="fixed"固定

使用

首先：布局 < TabLayout > < Tablayout> + < ViewPager >< ViewPager />
其次：创建FragmentPagerAdapter，用于管理Fragment
然后：创建Fragment
最后：将TabLayout 与ViewPager进行关联

代码展示
MainActivity.java

package com.yoostar.summary.tablayoutwithfragment; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import com.yoostar.summary.R; import com.yoostar.summary.mvp.module.base.BaseActivity; import java.util.ArrayList; import java.util.List; import butterknife.BindView; /** * ================================================ * 作者：zhoujianan * 版本：v1.0 * 创建日期：2019/7/18 * 描述: 结合TabLayout + ViewPager + Fragment 实现多个fragment的滑动 * 修订历史： * ================================================ */ public class MainActivity extends BaseActivity { @BindView(R.id.tab_ll) TabLayout mTabLl; @BindView(R.id.fragment_vp) ViewPager mFragmentViewPager; private List mFragments; private List> mTitles; private ViewPagerAdapter mVpAdapter; @Override protected int attachLayoutRes() { return R.layout.activity_tab_fragment; }@Override protected void initViews(Bundle savedInstanceState) { initFragment(); }private void initFragment() { mFragments = new ArrayList<>(); mTitles = new ArrayList<>(); for (int i = 0; i < 4; i++) { mFragments.add(DefFragment.newInstance(i)); } for (int i = 0; i < 4; i++) { mTitles.add("tab" + i); } mVpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), mFragments, mTitles); mFragmentViewPager.setAdapter(mVpAdapter); mTabLl.setupWithViewPager(mFragmentViewPager); }@Override protected void initInjector() {} }

ViewPagerAdapter .java

package com.yoostar.summary.tablayoutwithfragment; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * ================================================ * 作者：zhoujianan * 版本：v1.0 * 创建日期：2019/7/18 * 描述: * 修订历史： * ================================================ */ public class ViewPagerAdapter extends FragmentPagerAdapter { private List mFragments; private List> mTitles; public ViewPagerAdapter(FragmentManager fm,List fragments,List> titles) { super(fm); this.mFragments = fragments; mTitles = titles; }@Nullable @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); }@Override public Fragment getItem(int position) { return mFragments.get(position); }@Override public int getCount() { return mFragments.size(); }}

DefFragment.java

package com.yoostar.summary.tablayoutwithfragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.yoostar.summary.R; /** * ================================================ * 作者：zhoujianan * 版本：v1.0 * 创建日期：2019/7/18 * 描述: * 修订历史： * ================================================ */ public class DefFragment extends Fragment { private static final String TAG = "DefFragment"; private TextView mFragNameTv; public static Fragment newInstance(int type) { DefFragment defFragment = new DefFragment(); Bundle bundle = new Bundle(); bundle.putInt("type", type); defFragment.setArguments(bundle); return defFragment; }@Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_def, container,false); initView(view); return view; }protected void initView(View view) { Bundle bundle = getArguments(); mFragNameTv = view.findViewById(R.id.frag_name_tv); if (bundle != null) { int type = bundle.getInt("type"); Log.i(TAG, "initView: type " + type); mFragNameTv.setText(type + ""); } }}

activity_tab_fragment.xml

fragment_def.xml

def_white_bg_selector.xml

:android="http://schemas.android.com/apk/res/android">

【Android|TabLayout + ViewPager + Fragment 实现滑动布局】color.xml

#3F51B5 #303F9F #FF4081 #4475AE #c8c8c8#000000 #c6c6c6 #3DA3FF #00FFFFFF #ffffff

设置ViewPager是否可以滑动

package yoostar.com.tvpartner.widget; import android.content.Context; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent; /** * ================================================ * 作者：zhoujianan * 版本：v1.0 * 创建日期：2019/9/25 * 描述: * 修订历史： * ================================================ */public class HomeViewPager extends ViewPager { private boolean mScrollable; public HomeViewPager(@NonNull Context context) { super(context); }public HomeViewPager(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); }publicvoid setScrollable(boolean scrollable) { mScrollable = scrollable; }@Override public boolean onInterceptTouchEvent(MotionEvent ev) { if (mScrollable) { return super.onInterceptTouchEvent(ev); } else { return false; } }@Override public boolean onTouchEvent(MotionEvent ev) { if (mScrollable) { return super.onTouchEvent(ev); } else { return false; } } }

注意重点在电视机上不适用的两点：
一：没有焦点监听：
TabLayout没有child focus 的监听，所以，当需要在tab上进行Focus 的时候，tab的字体并不能根据focus进行改变，即使可以更改tab的背景颜色，但不能同时更改text的颜色，所以不行。
二：不方便能更改tabIndicator的长度，需要花费很大力气才能更改，还不如TextView 中设置drawablBottom方便一些。
所以，在电视端仍需要舍弃TabLayout ，直接使用LinearLayout + TextView 取代 TabLayout的效果。
小工具：动态设置tabLayout的显示模式

public class TabUtil {public static void dynamicSetTabLayoutMode(TabLayout tabLayout) { int tabWidth = calculateTabWidth(tabLayout); int screenWidth = getScreenWith(); if (tabWidth <= screenWidth) { tabLayout.setTabMode(TabLayout.MODE_FIXED); } else { tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); } } }