• Stars
    star
    1,866
  • Rank 24,197 (Top 0.5 %)
  • Language
    Java
  • Created almost 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

仿美团选择城市、微信通讯录、饿了么点餐列表的导航悬停分组索引列表。

SuspensionIndexBar

相关博文:

从0实现: http://blog.csdn.net/zxt0601/article/details/52355199

http://blog.csdn.net/zxt0601/article/details/52420706

使用说明 and 封装: http://gold.xitu.io/post/583c133eac502e006c23cc81

喜欢随手点个star 多谢

在哪里找到我:

我的github:

https://github.com/mcxtzhang

我的CSDN博客:

http://blog.csdn.net/zxt0601

我的稀土掘金:

http://gold.xitu.io/user/56de210b816dfa0052e66495

我的简书:

http://www.jianshu.com/users/8e91ff99b072/timeline

效果一览:

配合我另一个库组装的效果(SuspensionIndexBar + SwipeMenuLayout):

(SwipeDelMenuLayout : https://github.com/mcxtzhang/SwipeDelMenuLayout)

SwipeDelMenuActivity: image

高仿美团选择城市界面(MeituanSelectCityActivity):

image

高仿微信通讯录界面(WeChatActivity):

image

普通城市列表界面(MainActivity):

image

引入

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency

	dependencies {
	        compile 'com.github.mcxtzhang:SuspensionIndexBar:V1.0.0'
	}

使用说明:

http://gold.xitu.io/post/583c133eac502e006c23cc81

更新记录:

2016 11 29 :

  • 重构悬停分组,将TitleItemDecoration更名为SuspensionDecoration,数据源依赖ISuspensionInterface接口。
  • 重构索引导航,将IndexBar对数据源的操作,如排序,转拼音等分离出去,以接口IIndexBarDataHelper通信。
  • 有N多兄弟给我留言、加QQ问的:如何实现美团选择城市列表页面,
  • 添加一个不带悬停分组的HeaderView(微信通讯录界面)

2016 11 10 : 1 IndexBar也考虑了HeaderView不需要索引的情况:

        mIndexBar.setmPressedShowTextView(mTvSideBarHint)//设置HintTextView
                .setNeedRealIndex(true)//设置需要真实的索引
                .setmLayoutManager(mManager)//设置RecyclerView的LayoutManager
                .setmSourceDatas(mDatas)//设置数据
                .setHeaderViewCount(mWrapperAdapter.getHeaderViewCount());//设置HeaderView数量

2016 11 07 : 1 考虑了HeaderView不需要索引的情况,TitleItemDecoration增加了一个headerView的字段和方法:

new TitleItemDecoration(this, mDatas).setHeaderViewCount(mWrapperAdapter.getHeaderViewCount())

2 暂时抽离TitleItemDecoration至lib包,并且以 接口形式接收数据

to do list

1 扩展 SuspensionDecoration 支持传入layout or View。

闲言碎语

网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 RecyclerView/ListView+一个头部View(位置固定在父布局上方)实现的。 对于以上解决方案,有以下几点个人觉得不好的地方:

  1. 现在RecyclerView是主流

  2. 在RecyclerView外套一个父布局总归是增加布局层级,容易overdraw,显得不够优雅。

  3. item布局实现带这种分类头部的方法有两种,一种是把分类头部当做一种itemViewtype(麻烦),另一种是每个Item布局都包含了分类头部的布局,代码里根据postion等信息动态Visible,Gone头部(布局冗余,item效率降低)。

况且Google为我们提供了ItemDecoration,它本身就是用来修饰RecyclerView里的Item的,它的getItemOffsets() onDraw()方法用于为Item分类头部留出空间和绘制(解决缺点3),它的onDrawOver()方法用于绘制悬停的头部View(解决缺点2)。

而且更重要的是,ItemDecoration出来这么久了,你还不用它

本文就利用ItemDecoration 打造 分组列表,并配有悬停头部功能。

亮点预览:添加多个ItemDecoration、它们的执行顺序、ItemDecoration方法执行顺序、ItemDecoration和RecyclerView的绘制顺序

http://blog.csdn.net/zxt0601/article/details/52355199)

我们用ItemDecoration为RecyclerView打造了带悬停头部的分组列表。其实Android版微信的通讯录界面,它的分组title也不是悬停的,我们已经领先了微信一小步(认真脸)~ 再看看市面上常见的分组列表(例如饿了么点餐商品列表),不仅有悬停头部,悬停头部在切换时,还会伴有切换动画。 关于ItemDecoration还有一个问题,简单布局还好,我们可以draw出来,如果是复杂的头部呢?能否写个xml,inflate进来,这样使用起来才简单,即另一种简单使用onDraw和onDrawOver的姿势。 so,本文开头我们就先用两节完善一下我们的ItemDecoration。然后进入正题:自定义View实现右侧索引导航栏IndexBar,对数据源的排序字段按照拼音排序,最后将RecyclerView和IndexBar联动起来,触摸IndexBar上相应字母,RecyclerView滚动到相应位置。(在屏幕中间显示的其实就是一个TextView,我们set个体IndexBar即可) 由于大部分使用右侧索引导航栏的场景,都需要这几个固定步骤,对数据源排序,set给IndexBar,和RecyclerView联动等,所以最后再将其封装一把,成一个高度封装,因此扩展性不太高的控件,更方便使用,如果需要扩展的话,反正看完本文再其基础上修改应该很简单~。

本文摘要:

  1. 用ItemDecoration实现悬停头部切换动画
  2. 另一种**简单使用onDraw()和onDrawOver()**的姿势
  3. 自定义View实现右侧索引导航栏IndexBar
  4. 使用TinyPinyin对数据源排序
  5. 联动IndexBar和RecyclerView。
  6. 封装重复步骤,方便二次使用,并可定制导航数据源

http://blog.csdn.net/zxt0601/article/details/52420706)

本文是这个系列的第三篇,不出意外也是终结篇。因为使用经过重构后的控件已经可以快速实现市面上带 索引导航、悬停分组的列表界面了。 在前两篇里,我们从0开始,一步一步实现了仿微信通讯录、饿了么选餐界面。 (第一篇戳我 第二篇戳我) 这篇文章作为终结篇,和前文相比,主要涉及以下内容:

  • 重构悬停分组,将TitleItemDecoration更名为SuspensionDecoration,数据源依赖ISuspensionInterface接口。
  • 重构索引导航,将IndexBar对数据源的操作,如排序,转拼音等分离出去,以接口IIndexBarDataHelper通信。
  • 有N多兄弟给我留言、加QQ问的:如何实现美团选择城市列表页面,
  • 添加一个不带悬停分组的HeaderView(微信通讯录界面)

http://gold.xitu.io/post/583c133eac502e006c23cc81

More Repositories

1

SwipeDelMenuLayout

The most simple SwipeMenu in the history, 0 coupling, support any ViewGroup. Step integration swipe (delete) menu, high imitation QQ, iOS. ~史上最简单侧滑菜单,0耦合,支持任意ViewGroup。一步集成侧滑(删除)菜单,高仿QQ、IOS。~
Java
3,667
star
2

ZLayoutManager

Some custom LayoutManager .Such as SwipeCard、FLowLayout。一些自定义的LayoutManager,仿探探、人人影视 炫动滑动 卡片层叠 和流式布局等。
Java
2,524
star
3

AnimShopButton

A shopping cart button with a telescopic displacement rotation animation ...一个带伸缩位移旋转动画的购物车按钮
Java
1,298
star
4

PathAnimView

用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View.
Java
1,079
star
5

SwipeCaptcha

Swipe captcha of Android platform. Android 平台的滑动验证码。
Java
713
star
6

all-base-adapter

Adapter terminator, including DataBinding, any ViewGroup, list(Rv, Lv ). Write Adapter, it is enough .Adapter终结者,包含DataBinding,任意ViewGroup,Rv、Lv列表。写Adapter,有它就够了
Java
527
star
7

SupportDemos

本工程最初仅为DiffUtil的一个Demo,后发展为讲解Google Android Support包内那些常用or冷门有用的工具类的合集。
Java
460
star
8

NestFullListView

ListView、RecyclerView、ScrollView里嵌套ListView 相对优雅的解决方案
Java
245
star
9

Demos

The playground of mcxtzhang....
Java
148
star
10

DataBindingUtils

Some utils about Data Binding.(More easier adapter to write multi type list.) | 一些DataBinding相关的工具类。(一句代码实现多类型列表的Adapter)
Java
9
star
11

csdn-retrofit

CSDN视频授课源码
Java
7
star
12

gradle-plugins

plugins and utils of gralde(groovy).
Groovy
6
star
13

ModularizationDemo

A demo of Modularization.. 大工程组件化的Demo.
Java
6
star
14

react-native-demo

learn ReactNative demos.
JavaScript
3
star
15

mvp-code-creator

A plugin for auto create MVP codes.
Java
2
star
16

tagview

Java
2
star
17

android_playground_as4

1
star
18

DownloadManager

a http download manager
Java
1
star
19

groovy-demo

Demos of groovy
Groovy
1
star
20

TJ-notes

Notes and code of Thinking in Java.
Java
1
star
21

aly-rn

JavaScript
1
star
22

swipe-exchange

A GridView , which item can drag&drop
Java
1
star
23

view-inspector

Java
1
star