实现一个简单的类似 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