AndroidUI:筛选条的简单实现
来源:互联网 发布:苹果ps软件 编辑:程序博客网 时间:2024/04/30 03:02
FilterBar
这个筛选条比较常用吧,做项目遇到过,不过这块不是我写的,闲来没事做个简单封装。我觉得重点在这个箭头上,毕竟能动起来的箭头更酷炫,文字颜色切换没什么好说的。之前看过一个github上的项目,仅仅用一个textView,然后drawableright属性使用的是rotatedrawable.setLevel使箭头转动,很有创意。但我就怕UI把这个箭头大小没弄好,drawableRight就不好控制箭头大小了,所以用的是textview+imageView。
FilterTab
布局:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:gravity="center_horizontal" android:layout_height="match_parent"> <TextView android:duplicateParentState="true" android:id="@+id/filter_text" android:layout_centerVertical="true" tools:text="综合排序" style="@style/filterTextStyle" /> <ImageView android:layout_centerVertical="true" android:id="@+id/filter_img" style="@style/filterImageStyle" /></RelativeLayout>
textview+image布局很简单,样式写成style,方便以后修改。android:duplicateParentState该属性可以让子view状态和父view状态一样,字体颜色就可以用selector控制了。自定义一个属性显示筛选条件的文字,选中和取消选中的时候执行动画,然后加了一个状态选中的监听。
代码:
public class FilterTab extends RelativeLayout { //旋转动画执行时间 private static final long DURATION_ROTATE = 200; private TextView textFilter; private ImageView imgArrow; private TabSelectedObervable tabSelectedObervable = new TabSelectedObervable(); public interface OnTabSelectedChangeListener{ void onChange(FilterTab filterTab,boolean selected); } private class TabSelectedObervable extends Observable<OnTabSelectedChangeListener>{ public void notifyTabChanged(FilterTab filterTab,boolean selected){ synchronized(mObservers) { for (int i = mObservers.size() - 1; i >= 0; i--) { mObservers.get(i).onChange(filterTab,selected); } } } } public FilterTab(Context context) { this(context, null); } public FilterTab(Context context, AttributeSet attrs) { this(context, attrs, 0); } public FilterTab(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); LayoutInflater.from(context).inflate(R.layout.filter_tab, this); textFilter = (TextView) findViewById(R.id.filter_text); imgArrow = (ImageView) findViewById(R.id.filter_img); //设置筛选条件 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FilterTab); String filterText = typedArray.getString(R.styleable.FilterTab_filterText); if(!TextUtils.isEmpty(filterText)){ textFilter.setText(filterText); } typedArray.recycle(); } /** * 设置筛选标签当前筛选条件 * * @param charSequence */ public void setText(CharSequence charSequence) { textFilter.setText(charSequence); } /** * 设置选中状态 * * @param selected */ public void setFilterTabSelected(boolean selected) { boolean selectedState = isSelected(); if (selectedState && selected) {//去除无效的状态 return; } //设置切换选中状态 setSelected(selected); //改变箭头方向 rotateArrow(selected); //通知观察者选中状态改变 tabSelectedObervable.notifyTabChanged(this,selected); } /** * 旋转箭头:选中true,箭头向上,取消:false,箭头向下 * * @param up */ private void rotateArrow(boolean up) { ObjectAnimator rotation = ObjectAnimator.ofFloat(imgArrow, "rotation", up?0f:180f, up?180f:360f); rotation.setInterpolator(new LinearOutSlowInInterpolator()); rotation.setDuration(DURATION_ROTATE); rotation.start(); } /** * 添加状态改变的监听 * @param listener */ public void addTabSelectedChangeListener(OnTabSelectedChangeListener listener){ tabSelectedObervable.registerObserver(listener); } /** * 移除状态改变的监听 * @param listener */ public void removeTabSelectedChangeListener(OnTabSelectedChangeListener listener){ tabSelectedObervable.unregisterObserver(listener); }}
FilterBar
单个筛选条件写好了,现在要考虑筛选条件之间的相互影响了。比如选中第一个FilterTab0,再选第二个FilterTab1的时候,FilterTab0就要取消选中,这点还是需要封装下的,不然每次都要处理状态很烦。想了下用一个线性布局,作为FilterTabs的容器,当它们填充完毕的时候就把关系处理好。这就涉及每个FilterTab的状态切换了,需要监听,所以我是后来写FiterBar才王FilterTab加了监听方法的,有时候真的是水到渠成(想到这个词,可能与原意不符,我说的意思就是需要的时候才自然而然会去做)。这个监听事件是用了观察者模式的,考虑到用户可能也要加监听,若用set就只能设置一个会覆盖掉,所以自然而然就写成addTabSelectedChangeListener了,跟viewpager.addOnPageChangeListener一样,可以设置多个。
public class FilterBar extends LinearLayout implements FilterTab.OnTabSelectedChangeListener { public FilterBar(Context context) { this(context, null); } public FilterBar(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public FilterBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); setOrientation(HORIZONTAL); } @Override protected void onFinishInflate() { super.onFinishInflate(); syncFilterTabState(); } private void syncFilterTabState() { for (int i = 0; i < getChildCount(); i++) { View child = getChildAt(i); if (child instanceof FilterTab) { ((FilterTab) child).addTabSelectedChangeListener(FilterBar.this); } } } private FilterTab lastSelectedTab; @Override public void onChange(FilterTab filterTab, boolean selected) { if (selected) { if (lastSelectedTab != null) { lastSelectedTab.setFilterTabSelected(false); } lastSelectedTab = filterTab; }else { lastSelectedTab = null; } }}
到此结束。哦FilterBar继承的是LinearLayout,所以分割线用showDivider就可以了。
activity_main布局:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.xunevermore.filterbar.FilterBar android:id="@+id/filter_bar" android:layout_width="match_parent" android:layout_height="50dp" android:background="#fff" android:divider="@drawable/divider_filter" android:dividerPadding="10dp" android:showDividers="middle"> <com.xunevermore.filterbar.FilterTab android:id="@+id/filter_tab0" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="#fff" app:filterText="综合排序" /> <com.xunevermore.filterbar.FilterTab android:id="@+id/filter_tab1" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="#fff" app:filterText="产品成分" /> <com.xunevermore.filterbar.FilterTab android:id="@+id/filter_tab2" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="#fff" app:filterText="产品色系" /> <com.xunevermore.filterbar.FilterTab android:id="@+id/filter_tab3" android:layout_width="0dp" android:layout_height="50dp" android:layout_weight="1" android:background="#fff" app:filterText="筛选" /> </com.xunevermore.filterbar.FilterBar></LinearLayout>
github 源码
- AndroidUI:筛选条的简单实现
- 一个简单androidUI框架的实现
- java实现简单的文件筛选
- Perl 实现简单的html 标签筛选
- [AndroidUI]对Tween动画的简单封装
- AndroidUI之三分钟教你实现效果简单大气的Dialog提示框
- AndroidUI之登录界面的实现分析
- AndroidUI之注册界面的实现分析
- 颜色条的简单实现
- 导航条的简单实现
- AndroidUI简单设置
- 拼音筛选的实现
- AndroidUI基础之 TimePickerDialog与 Timpicker 等简单的使用
- 算法实现筛选出树上符合要求的某一条路径的节点
- 筛选分组的第一条记录
- 简单的“TCP/IP筛选”
- 简单的日志 筛选工具
- 简单的素数筛选法
- 各个平台移动端meta
- 手动搭建Kubernetes1.8高可用集群(1)ETCD
- PHPstorm常用快捷键
- angular自定义过滤器
- 自己打造Sublime Text 3 开发编辑神器
- AndroidUI:筛选条的简单实现
- CRC校验程序
- 主数据管理和下一代绿色数据中心
- ASM来了,我们需要投放ASM吗
- 关于div的垂直居中的几种方法
- MemCache详细解读
- 深度学习之损失函数与激活函数的选择
- C/C++获取二维数组行列数
- ajax提交表单