TabLayout自定义tab_tablayout自定义图标布局样式
2016-11-25 14:23:54  By: dwtedx

在平时的工件中、相信大家都会使用到TabLayout、默认情况下TabLayout支持文字的、但也可以对文字设置iCon图标、但是呢设置的图标都会在文字的上面

那如果我们要想让图标出现的文字的左边或者是右边、那边这个时候我们就是自定义TabLayout的布局了、今天就给大家分享一下很全面的设置TabLayout的Item View的Demo、下面是效果图

tablayout 自定义tab


initView代码

private void initView() {
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
}


initData代码

private void initData() {
    fragments = new ArrayList<>();
    fragments.add(OneFragment.newInstance("One"));
    fragments.add(OneFragment.newInstance("Two"));
    fragments.add(OneFragment.newInstance("Three"));
    titles = new ArrayList<>();
    titles.add("One");
    titles.add("Two");
    titles.add("Three");
    FragmentViewPagerAdapter adapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), fragments, titles);
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
    viewPager.setCurrentItem(1);
    viewPager.setCurrentItem(0);//直接设置0的话竟然不起作用,好吧.就这样迂回一下吧
}


setupTabIcons代码

private void setupTabIcons() {
    tabLayout.getTabAt(0).setCustomView(getTabView(0));
    tabLayout.getTabAt(1).setCustomView(getTabView(1));
    tabLayout.getTabAt(2).setCustomView(getTabView(2));
}


public View getTabView(int position) {
    View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);
    TextView txt_title = (TextView) view.findViewById(R.id.txt_title);
    txt_title.setText(titles.get(position));
    ImageView img_title = (ImageView) view.findViewById(R.id.img_title);
    img_title.setImageResource(tabIcons[position]);
    return view;
}


xml代码

<?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:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@ id/img_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@ id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:textColor="@color/selector_tab_color" />
</LinearLayout>


TabLayout自定义item源代码下载链接: tablayout 自定义tab 密码: nfn7

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+