1.Drawable

In Android, everything that can be displayed is abstractly defined as a parent class Drawable, including but not limited to images, color blocks, artboards, backgrounds, and so on.

1.1 the Drawable resources

1. Drawable files are placed under various drawable directories in the RES directory;
2. \res\drawable usually puts descriptive XML files;
3. Image files are generally stored in the mipmap-xdpi or drawable xdpi directory of a specific resolution.

1.2 Drawable Multi-state graphics

StateListDrawable can change the graph based on different gesture states, corresponding to the selector in XML

      
<! - android: enterFadeDuration = "200", the android: exitFadeDuration = "200" into a new state or out of the old state when the gradient has a 200 milliseconds animation android: dither = "true" Indicates whether to jitter the image. ConstantSize ="true" When the size of each state of the selector is different, setting this value to true means that the largest size of the picture is displayed. Set to false to display the default image size -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <! Select * from drawable; select * from drawable;
    <item android:state_pressed="true" android:drawable="@drawable/shape_btn_blue_radius5"/>
    <! -- The default item drawable must be placed last -->
    <item android:drawable="@drawable/shape_btn_gray_radius5"/>
</selector>
Copy the code

Referenced shape_btn_blue_radius5. XML

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <solid android:color="@android:color/holo_blue_light" />
</shape>
Copy the code

Referenced shape_btn_gray_radius5. XML

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <solid android:color="@android:color/darker_gray" />
</shape>
Copy the code

1.3 Multi-state non-reference

      
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<! DrawableLeft --> drawableLeft --> drawableLeft -->
<! -- <item android:state_checkable="true">-->
<! -- <shape>-->
<! -- <corners android:radius="5dp"/>-->
<! -- <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>-->
<! -- <solid android:color="@android:color/holo_green_dark"/>-->
<! -- </shape>-->
<! -- </item>-->
<! -- <item android:state_selected="true">-->
<! -- <shape>-->
<! -- <corners android:radius="5dp"/>-->
<! -- <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>-->
<! -- <solid android:color="@android:color/holo_green_dark"/>-->
<! -- </shape>-->
<! -- </item>-->
<! -- <item android:state_focused="true">-->
<! -- <shape>-->
<! -- <corners android:radius="5dp"/>-->
<! -- <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>-->
<! -- <solid android:color="@android:color/holo_green_dark"/>-->
<! -- </shape>-->
<! -- </item>-->
    <item android:state_pressed="true">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@android:color/holo_blue_light"/>
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="5dp"/>
            <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>
            <solid android:color="@android:color/holo_red_dark"/>
        </shape>
    </item>
</selector>
Copy the code

Shape: The most commonly used XML drawing in Android

2.1 first, for example,

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <solid android:color="@android:color/holo_blue_light" />
</shape>
Copy the code

2.2,

      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <! [default] Oval line -->
    <! Android :innerRadius: Pixel type, radius of the inner circle, 10dp Android: innerRadiusRatio: float to ring width ratio to represent the radius of the circle. For example, if Android :innerRadiusRatio="3", the radius of the inner circle is equal to the width of the ring (i.e. the diameter of the outer circle) divided by 3. Android :thickness: indicates the pixel thickness of the ring. 10dp Android :thicknessRatio: indicates the floating point thickness of the ring. For example, if Android :thicknessRatio="2", the thickness of the ring is equal to the width of the ring divided by 2. If android:thickness is set, this property is not required. Android :useLevel: Boolean type, true if used as LevelListDrawable, false otherwise (it must be set to false otherwise ring will not display). -->

    <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -- -- >
    <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -- -- >
    <! - = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -- -- >

    <! -- Uniform fillet values for all 4 corners -->
    <! -- <corners android:radius="5dp" />-->
    <! -- Set fillet values for each of the 4 corners -->
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="15dp" />

    <! -- Android: Angle: integer, the starting Angle of the gradient. A value of 0 indicates the nine o 'clock position of the clock, and an increase in the value indicates a counterclockwise rotation. For example, a value of 90 indicates 6 o 'clock, a value of 180 indicates 3 o 'clock, and a value of 270 indicates 0/12 o 'clock. If android:type="linear", this parameter is unavailable. Android :centerY: indicates the floating point Y coordinate of the center of a circle. Android :gradientRadius: integer radius of the gradient is unavailable when Android :type="linear". Android :centerColor: specifies the color type of the gradient. Android :startColor: specifies the color type of the gradient. Android :endColor: specifies the startColor of the gradient. Color type, end color of gradient Android :type: string type, gradient type. Linear represents a linear gradient (the default), radial represents a radial gradient (the initial color is the center of the circle), and sweep represents a rolling gradient (a line segment rotates 360 degrees around an endpoint). Boolean type, set to true with no gradient and false with gradient. If you want to use the LevelListDrawable object, set it to true -->
    <gradient
        android:angle="90"
        android:endColor="#000000ff"
        android:startColor="#ffff0000" />

    <! -- Fill color -->
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />

    <! -- No size node indicates that the length and width are adaptive.
    <size
        android:width="125dp"
        android:height="45dp" />

    <! -- Use gradient, solid, whoever follows will be effective -->
    <solid android:color="@android:color/darker_gray" />

    <! DashWidth: value greater than 0: Change the stroke to a dashed line segment, and the length of a single line segment dashGap: value greater than 0: change the stroke to a dashed line segment, and the distance between dashed line segments -->
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_red_dark"
        android:dashWidth="5dp"
        android:dashGap="10dp" />
</shape>
Copy the code

3. The selector extension

