1-VVI-材料设计之-TabLayout上标签

[1].既然ViewPager和Fragment都总结完了,那就插一个材料设计中的TabLayout控件吧,这三者关系挺好 [2].TabLayout在上面就是曾经的ViewPager指示器,想当年都是自己封装来用,现在条件好了,安卓给了。 [3].引入包:implementation 'com.android.support:design:26.1.0' [4].在此之前,你应该知道ViewPager和Fragment的组合使用,如果不清楚,可以看一下:Fragment与ViewPager结合

TableLayout.gif


1.Activity的布局
    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_48"
        android:background="@color/colorPrimary">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
2.Fragment:使用了我的封装类,详情可见:Fragment简单封装
public class V01_ContentV4Fragment extends BaseV4Fragment {
    /**
     *
     * @param str Activity向Fragment的数据
     * @return ViewPagerFragment对象
     */
    public static V01_ContentV4Fragment newInstance(String str) {
        Bundle arguments = new Bundle();
        arguments.putString("name_data", str);
        V01_ContentV4Fragment instance = new V01_ContentV4Fragment();
        instance.setArguments(arguments);
        return instance;
    }

    @Override
    protected void render(View rootView) {

        String name = getArguments().getString("name_data");
        setTextView(R.id.tv_content, name);
    }

    @Override
    protected int setLayoutId() {
        return R.layout.fg_v01_tab_content;
    }
}
3.Activity
public class V01_TopActivity extends AppCompatActivity {

    private TabLayout mTabTl;
    private ViewPager mContentVp;

    private List<String> tabDatas;
    private List<Fragment> tabFragments;
    private FragmentPagerAdapter contentAdapter;

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

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

        initFragment();
        initTab();
    }

    private void initTab() {
        //MODE_FIXED:均匀分布,排不下挤一挤
        //MODE_SCROLLABLE:可以滑动,从左向右排
        mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);
        mTabTl.setBackgroundColor(Color.GRAY);
        //设置颜色:(未选中的,选中的)
        mTabTl.setTabTextColors(Color.BLACK, Color.WHITE);
        //设置指示器的颜色
        mTabTl.setSelectedTabIndicatorColor(Color.BLUE);
        //设置底线高
        mTabTl.setSelectedTabIndicatorHeight(5);
        //设置阴影
        ViewCompat.setElevation(mTabTl, 10);
        //TabLayout设置mContentVp
        mTabTl.setupWithViewPager(mContentVp);
    }

    private void initFragment() {
        //随机产生4个名字
        tabDatas = DataUtils.getRandomName(4, true);
        //承载Fragment的集合
        tabFragments = new ArrayList<>();
        for (String name : tabDatas) {
            tabFragments.add(V01_ContentV4Fragment.newInstance(name));
        }
        //创建适配器对象
        contentAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return tabFragments.get(position);
            }

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

            @Override
            public CharSequence getPageTitle(int position) {
                return tabDatas.get(position);
            }
        };
        //为ViewPager设置适配器
        mContentVp.setAdapter(contentAdapter);
    }

    //菜单栏点击
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_tab_layout, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.tab_add:
                //创建随机名字
                String addName = ZRandom.randomCnName();
                //标签集合增加
                tabDatas.add(addName);
                //Fragment集合增加
                tabFragments.add(V01_ContentV4Fragment.newInstance(addName));
                //刷新,
                contentAdapter.notifyDataSetChanged();
                mTabTl.setupWithViewPager(mContentVp);
                return true;

            case R.id.tab_mode_fixed:
                mTabTl.setTabMode(TabLayout.MODE_FIXED);
                return true;

            case R.id.tab_mode_scrollable:
                mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE);
                break;
        }
        return super.onOptionsItemSelected(item);
    }

}

本文由张风捷特烈原创,转载请注明 更多安卓技术欢迎访问:https://www.jianshu.com/c/004f3fe34c94 张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com 你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券