欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实现一个简单的类似 TabLayout 的顶部指示器

程序员文章站 2024-02-05 23:33:52
...

在实际的项目开发中, 我们经常会用到类似 TabLayout 的布局, 但是有的时候我们的需求样式可能会跟 TabLayout 的样式不太一样, 今天带给大家一个简单的自定义指示器.

先来看下项目演示效果:
实现一个简单的类似 TabLayout 的顶部指示器

实现一个简单的类似 TabLayout 的顶部指示器

项目需求:
1. 顶部的 item 有可能是文本, 也有可能是图片;
2. item 数量较少时, 可全屏显示, item 过多时, 需要支持横向滑动;
3. 指示器的样式问题, 不同的位置可能样式不一样, 这里需要考虑指示器样式扩展性问题;
4. 添加数据时, 我希望是类似 ListView 那样, 通过适配器添加数据,而不是一个一个 add 进去.

项目整体简介:
1.自定义属性:
1).default_count:
该属性是用来定义一屏显示的默认的总的 item 个数, 如果 item 个数小于等于这个默认的值, 就平均分配大小

2.顶部 item 的处理:
项目中通过适配器模式为布局添加 itemView, 这里使用的是原生的适配器 BaseAdapter, 使用的时候我们可以像写 ListView 适配器那样,
写一个适配器类继承自 BaseAdapter

3.指示器样式:
项目中指示器样式的实现被分离出来, 这里实际上用了一个策略模式, 默认已经给出了两个样式, 如果给定的样式不满足项目的要求, 可以自己实现
IndicatorStrategy接口, 根据需求实现自己的逻辑

目前给出两个默认的样式, 后续会持续添加其他的样式, 逻辑很简单

使用方法:
1.在布局中引入

<com.example.tabtitlelayout.weight.TabTitleLayout
        android:id="@+id/tabTitleLayout"
        android:layout_width="match_parent"
        app:default_count="5"
        android:layout_height="48dp"/>

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

2.定义一个顶部 tab 的适配器继承自 BaseAdapter

3.定义 Fragment 适配器

4.Activity 重配置

mViewPager.setAdapter(mPageAdapter);
        mTitleLayout.setAdapter(mAdapter);
        mTitleLayout.setUpWithViewPager(mViewPager);
        mTitleLayout.setIndicatorStrategy(mLineIndicator);
        mTitleLayout.setOnIndicatorClickListener(this);

        titleList = new ArrayList<>();
        titleList.add("第一");
        titleList.add("第二");
        titleList.add("第三");
        titleList.add("第四");
        titleList.add("第五");
        titleList.add("第六");
        titleList.add("第七");
        titleList.add("第八");
        mAdapter.setTitleList(titleList);
        for (int i = 0; i < titleList.size(); i++) {
            CommonFragment commonFragment = CommonFragment.newInstance(i);
            mFragmentList.add(commonFragment);
        }
        mPageAdapter.setFragmentList(mFragmentList);

欢迎大家 star, 项目 git 地址:
https://github.com/xinxin1314/TabTitleLayout

android 开发交流群: 190088567