2-VVI-材料设计之TabLayout下标签

简介: [1].将下面线去掉,自定义条目样式,就可以实现下图效果[2].以前实现这种效果一般用按钮组,有点麻烦[3].Fragment同上篇效果图二、代码实现:1.

[1].将下面线去掉,自定义条目样式,就可以实现下图效果
[2].以前实现这种效果一般用按钮组,有点麻烦
[3].Fragment同上篇

效果图

二、代码实现:

1.Activity的布局:a01_bottom.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:orientation="vertical">

    <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_72"
        android:background="@color/white">
    </android.support.design.widget.TabLayout>

</LinearLayout>
2.条目的布局:item_01_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_margin="5dp"
              android:gravity="center"
              android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/selector_menu_home"/>

    <TextView
        android:id="@+id/tv_menu_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item"
        android:textColor="@color/selector_blue"/>

</LinearLayout>
3.Activity
public class V01_BottomActivity extends AppCompatActivity {

    private TabLayout mTabTl;
    private ViewPager mContentVp;

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

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

        mTabTl = findViewById(R.id.tl_tab);
        mContentVp = 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++) {
            //获取Tab对应条目
            TabLayout.Tab itemTab = mTabTl.getTabAt(i);
            if (itemTab != null) {
                //自定义布局加到对应条目上
                itemTab.setCustomView(R.layout.item_tab_layout_custom);
                TextView itemTv = itemTab.getCustomView().findViewById(R.id.tv_menu_item);
                itemTv.setText(tabIndicators.get(i));
            }
        }
    }

    private void initContent() {
        tabIndicators = DataUtils.getRandomName(5, true);

        tabFragments = new ArrayList<>();
        for (String s : tabIndicators) {
            tabFragments.add(V01_ContentV4Fragment.newInstance(s));
        }
        //创建适配器对象
        contentAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @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);
            }
        };
        mContentVp.setAdapter(contentAdapter);
    }

}

后记、

1.声明:

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门:

更多安卓技术欢迎访问:安卓技术栈
我的github地址:欢迎star
简书首发,腾讯云+社区同步更新
张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱:1981462002@qq.com
微信:zdl1994328

4.欢迎关注我的微信公众号,最新精彩文章,及时送达:
公众号.jpg
相关文章
|
7月前
自定义tablayout中的tab样式
自定义tablayout中的tab样式
29 0
|
7月前
自定义tablayout,好用
自定义tablayout,好用
34 0
|
7月前
|
Android开发
android 快速更改TabLayout的选中背景颜色。
android 快速更改TabLayout的选中背景颜色。
112 0
|
XML Android开发 数据格式
Spinner样式大全
关于spinner控件有很多特殊的样式甚至是表现的很夸张的样式,这里就仅仅通过更换系统自带的xml样式来试验各种spinner样式效果。 首先在工程里创建最简单的spinner: 需要更换的地方有两处: 一。
886 0
|
Android开发
1-VVI-材料设计之-TabLayout上标签
[1].既然ViewPager和Fragment都总结完了,那就插一个材料设计中的TabLayout控件吧,这三者关系挺好 [2].TabLayout在上面就是曾经的ViewPager指示器,想当年都是自己封装来用,现在条件好了,安卓给了。
1156 0
|
Android开发 容器 数据格式
TabLayout的自定义
TabLayout的自定义,主要是通过setCustomView方法来添加自定义布局实现。 自定义TabLayout的实现主要包含以下几个步骤 ●创建自定义布局(这里我加了一个动画控件,可以替换成其他控件) ...
2036 0
|
Java Android开发
NestedScrollView嵌套RecyclerView最后一条item显示不全
NestedScrollView嵌套RecyclerView最后一条item显示不全 首先要在最外层的NestedScrollView配置属性 android:fillViewport="true": 然后在上层Ja...
8250 0