【安卓学习之UI设计】TabLayout的使用总结
程序员文章站
2022-06-16 13:18:21
█ 【安卓学习之UI学习】TabLayout的使用总结█ 相关文章：- ● 【android学习开源项目之BasePopup】BasePopup(PopupWindow)进行二次封装 ● 【android学习开源项目之AndroidAutoSize】AndroidAutoSize和DialogFragment的适配 ● 【安卓学习之UI学习】 自定义组合控件View 的开发 ● 【安卓学习之UI学习】 自定义 弧形等级进度条 ● 【安卓学习之UI学习】RecyclerView的...
█ 【安卓学习之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