快捷搜索:  as

【实战项目】类似于京东的地址选择器

作者简介

本篇来自 BlinCheng 的投稿,分享了一个类似京东地址选择器的控件,盼望对大年夜家有所赞助!

BlinCheng 的博客地址:

http://blog.csdn.net/qq_25867141

简介

近来器械写的挺多的,这不又要弄一个类似于京东的地址选择器,然后刚开始我是不乐意自己去写的,这器械便是费光阴,然后大年夜致浏览了一会,发明真没有相符公司需求的,好吧,那就自己开撸。先看看效果图,不知道是不是大年夜家想要的。然后京东是用在一个从下而上的弹窗里面的。

主要功能

1. 大年夜致分为三个模块:顶部的Tab模块,中心的移动唆使器模块,还有便是下面的list了。

2. 支持点击数据后自动跳到下一个Tab

3. 支持点击Tab后回到当前Tab的状态

4. 还有便是可以随意设置你想要的。

照样来说说怎么用吧。

集成导入(gradle)

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

2. Add the dependency

另外承袭要领看:

https://jitpack.io/#Blincheng/AddressSelector

应用

XML直接应用

Java中应用

AddressSelector addressSelector = (AddressSelector) findViewById(R.id.address);

设置Tab数量

addressSelector.setTabAmount(3);

也可以不设置,默认3级。

设置数据列表的Itme回调OnItemClickListener

设置Tab的点击事故回调OnTabSelectedListener

留意,一样平常来说这两个点击事故都要设置,并且数据的处置惩罚必然要搞清楚。

其他的一些属性的设置

实现

现在我们开始说说实现要领吧,从需求上面来讲,我们必要写出来的器械具有以下几点:

有唆使器(Tab)

有一条会动的横线

下方有个列表

上方的Tab和下方的列表都是可点击的。

着实,从功能角度实现上来讲,着实我们用 google 供给的现成的控件堆一下,着实也可以写出来。比如举个例子啊,上面的 tab 就用 google 自己的 TabLayout,下方的列表就用 RecyclerView,然后把数据什么的绑定以下,点击事故做一下,把非常处置惩罚掉落,也能出来,便是说未方便二次应用。

然后实现思路:我这边直接承袭 LinearLayout,然后一个一个往里面 addView 就好,简单粗暴。

Tab 的话可以承袭 TextView,Line 的话承袭 View 应该也行,下面的列表就直接用 RecyclerView。好了,看看若何实现吧。

Tab的实现:

先thinking,我们的 Tab 必要有翰墨,选中状态,然后应该还要一个 index。看代码:

很简单,便是重写一下 setText,然后根据选中的状态来设置对应的颜色即可。

实现Line

原先想了一下直接用 View 也能实现,然则后来想想既然要移动,有点小动画,外层既然用了线性结构,这边的横线还有长度的问题,以是也直接用横向的线性结构了。如下:

着实和 Tab 差不多,独一不合的是必要之前选中的 oldIndex,由于终究有个动画嘛。

看看这个接口,在设置 index 的同时,把移动的动画也一路做了。

AddressSelectord 实现

由于之前就想好用承袭 LinearLayout 的形式,以是也简单粗暴,直接一层一层去 addView 是吧,必要留意的是,这边有个这样的措施:

看出来了吧,着实便是去创建必要的 Tab,然后把点击事故等其他参数都设置好了,主要用来 AddressSelectord 内部来创建 Tab 时刻用。然后需要的属性照样要供给接口设置的:

必要设置当前 tab 的数量,然后看这边又调用了 init()措施,也便是说着实这个时刻 AddressSelectord 又重置了。以是在 init()措施 中有一个 removeAllViews() 必要调用。

下边儿列表的实现RecyclerView

然后一开始我就在想要不要供给什么 Adapter 可以让大年夜家自己来绑定命据,然后又想了想,为了简单方便大年夜家应用,以是我感觉照样暂时不写 Adapter 了。然则想想每个 item 的 Entity 不应该是逝世的,终究大年夜家的项目照样不一样的,以是我终极采取了一种要领去实现。

public interface CityInterface {

String getCityName();

}

便是这个接口了,大年夜家在设置数据源的时刻,只管设置自己的,然后独一必要留意的是大年夜家的 Item 必要去实现这个接口,返回我列表必要展示的文本,我用来展示列表的内容。只能要求大年夜家做这么一点点了。以是在设置数据的时刻也要求大年夜家这么做了。

不然就简单粗暴抛出 throw new RuntimeException("AddressSelector cities must implements CityInterface"

这样就好说了,我在 setOnItemClickListener 可以直接返回 CityInterface,就办理统统问题了。

着末便是把要开放的接口开放一下,测测调调~

总结

然后,着实也是很简单的,便是练练手,做一些让自己和大年夜家都感觉方便可行的工作。假如有什么地方有问题,或者有更好的建议真的很迎接大年夜家多多提出建讲和意见,还有一句话便是说没事不要闲着,要多动动。

项目地址:

https://github.com/Blincheng/AddressSelector

您可能还会对下面的文章感兴趣: