Android UI之stateListDrawable stateListAnimator ripple背景的综合运用

1、简介

作为一个优雅的Android程序员，那么使用的控件的话应该是有交互的，像我们使用的微信，每一次点击事件用户都有所反应，用户都能准确的知道自己执行了那些操作，是的，这很重要。而反应这些好的用户体验的好多都是使用的背景。本文将介绍我们常用的ripple水波纹背景,stateListDrawable状态背景选择，stateListAniamtor 状态动画以及图层等背景效果。

2、背景的常用技巧

2.1 背景设置技巧

2.1.1  java代码设置普通背景

    private void setLineBg(){
        // GradientDrawable相当于drawable中自定义shape的布局文件所生成的Drawable，
所以它可以设置corners、solid、stroke
        GradientDrawable background = new GradientDrawable();
        background.setCornerRadius(10);
        background.setStroke(4, Color.RED);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            mTvText.setBackground(background);
        }else {
            mTvText.setBackgroundDrawable(background);
        }
    }

 

2.1.2   普通的背景选择（stateListDrawable）

其实吧，像这个我们都是会的，就是通过java 代码 setSelected进而设置图片的背景。我们也应当习惯去使用这样的图片选择，是吧。这里有个概念我需要指出来这里设置的 background或者说foreground实际上是设置的：StateListDrawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 只需要设置Selected即可改变背景了撒 可以的
      选中处理
    -->
    <item android:drawable="@drawable/titlebar_discover_selected" android:state_selected="true" />
    <item android:drawable="@drawable/titlebar_discover_normal" android:state_selected="false" />
    <item android:drawable="@drawable/titlebar_discover_normal" android:state_pressed="false" />
</selector>

2.1.3  通过Java代码设置ColorStateList和StateListDrawable

public class DoStateView extends android.support.v7.widget.AppCompatTextView{

    private boolean isSelected = false;
    private OnSelecedListener mOnSelecedListener;

    public DoStateView(Context context) {
        this(context,null);

    }

    public DoStateView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 设置颜色
        setTextColor(createColorStateList(Color.BLACK,Color.RED));
        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnSelecedListener != null){
                    isSelected = !isSelected;
                    DoStateView.this.setSelected(isSelected);
                    mOnSelecedListener.onSelectedOnChanged(isSelected);
                }
            }
        });
    }

    /**
     * 颜色选择
     * @param defaultColor   默认颜色
     * @param selectedColor  选中颜色
     * @return 
     */
    private static ColorStateList createColorStateList(int defaultColor, int selectedColor) {
        final int[][] states = new int[2][];
        final int[] colors = new int[2];
        int i = 0;

        states[i] = SELECTED_STATE_SET;
        colors[i] = selectedColor;
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = defaultColor;
        return new ColorStateList(states, colors);
    }

    public void setOnSelecedListener(OnSelecedListener onSelecedListener){
        this.mOnSelecedListener = onSelecedListener;
    }

    public interface OnSelecedListener{
        void onSelectedOnChanged(boolean selectState);
    }
}

    /**
     * 背景选择
       setBackground(createStateListDrawable(normalDrawableResID,selectedDrawableResID));
     * @param normalDrawableResID
     * @param selectedDrawableResID
     * @return
     */
    private StateListDrawable  createStateListDrawable(int normalDrawableResID,int selectedDrawableResID){
        StateListDrawable stateListDrawable = new StateListDrawable();
        Drawable normalDrawable = getContext().getResources().getDrawable(normalDrawableResID);
        Drawable selectedDrawable = getContext().getResources().getDrawable(selectedDrawableResID);
        // empty_state_set
        stateListDrawable.addState(EMPTY_STATE_SET,normalDrawable);
        stateListDrawable.addState(SELECTED_STATE_SET,selectedDrawable);
        return stateListDrawable;
    }


     // 同上所示 ------------ 正负值表示 true/false
     private void stateListMethod(){
          // 添加stateListDrawable
        StateListDrawable drawable = new StateListDrawable();
        Drawable unSelected = mContext.getResources().getDrawable(R.color.white);
        drawable.addState(new int[]{-android.R.attr.state_pressed}, unSelected);
        Drawable selected = mContext.getResources().getDrawable(R.color.gray);
        drawable.addState(new int[]{android.R.attr.state_pressed}, selected);
        mSettingTab.setBackground(drawable);
}

 如上的示例代码已经给出来了，以后可参照此案例去进行修改和完善，清测效果是Ok的 

2.2 Item条目的水波纹效果

     如上图所示，如果我们不设置摁下去的背景的话会显得用户体验很不好，所以有必要增添下背景。看下我们的背景是如何书写的，看下面的代码。

 这是不同的背景，针对的是5.0以下的背景选中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <solid android:color="#f2f4f5" />
        </shape&