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