3.1 text color selector to use android: color = “ARGB | RGB color value”

      
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#00FF00" android:state_pressed="true" />
    <item android:color="#0000FF" />
</selector>
Copy the code

3.2 use animated – rotate

      
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true">
    <item android:state_pressed="true">
        <animated-rotate android:drawable="@drawable/ic_test" android:pivotX="50%" android:pivotY="50%"/>
    </item>
    <item android:drawable="@drawable/ic_test" />
</selector>
Copy the code

3.3 Java code dynamically creates selectors

    public static void createSelector(Context context, View view, @DrawableRes int. resIds) {
        StateListDrawable stateListDrawable = new StateListDrawable();
        Drawable drawablePre = ContextCompat.getDrawable(context, resIds[0]);
        Drawable drawableDef = ContextCompat.getDrawable(context, resIds[1]);
        stateListDrawable.addState(new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled}, drawablePre);
        stateListDrawable.addState(new int[0], drawableDef);
        stateListDrawable.setState(new int[0]);
        stateListDrawable.setEnterFadeDuration(200);
        stateListDrawable.setExitFadeDuration(200);
        view.setBackground(stateListDrawable);
    }
Copy the code

3.4 Java code dynamically creates the Selector helper class

public class SelectorHelper {

    // Common state array
    public static final int[] STATE_DEFAULT = new int[0];
    public static final int[] STATE_PRESSED = new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled};
    public static final int[] STATE_SELECTED = new int[]{android.R.attr.state_selected};
    public static final int[] STATE_CHECKED = new int[]{android.R.attr.state_checked};
    public static final int[] STATE_UNCHECKED = new int[]{-android.R.attr.state_checked};
    public static final int[] STATE_DISABLED = new int[]{-android.R.attr.state_enabled};
    public static final int[] STATE_FOCUSED = new int[]{android.R.attr.state_focused};

    /** * dynamically creates a simple selector *@param context
     * @param view
     * @param resId
     */
    public static void createSelector(Context context, View view, @DrawableRes int. resId) {
        StateListDrawable stateListDrawable = new StateListDrawable();
        Drawable drawablePre = ContextCompat.getDrawable(context, resId[0]);
        Drawable drawableDef = ContextCompat.getDrawable(context, resId[1]);
        stateListDrawable.addState(STATE_PRESSED, drawablePre);
        stateListDrawable.addState(new int[0], drawableDef);
        stateListDrawable.setState(new int[0]);
        stateListDrawable.setEnterFadeDuration(200);
        stateListDrawable.setExitFadeDuration(200);
        view.setBackground(stateListDrawable);
    }

    /** * Create a selector by coloring the image *@param context
     * @param view
     * @param isVector
     * @param resId
     */
    public static void createSelector(Context context, View view, boolean isVector, @DrawableRes int resId) {
        StateListDrawable stateListDrawable = new StateListDrawable();
        Drawable drawableSrc;
        if (isVector) {
            drawableSrc = VectorDrawableCompat.create(context.getResources(), resId, context.getTheme());
        } else {
            drawableSrc = ContextCompat.getDrawable(context, resId);
        }
        stateListDrawable.addState(STATE_PRESSED, drawableSrc);
        stateListDrawable.addState(new int[0], drawableSrc);
        stateListDrawable.setState(new int[0]);
        Drawable wrapDrawable = DrawableCompat.wrap(stateListDrawable);
        ColorStateList colorStateList = new ColorStateList(new int[][]{
                STATE_PRESSED,
                new int[0]},new int[] {0XFFFF0000.0xFF00FF00});
        DrawableCompat.setTintList(wrapDrawable, colorStateList);
        view.setBackground(stateListDrawable);
    }

    /** * Text color picker *@param v
     */
    public static void createSelector(TextView v) {
        ColorStateList colorStateList = new ColorStateList(new int[][]{
                STATE_PRESSED,
                new int[0]},new int[]{Color.CYAN, Color.BLACK});
        v.setTextColor(colorStateList);
    }

    / * * * *@paramContext *@param view        View
     * @paramWhether isVector is a vector *@paramResId Image array */
    public static void createSelector(Context context, View view, boolean isVector, @DrawableRes int. resId) {
        StateListDrawable stateListDrawable = new StateListDrawable();
        Drawable drawableDis;
        Drawable drawablePre;
        Drawable drawableSel;
        Drawable drawableDef;
        if (isVector) {
            drawableDis = VectorDrawableCompat.create(context.getResources(), resId[0], context.getTheme());
            drawablePre = VectorDrawableCompat.create(context.getResources(), resId[1], context.getTheme());
            drawableSel = VectorDrawableCompat.create(context.getResources(), resId[2], context.getTheme());
            drawableDef = VectorDrawableCompat.create(context.getResources(), resId[3], context.getTheme());
        } else {
            drawableDis = ContextCompat.getDrawable(context, resId[0]);
            drawablePre = ContextCompat.getDrawable(context, resId[1]);
            drawableSel = ContextCompat.getDrawable(context, resId[2]);
            drawableDef = ContextCompat.getDrawable(context, resId[3]);
        }
        stateListDrawable.addState(STATE_DISABLED, drawableDis);
        stateListDrawable.addState(STATE_PRESSED, drawablePre);
        stateListDrawable.addState(STATE_SELECTED, drawableSel);
        stateListDrawable.addState(STATE_DEFAULT, drawableDef);
        stateListDrawable.setState(STATE_DEFAULT);
        stateListDrawable.setEnterFadeDuration(200);
        stateListDrawable.setExitFadeDuration(200); view.setBackground(stateListDrawable); }}Copy the code