FilterBar
filterbar.gif
這個(gè)篩選條比較常用吧缰猴，做項(xiàng)目遇到過吗购，不過這塊不是我寫的，閑來沒事做個(gè)簡(jiǎn)單封裝腻贰。我覺得重點(diǎn)在這個(gè)箭頭上,畢竟能動(dòng)起來的箭頭更酷炫吁恍，文字顏色切換沒什么好說的。之前看過一個(gè)github上的項(xiàng)目，僅僅用一個(gè)textView冀瓦，然后drawableright屬性使用的是rotatedrawable.setLevel使箭頭轉(zhuǎn)動(dòng)伴奥，很有創(chuàng)意。但我就怕UI把這個(gè)箭頭大小沒弄好翼闽，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布局很簡(jiǎn)單，樣式寫成style,方便以后修改感局。android:duplicateParentState該屬性可以讓子view狀態(tài)和父view狀態(tài)一樣,字體顏色就可以用selector控制了尼啡。自定義一個(gè)屬性顯示篩選條件的文字，選中和取消選中的時(shí)候執(zhí)行動(dòng)畫询微，然后加了一個(gè)狀態(tài)選中的監(jiān)聽崖瞭。
代碼：
public class FilterTab extends RelativeLayout {
//旋轉(zhuǎn)動(dòng)畫執(zhí)行時(shí)間
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);
//設(shè)置篩選條件
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();
}
/**
* 設(shè)置篩選標(biāo)簽當(dāng)前篩選條件
*
* @param charSequence
*/
public void setText(CharSequence charSequence) {
textFilter.setText(charSequence);
}
/**
* 設(shè)置選中狀態(tài)
*
* @param selected
*/
public void setFilterTabSelected(boolean selected) {
boolean selectedState = isSelected();
if (selectedState && selected) {//去除無效的狀態(tài)
return;
}
//設(shè)置切換選中狀態(tài)
setSelected(selected);
//改變箭頭方向
rotateArrow(selected);
//通知觀察者選中狀態(tài)改變
tabSelectedObervable.notifyTabChanged(this,selected);
}
/**
* 旋轉(zhuǎn)箭頭：選中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();
}
/**
* 添加狀態(tài)改變的監(jiān)聽
* @param listener
*/
public void addTabSelectedChangeListener(OnTabSelectedChangeListener listener){
tabSelectedObervable.registerObserver(listener);
}
/**
* 移除狀態(tài)改變的監(jiān)聽
* @param listener
*/
public void removeTabSelectedChangeListener(OnTabSelectedChangeListener listener){
tabSelectedObervable.unregisterObserver(listener);
}
}
FilterBar
單個(gè)篩選條件寫好了书聚，現(xiàn)在要考慮篩選條件之間的相互影響了。比如選中第一個(gè)FilterTab0藻雌，再選第二個(gè)FilterTab1的時(shí)候雌续，F(xiàn)ilterTab0就要取消選中，這點(diǎn)還是需要封裝下的胯杭，不然每次都要處理狀態(tài)很煩驯杜。想了下用一個(gè)線性布局，作為FilterTabs的容器做个，當(dāng)它們填充完畢的時(shí)候就把關(guān)系處理好鸽心。這就涉及每個(gè)FilterTab的狀態(tài)切換了，需要監(jiān)聽居暖，所以我是后來寫FiterBar才王FilterTab加了監(jiān)聽方法的再悼，有時(shí)候真的是水到渠成(想到這個(gè)詞，可能與原意不符膝但，我說的意思就是需要的時(shí)候才自然而然會(huì)去做)。這個(gè)監(jiān)聽事件是用了觀察者模式的谤草，考慮到用戶可能也要加監(jiān)聽跟束，若用set就只能設(shè)置一個(gè)會(huì)覆蓋掉，所以自然而然就寫成addTabSelectedChangeListener了丑孩，跟viewpager.addOnPageChangeListener一樣冀宴，可以設(shè)置多個(gè)。
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;
}
}
}
到此結(jié)束温学。哦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="產(chǎn)品成分" />
<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="產(chǎn)品色系" />
<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>
