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

最新推荐文章于 2024-10-16 15:46:02 发布

xiaoxin_Android

最新推荐文章于 2024-10-16 15:46:02 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签：自定义view 自定义viewgroup tablelayout indicator

本文链接：https://blog.youkuaiyun.com/xiaoxin_Android/article/details/72492233

在实际的项目开发中, 我们经常会用到类似 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);