欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AndroidUI:筛选条的简单实现

程序员文章站 2022-04-09 22:57:46
...

FilterBar

AndroidUI:筛选条的简单实现

这个筛选条比较常用吧,做项目遇到过,不过这块不是我写的,闲来没事做个简单封装。我觉得重点在这个箭头上,毕竟能动起来的箭头更酷炫,文字颜色切换没什么好说的。之前看过一个github上的项目,仅仅用一个textView,然后drawableright属性使用的是rotatedrawable.setLevel使箭头转动,很有创意。但我就怕UI把这个箭头大小没弄好,drawableRight就不好控制箭头大小了,所以用的是textview+imageView。

FilterTab

AndroidUI:筛选条的简单实现

布局:

<?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布局:

AndroidUI:筛选条的简单实现


<?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 源码