【安卓学习之UI设计】TabLayout的使用总结

█ 【安卓学习之UI学习】TabLayout的使用总结

█ 相关文章：

-　
　●　【android学习开源项目之BasePopup】BasePopup(PopupWindow)进行二次封装
　●　【android学习开源项目之AndroidAutoSize】AndroidAutoSize和DialogFragment的适配
　●　【安卓学习之UI学习】 自定义组合控件View 的开发
　●　【安卓学习之UI学习】 自定义 弧形等级进度条
　●　【安卓学习之UI学习】RecyclerView的使用总结
　●　【安卓学习之UI学习】TabLayout的使用总结
　　
█ 读前说明：

-　
　●　本文通过学习别人写demo,学习一些课件,参考一些博客,’学习相关知识，如果涉及侵权请告知
　●　本文只简单罗列相关的代码实现过程
　●　涉及到的逻辑以及说明也只是简单介绍，主要当做笔记，了解过程而已

█ 原生：TabLayout + ViewPager

-　
　●　添加依赖库(app中的 build.gradle中)

dependencies {
    implementation 'com.android.support:design:27.1.1'
    implementation 'com.android.support:support-v4:28.0.0'
}

●　xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="64dp"
        android:layout_marginLeft="20dp"
        app:tabIndicatorColor="#2EA6F1"
        app:tabSelectedTextColor="#2EA6F1"
        app:tabTextAppearance="@style/tab_appearance"
        app:tabTextColor="#666666" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#dddddd" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

●　使用

    @BindView(R.id.tabLayout)
    TabLayout mTab;
    @BindView(R.id.viewPager)
    ViewPager mViewPager;
    MyFragmentAdapter mAdapter;

     // 初始化viewpager
     mAdapter = new  MyFragmentAdapter(this);
     viewPager.setAdapter(mAdapter );
     viewPager.setOffscreenPageLimit(1);
     // 绑定viewpager和tabLayout
     mTab.setupWithViewPager(viewPager);
     // 如果只有一个滑动页
     if (getCount() == 1) {
         mTab.setTabTextColors(Color.parseColor("#222222"), Color.parseColor("#222222"));
         mTab.setSelectedTabIndicatorColor(Color.parseColor("#f0f2f5"));
     }

●　适配器

public class MyFragmentAdapterextends extends FragmentPagerAdapter {
    private FragmentManager mFragManager;

    public MyFragmentAdapter(FragmentManager fm) {
        super(fm);
        this.mFragManager = fm;
    }

    @Override
    public int getCount() {
        return 2;
    }

    // 推荐在这里 创建Fragment
    // 当Fragment被创建后，getItem()不会被调到了
    @Override
    public Fragment getItem(int position) {
        if (position== 0) {
            return new MusicFragment();
        }
        return new VideoFragment();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        if (position== 0) {
            return "音乐";
        }
        return "视频";
    }
}

█ TabLayout加强版：SlidingTabLayout + ViewPager+ …

-　
　●　添加依赖库(app中的 build.gradle中)

dependencies {
    implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
}

●　xml

// CoordinatorLayout 实现折叠的ActionBar效果
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="1dp">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStart="0dp"
            app:paddingStart="0dp">

           <com.flyco.tablayout.SlidingTabLayout
               android:id="@+id/tabLayout"
               android:layout_width="wrap_content"
               android:layout_height="70dp"
               android:layout_above="@+id/to_search"
               android:paddingTop="10dp"
               android:paddingBottom="10dp"
               android:background="@color/colorPrimary"
               android:elevation="0dp"
               android:foregroundGravity="left"
               app:tl_indicator_color="@color/white"
               app:tl_indicator_height="4dp"
               app:tl_tab_width="60dp"
               app:tl_indicator_width="20dp"
               app:tl_indicator_corner_radius="4dp"
               app:tl_textSelectColor="@color/white"
               app:tl_textsize="18sp"
               app:tl_textUnselectColor="#9EFFFFFF"
              />

        </android.support.v7.widget.Toolbar>

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


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

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

●　使用

    @BindView(R.id.tabLayout)
    SlidingTabLayout tabLayout;
    @BindView(R.id.viewPager)
    ViewPager viewPager ;

    MyFragmentAdapter mAdapter = new  MyFragmentAdapter(this);
    viewPager.setAdapter(homePagerAdpter);
    tablayout.setViewPager(viewPager);

●　效果图

█ 蚯蚓导航：TabLayout + ViewPager+ …

-　
　●　添加依赖库(app中的 build.gradle中)

dependencies {
     //implementation 'com.github.auv1107:tablayout-android:-SNAPSHOT'
     implementation 'com.github.hiliving:tablayout-android:1.0.1'
}

●　xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.antiless.support.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:elevation="0dp"
        app:indicatorEndColor="#2B2B2B"// 自定义样式
        app:indicatorMarginEnd="26dp"// 自定义样式
        app:indicatorMarginStart="26dp"// 自定义样式
        app:indicatorStartColor="#2B2B2B"// 自定义样式
        app:tabIndicatorHeight="0dp"// 自定义样式
        app:tabSelectedTextColor="#343333"
        app:tabTextAppearance="@style/CustomTablayoutTextAppearance3"
        app:tabTextColor="@color/tab_2_normal_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

●　使用

    @BindView(R.id.tabLayout)
    TabLayout tabLayout;
    @BindView(R.id.sec_tab_vp)
    ViewPager viewPager;

	MyFragmentAdapter mAdapter = new  MyFragmentAdapter(this);
   	viewPager.setAdapter(pagerAdpter);
  	tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
   	tabLayout.setupWithViewPager(viewPager);

●　效果图

█ 相关资料：

-　
　●　1.2018.09.16 谷歌TabLayout及FlycoTabLayout三方库入门 - 简书
　●　2.2017.04.27 FlycoTabLayout/README_CN.md at master · H07000223/FlycoTabLayout · GitHub
　●　2.2019-08-29 TabLayout加强版 —— com.flyco.tablayout.SlidingTabLayout_lixinxiaos的博客-CSDN博客
　●　3.2018.10.23 GitHub - auv1107/tablayout-android: 修改 support 包 TabLayout，实现新浪微博/即刻 APP 蚯蚓导航效果

转载请注明出处：
https://blog.csdn.net/ljb568838953/article/details/110188424

本文地址：https://blog.csdn.net/ljb568838953/article/details/110188424