FilterBar
filterbar.gif
这个筛选条比较常用吧，做项目遇到过，不过这块不是我写的，闲来没事做个简单封装。我觉得重点在这个箭头上,毕竟能动起来的箭头更酷炫，文字颜色切换没什么好说的。之前看过一个github上的项目，仅仅用一个textView，然后drawableright属性使用的是rotatedrawable.setLevel使箭头转动，很有创意。但我就怕UI把这个箭头大小没弄好，drawableRight就不好控制箭头大小了,所以用的是textview+imageView。
FilterTab
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布局：
[图片上传失败...(image-c827e8-1512974731171)]
filterbar.gif
<?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>
