android fragment学习4-底部布局扩展TabLayout

我的博客
Fragment学习3–底部tab布局
https://blog.youkuaiyun.com/qq_26296197/article/details/81146319

布局结构

用的是google比较新的结构 TabLayout做为底部布局，在新闻类的app中tab切换，都是用tablayout写的

<?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">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:background="@color/white">

    </android.support.design.widget.TabLayout>

</LinearLayout>

Activity

public class TabLayoutBottomActivity extends BaseActivity {

    private TabLayout mTabTl;
    private ViewPager mContentVp;

    private List<String> tabIndicators;
    private List<Fragment> tabFragments;
    private ContentPagerAdapter contentAdapter;


    public static void startActivity(Context context ){
        Intent intent = new Intent(context, TabLayoutBottomActivity.class);
        context.startActivity(intent);
    }


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

        mTabTl = (TabLayout) findViewById(R.id.tl_tab);
        mContentVp = (ViewPager) findViewById(R.id.vp_content);

        initContent();
        initTab();
    }

    private void initTab(){

        mTabTl.setTabMode(TabLayout.MODE_FIXED);
        mTabTl.setSelectedTabIndicatorHeight(0);
        ViewCompat.setElevation(mTabTl, 10);
        mTabTl.setupWithViewPager(mContentVp);

        for (int i = 0; i < tabIndicators.size(); i++) {
            TabLayout.Tab itemTab = mTabTl.getTabAt(i);
            if (itemTab!=null){
                itemTab.setCustomView(R.layout.item_tab_layout_custom);
                TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_menu_item);
                itemTv.setText(tabIndicators.get(i));
            }
        }
        mTabTl.getTabAt(0).getCustomView().setSelected(true);
    }

    private void initContent(){
        tabIndicators = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            tabIndicators.add("Tab " + i);
        }
        tabFragments = new ArrayList<>();
        for (String s : tabIndicators) {
            tabFragments.add(TabContentFragment.newInstance(s));
        }
        contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
        mContentVp.setAdapter(contentAdapter);
    }


    class ContentPagerAdapter extends FragmentPagerAdapter {

        public ContentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return tabFragments.get(position);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return tabIndicators.get(position);
        }
    }



}

字体颜色选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="@color/blue"></item>
    <item android:color="@color/gray"></item>

</selector>

重点，下面代码的含义

       mTabTl.setTabMode(TabLayout.MODE_FIXED); //让底部tab处于可以适配的状态（类似wrap_content），占满屏幕
       mTabTl.setSelectedTabIndicatorHeight(0); //让指示器高度为0
       ViewCompat.setElevation(mTabTl, 10);//设置底部阴影为10px,位置在于viewpager相交的地方
       mTabTl.setupWithViewPager(mContentVp); //管理viewpager
      //设置自定义底部布局
      itemTab.setCustomView(R.layout.item_tab_layout_custom);
      mTabTl.getTabAt(0).getCustomView().setSelected(true);

public class TabContentFragment extends Fragment {

    private static final String EXTRA_CONTENT = "content";

    public static TabContentFragment newInstance(String content){
        Bundle arguments = new Bundle();
        arguments.putString(EXTRA_CONTENT, content);
        TabContentFragment tabContentFragment = new TabContentFragment();
        tabContentFragment.setArguments(arguments);
        return tabContentFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View contentView = inflater.inflate(R.layout.fragment_tab_content, null);
        ((TextView)contentView.findViewById(R.id.tv_content)).setText(getArguments().getString(EXTRA_CONTENT));
        return contentView;
    }
}

小结

显示这种方式是一次性，把所有的子fragment对象加入进来 ，对于大型的app,需要初始化的地方很多，这种方式可能会很占内存。但是对于一个Activity的子模块，这种方式就是非常的方便和简单的，写代码起来会很快的完成任务。

相对于fragment学习3中，那种方式适合作为app的架构–底部布局，因为它没有一次性的把所有fragment加入进去，它只是加入第一个fragment。

android fragment学习5–fragment扩展 TabLayout非自定义
https://blog.youkuaiyun.com/qq_26296197/article/details/81146989