Drawable

android shape

参考文献：

1. 介绍

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

shape 取值有四种，可以是 rectangle(长方形)，oval(椭圆)，line(线条)，ring(圆环)，如果设置的话默认是长方形，

1.1 纯色圆

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

调用

<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" />

1.2 空心圆

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

圆环有以下几个属性

android:innerRadius：内环的半径。
android:innerRadiusRatio：内环的比例，比如这个值为 2，那么内环的半径就为环半径除以 2，如果设置了第一个属性，则这个属性不起作用。
android:thickness：环的厚度。
android:thicknessRatio：环的厚度比例，比如这个值为 2，那么环的厚度就为环半径除以 2，如果设置了第三个属性，则这个属性不起作用。
android:useLevel：只有当我们的 shape 使用在 LevelListDrawable 中的时候，这个值为 true，否则为 false。

调用

<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" />

1.3 矩形

1.3.1 纯色矩形

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

调用

<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" />

1.3.2 空心矩形

<?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="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" />

1.3.3 圆角矩形

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

1.3.4 空心圆角

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

1.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" />
    <gradient
        android:angle="0"
        android:centerColor="@color/text_color_fc"
        android:endColor="@color/colorAccent"
        android:startColor="@color/color_87d1ab"></gradient>

</shape>

1.5 变色文字

/**
 * 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" />

2. 属性总结

<shape>:

visible: 设置是否可见
shape: 形状,可选: rectangle(矩形,包括正方形), oval(椭圆,包括圆), line(线段), ring(环形)
innerRadiusRatio: 当 shape 为 ring 才有效,表示环内半径所占半径的比率,如果设置了 innerRadius, 他会被忽略
innerRadius: 当 shape 为 ring 才有效,表示环的内半径的尺寸
thicknessRatio: 当 shape 为 ring 才有效,表环厚度占半径的比率
thickness: 当 shape 为 ring 才有效,表示环的厚度,即外半径与内半径的差
useLevel: 当 shape 为 ring 才有效,表示是否允许根据level来显示环的一部分

<size>:

width: 图形形状宽度
height: 图形形状高度

<gradient>:

startColor: 渐变的起始颜色
centerColor: 渐变的中间颜色
endColor: 渐变的结束颜色
type: 渐变类型,可选(linear**,radial,**sweep), 线性渐变(可设置渐变角度),发散渐变(中间向四周发散),平铺渐变
centerX: 渐变中间亚瑟的 x 坐标,取值范围为:0~1
centerY: 渐变中间颜色的Y坐标,取值范围为:0~1
angle: 只有 linear 类型的渐变才有效,表示渐变角度,必须为45的倍数哦
gradientRadius: 只有 radial 和 sweep 类型的渐变才有效, radial必须设置,表示渐变效果的半径
useLevel: 判断是否根据 level 绘制渐变效果

<solid>：

color: 背景填充色,设置 solid 后会覆盖 gradient 设置的所有效果!!!!!!

<stroke>

width: 边框的宽度
color: 边框的颜色
dashWidth: 边框虚线段的长度
dashGap: 边框的虚线段的间距

<conner>

radius: 圆角半径,适用于上下左右四个角
topLeftRadius, topRightRadius, BottomLeftRadius, tBottomRightRadius: 依次是左上,右上,左下,右下的圆角值,按自己需要设置!

<padding>

left, top, right, bottm:依次是左上右下方向上的边距!

如果觉得文章对你有用，请随意赞赏

android drawable

android shape

https://blog.rainsheep.cn/archives/1624628926726

作者

Rainsheep

发布于

2021-06-25

更新于

2023-12-28

许可协议

CC BY 4.0