美文网首页
Kevin Learn Android:TabLayout

Kevin Learn Android:TabLayout

作者: Kevin_小飞象 | 来源:发表于2021-06-30 14:06 被阅读0次
    19.jpg

    前言

    官网:TabLayout 提供一个水平方向的布局来显示 Tabs,继承的是HorizontalScrollView 这个类。

    1625020955(1).png

    引入 material 包:

    implementation 'com.google.android.material:material:1.2.1'
    

    基础

    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>
    
    1. 给 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));
    
    1. 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) {
    
                }
            });
    

    进阶

    1. 属性
    属性 含义
    tabBackground 设置Tabs的背景
    tabGravity 为Tabs设置Gravity
    tabIndicatorColor 设置指示器的颜色
    tabIndicatorHeight 设置指示器的高度,规范建议是2dp
    tabMaxWidth 设置 Tab 的最大宽度
    tabMinWidth 设置 Tab 的最小宽度
    tabMode 设置Tabs的显示模式
    tabSelectedTextColor 设置Tab选中后,文字显示的颜色
    tabTextColor 设置Tab未选中,文字显示的颜色
    1. 可滚动的 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
    1. 布局文件
    <?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>
    
    1. 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);
        }
    }
    
    1. 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();
        }
    }
    
    1. 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() {
    
        }
    }
    
    1. 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;
        }
    
    }
    
    1. 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);
        }
    }
    

    修改选中字体大小

    TabLayout 修改选中字体大小

    相关文章

      网友评论

          本文标题:Kevin Learn Android:TabLayout

          本文链接:https://www.haomeiwen.com/subject/tstrultx.html