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

[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);
    }

}

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏佳爷的后花媛

Fragment横竖屏

第一步,创建两个Fragment。 Fragment1是横屏时的Fragment Fragment2是竖屏时的fragment。 代码如下:

1751
来自专栏分享达人秀

StackView实现卡片堆叠如此简单

上一期学习了AdapterViewFilpper的使用,你已经掌握了吗?本期开始学习同系列的StackView控件的使用方法。 一、认识StackView ...

26510
来自专栏木头编程 - moTzxx

跑马灯 TextView效果设计

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1292
来自专栏kevindroid

Android 点击屏幕其他位置隐藏Floating Action Button

3936
来自专栏CodingBlock

Android学习笔记(七)两个Fragment简单跳转示例

  在前两篇博文中分别介绍了Fragment得基础和Fragment的生命周期,然而说了这么多Fragment到底怎么用呢以及我们为什么要使用Fragment?...

1938
来自专栏木头编程 - moTzxx

Google官方 下拉刷新组件SwipeRefreshLayout 简单实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1563
来自专栏学海无涯

Android开发之Fragment回退栈

在Android开发之Fragment动态使用一文中,说到replace方法切换Fragment,会造成Fragment不断销毁、创建,但是有没有办法实现像Ac...

2924
来自专栏Android知识点总结

1-AVI--Fragment基础使用

1192
来自专栏增长技术

BaseRecyclerViewAdapterHelper

#如何使用它? 先在 build.gradle 的 repositories 添加:

3181
来自专栏向治洪

android的RadioGroup讲解

这个主要是如何替换fragment的demo。效果图如下(下面的tabhost和上面的bar不属于这次的内容,这个是我做的一个应用程序框架的一部分,有需要的或者...

21910

扫码关注云+社区