android shape绘制常用的形状

shape是一个强大的东西，除了用代码绘制图形外，我们还可以用shape通过xml来绘制一些常见的控件背景之类的，非常方便，如下：

QQ截图20180308175605.png

1、纯色圆和空心圆shape:

纯色圆：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/text_color_fc" />
    <size
        android:width="45dp"
        android:height="45dp"></size>
</shape>

空心圆：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="28dp"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="false">
    <solid android:color="@color/text_color_fc" />
</shape>

调用：

<TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/shape_radius"
        android:gravity="center"
        android:text="纯色圆"
        android:textColor="@color/color_white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginStart="120dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/shape_circle"
        android:gravity="center"
        android:text="空心圆"
        android:textColor="@color/color_black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

2、纯色矩形和空心矩形shape:

纯色矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/text_color_fc" />
</shape>

空心矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 边框 -->
    <stroke
        android:width="2dp"
        android:color="@color/text_color_fc" />

    <!-- 形状颜色（如果需要的是空心矩形, 则形状颜色设置为透明） -->
    <solid android:color="#00000000" />

</shape>

调用：

<TextView
        android:layout_width="70dp"
        android:layout_height="40dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="108dp"
        android:background="@drawable/shape_rectangle"
        android:gravity="center"
        android:text="纯色矩形"
        android:textColor="@color/color_white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="120dp"
        android:layout_marginTop="108dp"
        android:background="@drawable/shape_rectangle_stroke"
        android:gravity="center"
        android:padding="10dp"
        android:text="空心矩形"
        android:textColor="@color/color_black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

3、圆角矩形shape

圆角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/text_color_fc" />
    <corners android:radius="10dp" />
</shape>

圆角空心：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 边框 -->
    <stroke
        android:width="2dp"
        android:color="@color/text_color_fc" />

    <!-- 形状颜色（如果需要的是空心矩形, 则形状颜色设置为透明） -->
    <solid android:color="#00000000" />
    <corners android:radius="10dp" />

</shape>

4、半角圆角矩形

实心：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/text_color_fc" />
    <corners android:radius="50dp" />

</shape>

空心：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 边框 -->
    <stroke
        android:width="2dp"
        android:color="@color/text_color_fc" />

    <!-- 形状颜色（如果需要的是空心矩形, 则形状颜色设置为透明） -->
    <solid android:color="#00000000" />
    <corners android:radius="50dp" />

</shape>

5、变色背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/text_color_fc" />
    <corners android:radius="50dp" />
    <gradient
        android:angle="0"
        android:centerColor="@color/text_color_fc"
        android:endColor="@color/colorAccent"
        android:startColor="@color/color_87d1ab"></gradient>

</shape>

6、变色文字：

控件自定义：

/**
 * Created by yy on 2018/3/8.
 * 描述：
 */

public class ColorTextView extends AppCompatTextView {
    private int mViewWidth;
    private Paint mPaint;
    private LinearGradient mLinearGradient;
    private Matrix mMatrix;
    private int mTranslate;

    public ColorTextView(Context context) {
        super(context);
    }

    public ColorTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ColorTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        if (mViewWidth == 0) {
            mViewWidth = getMeasuredWidth();
        }
        if (mViewWidth > 0) {
            mPaint = getPaint();
            mLinearGradient = new LinearGradient(
                    0,
                    0,
                    mViewWidth,
                    0,
                    new int[]{Color.BLUE, Color.BLACK, Color.RED, Color.YELLOW},
                    null, Shader.TileMode.MIRROR);
            mPaint.setShader(mLinearGradient);
            mMatrix = new Matrix();
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        if (mMatrix != null) {
            mTranslate += mViewWidth / 5;
            if (mTranslate > 2 * mViewWidth) {
                mTranslate = -mViewWidth;
            }
            mMatrix.setTranslate(mTranslate, 0);
            mLinearGradient.setLocalMatrix(mMatrix);
            postInvalidateDelayed(100);
        }
    }

}

调用：

<com.example.a55014.mytest.shape.ColorTextView
        android:id="@+id/song"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginTop="284dp"
        android:background="@drawable/shape_half_corner"
        android:gravity="center"
        android:padding="10dp"
        android:text="测试文字变色功能"
        android:textColor="@color/color_black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

github:
android shape绘制常用的形状