智能管家---2.TabLayout布局

比眉伴天荒 2022-05-17 03:57 210阅读 0赞

**这是学习慕课视频入门Android app 的学习笔记，包括源代码以及项目实现的思路**

资源下载：[https://download.csdn.net/download/ayangann915/10586026][https_download.csdn.net_download_ayangann915_10586026]  
\* 添加依赖  
在gradle文件中：

implementation 'com.android.support:design:26.1.0'

*  接下来实现TabLayout布局，下面是效果：  
    ![这里写图片描述][70]  
    一共有四个子布局，滑动页面或点击都可以实现切换的效果，上面的四个项目名称就是放在Tablayout中：

默认字体颜色：白色

app:tabTextColor="#ffffff"

选中后的颜色：

app:tabSelectedTextColor="@color/colorAccent"

选中后下划线的颜色：

app:tabIndicatorColor="@color/colorAccent"

背景颜色：

android:background="@color/colorPrimary"

模式：

app:tabMode="fixed"

名称居中显示：

app:tabGravity="fill"

其余的viewPager占领全部界面。完整代码：  
![这里写图片描述][70 1]

*  接下来是初始化控件如viewpager，TabLayout等，并将四个标题和界面都存放在List中。

初始化数据List：

private void initData() {
    //四个标题
            mTitles=new ArrayList<>();
            mTitles.add("服务管家");
            mTitles.add("微信精选");
            mTitles.add("美图相册");
            mTitles.add("个人中心");
    //四个界面fragment，每个fragment绑定不同的xml文件，现在统一内容为标题名称
            mFragment=new ArrayList<>();
            mFragment.add(new BluterFragment());
            mFragment.add(new WeChatFragment());
            mFragment.add(new GirlFragment());
            mFragment.add(new UserFragment());
        }
    //注意标题名称和相应的fragment要一一对应

预加载：

mViewPager.setOffscreenPageLimit(mFragment.size());

viewPager的滑动监听：  
为viewPager设置适配器

mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
     //获取每个fragment
                @Override
                public Fragment getItem(int position) {
                    return mFragment.get(position);
                }
    //fragment的数量
                @Override
                public int getCount() {
                    return mFragment.size();
                }
    //每个fragment对应的标题
                @Override
                public CharSequence getPageTitle(int position) {
                    return mTitles.get(position);
                }
            });

去除阴影：  
没去除前效果：  
![这里写图片描述][70 2]  
去除之后的图见最开始的图片。

getSupportActionBar().setElevation(0);

绑定标题和界面：

mTabLayout.setupWithViewPager(mViewPager);

完整代码：  
![这里写图片描述][70 3]

![这里写图片描述][70 4]

![这里写图片描述][70 5]

[https_download.csdn.net_download_ayangann915_10586026]: https://download.csdn.net/download/ayangann915/10586026
[70]: /images/20220517/cfab05523d5446fc9b8cd9182e81eb5f.png
[70 1]: /images/20220517/44cd3093d918450ea18a802a1d31ef4e.png
[70 2]: /images/20220517/e4100ce15de24e39a5f69bcee17f4894.png
[70 3]: /images/20220517/bbc7f9f1a7c94982bcb4f4d2b1e9f931.png
[70 4]: /images/20220517/40c1961bc5414c33bec0eb41a3e10b66.png
[70 5]: /images/20220517/f2438e6fd0b74adda432f6122fcc4cde.png