前言
官网:TabLayout 提供一个水平方向的布局来显示 Tabs,继承的是HorizontalScrollView 这个类。
1625020955(1).png引入 material 包:
implementation 'com.google.android.material:material:1.2.1'
基础
-
创建 Tabs (代码中)
效果图
1625021816(1).png
布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
Activity 中添加 Tab:
public class MainActivity extends BaseActivity {
@BindView(R.id.tab_layout)
TabLayout mTabLayout;
@Override
public int getLayoutId() {
return R.layout.activity_main;
}
@Override
public void initView() {
mTabLayout.addTab(mTabLayout.newTab().setText("全部"));
mTabLayout.addTab(mTabLayout.newTab().setText("完赛"));
mTabLayout.addTab(mTabLayout.newTab().setText("专家"));
mTabLayout.addTab(mTabLayout.newTab().setText("装备"));
mTabLayout.addTab(mTabLayout.newTab().setText("NBA"));
}
}
2,创建 Tabs (xml 布局文件中)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="完赛"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="专家"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="装备"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NBA"/>
</com.google.android.material.tabs.TabLayout>
</LinearLayout>
- 给 Tab 设置图标
布局
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@mipmap/ic_favorite_end"
android:text="完赛"/>
or 代码
mTabLayout.addTab(mTabLayout.newTab().setText("完赛").setIcon(R.mipmap.ic_favorite_end));
- Tab 选中监听
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
进阶
- 属性
属性 | 含义 |
---|---|
tabBackground | 设置Tabs的背景 |
tabGravity | 为Tabs设置Gravity |
tabIndicatorColor | 设置指示器的颜色 |
tabIndicatorHeight | 设置指示器的高度,规范建议是2dp |
tabMaxWidth | 设置 Tab 的最大宽度 |
tabMinWidth | 设置 Tab 的最小宽度 |
tabMode | 设置Tabs的显示模式 |
tabSelectedTextColor | 设置Tab选中后,文字显示的颜色 |
tabTextColor | 设置Tab未选中,文字显示的颜色 |
-
可滚动的 Tab
效果
02.gif
布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/blue_color"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="@color/blue_color">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="完赛"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="专家"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="装备"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NBA"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="西甲"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="德甲"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="意甲"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="欧冠"/>
</com.google.android.material.tabs.TabLayout>
</LinearLayout>
TabLayout + ViewPager + Fragment
TabLayout .jpg- 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fillViewport="false"
app:tabMode="fixed"
app:tabIndicatorColor="@color/purple_500"
app:tabIndicatorHeight="2dp"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabIndicatorFullWidth="false"
app:tabTextColor="@color/text_E3"
app:tabSelectedTextColor="@color/text_color"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<style name="TabLayoutTextStyle">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
- MainActivity.java
public class MainActivity extends BaseActivity {
@BindView(R.id.tab_layout)
TabLayout mTabLayout;
@BindView(R.id.viewPager)
ViewPager mViewPager;
private List<String> mTitles = new ArrayList<>();
private List<Fragment> mFragments = new ArrayList<>();
private HomeFragment mHomeFragment = HomeFragmentFactory.getInstance().getHomeFragment();
private OrderFragment mOrderFragment = HomeFragmentFactory.getInstance().getOrderFragment();
private NoticeFragment mNoticeFragment = HomeFragmentFactory.getInstance().getNoticeFragment();
private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();
private HomeAdapter mAdapter;
@Override
public int getLayoutId() {
return R.layout.activity_main;
}
@Override
public void initView() {
mTitles.add("首页");
mTitles.add("工单");
mTitles.add("通知");
mTitles.add("我的");
mFragments.add(mHomeFragment);
mFragments.add(mOrderFragment);
mFragments.add(mNoticeFragment);
mFragments.add(mMineFragment);
mAdapter = new HomeAdapter(getSupportFragmentManager(),mTitles,mFragments);
mViewPager.setAdapter(mAdapter);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.setTabsFromPagerAdapter(mAdapter);
}
}
- BaseFragment.java
public abstract class BaseFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(layoutId(),container,false);
ButterKnife.bind(this,view);
initData();
initView(view);
return view;
}
/**
* 初始化布局
* @return 布局id
*/
protected abstract int layoutId();
/**
* 初始化控件
* @param view 布局view
*/
protected abstract void initView(View view);
/**
* 初始化,绑定数据
*/
protected abstract void initData();
/**
* 不带参数的跳转
*
* @param clazz 跳转到的目标类
*/
protected void readyGo(final Class<?> clazz) {
Intent intent = new Intent(getActivity(), clazz);
startActivity(intent);
}
/**
* 带参数的跳转
*
* @param clazz 跳转到的目标类
* @param bundle 参数
*/
protected void readyGo(final Class<?> clazz, final Bundle bundle) {
Intent intent = new Intent(getActivity(), clazz);
if (bundle != null) {
intent.putExtras(bundle);
}
startActivity(intent);
}
/**
* 跳转且返回结果
*
* @param clazz 跳转到的目标类
* @param requestCode 请求码
*/
protected void readyGoForResult(final Class<?> clazz, final int requestCode) {
Intent intent = new Intent(getActivity(), clazz);
startActivityForResult(intent, requestCode);
}
/**
* 带参数跳转且返回结果
*
* @param clazz 跳转到的目标类
* @param requestCode 请求码
* @param bundle 参数
*/
protected void readyGoForResult(final Class<?> clazz, final int requestCode, final Bundle bundle) {
Intent intent = new Intent(getActivity(), clazz);
if (bundle != null) {
intent.putExtras(bundle);
}
startActivityForResult(intent, requestCode);
}
@Override
public void onDestroy() {
super.onDestroy();
}
}
- HomeFragment.java
public class HomeFragment extends BaseFragment {
@Override
protected int layoutId() {
return R.layout.fragment_home;
}
@Override
protected void initView(View view) {
}
@Override
protected void initData() {
}
}
- HomeFragmentFactory.java
public class HomeFragmentFactory {
static HomeFragmentFactory mInstance;
private HomeFragment mHomeFragment;
private OrderFragment mOrderFragment;
private NoticeFragment mNoticeFragment;
private MineFragment mMineFragment;
public HomeFragmentFactory() {
}
public static HomeFragmentFactory getInstance() {
if (mInstance == null) {
synchronized (HomeFragmentFactory.class) {
if (mInstance == null) {
mInstance = new HomeFragmentFactory();
}
}
}
return mInstance;
}
/**
* 首页
*
* @return
*/
public HomeFragment getHomeFragment() {
if (mHomeFragment == null) {
synchronized (HomeFragment.class) {
if (mHomeFragment == null) {
mHomeFragment = new HomeFragment();
}
}
}
return mHomeFragment;
}
/**
* 工单
*
* @return
*/
public OrderFragment getOrderFragment() {
if (mOrderFragment == null) {
synchronized (OrderFragment.class) {
if (mOrderFragment == null) {
mOrderFragment = new OrderFragment();
}
}
}
return mOrderFragment;
}
/**
* 通知
*
* @return
*/
public NoticeFragment getNoticeFragment() {
if (mNoticeFragment == null) {
synchronized (NoticeFragment.class) {
if (mNoticeFragment == null) {
mNoticeFragment = new NoticeFragment();
}
}
}
return mNoticeFragment;
}
/**
* 我的
*
* @return
*/
public MineFragment getMineFragment() {
if (mMineFragment == null) {
synchronized (MineFragment.class) {
if (mMineFragment == null) {
mMineFragment = new MineFragment();
}
}
}
return mMineFragment;
}
}
- HomeAdapter.java
public class HomeAdapter extends FragmentPagerAdapter {
private List<String> titleList;
private List<Fragment> fragmentList;
public HomeAdapter(@NonNull FragmentManager fm, List<String> titleList,
List<Fragment> fragmentList) {
super(fm);
this.titleList = titleList;
this.fragmentList = fragmentList;
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
网友评论