Android(安卓)XML shape 标签使用详解
16lz
2021-01-25
1.线
1.1.实线
line_solid.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" android:useLevel="true"><stroke android:width="2dp" android:color="#ffff0000" />shape>1.1.虚线
line_dashed.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" android:useLevel="true"> <stroke android:width="2dp" android:dashGap="5dp" android:dashWidth="10dp" android:color="#ffff0000" />shape>2.矩形
（边框+填充）
2.1. 矩形实线边框-内部无填充
rect_solid_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" />shape>2.2.矩形虚线边框-内部无填充
rect_dashed_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" android:dashGap="5dp" android:dashWidth="10dp" />shape>2.3.矩形实线边框-内部填充
rect_solid_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#ff00ffff" />shape>2.4.矩形虚线边框-内部填充
rect_dashed_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" android:dashGap="5dp" android:dashWidth="10dp" /> <solid android:color="#ff00ffff" />shape>3.圆角矩形
3.1.圆角矩形-只有边框
rect_rounded_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <stroke android:width="2dp" android:color="#ffff0000" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" />shape>3.2.圆角矩形-只有内部填充
rect_rounded_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <solid android:color="#8000ff00" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" />shape>3.3.圆角矩形-有边框有填充
rect_rounded_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="100dp" android:width="100dp"/> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#8000ff00" /> <corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" />shape>3.4.圆角矩形-左边圆角为一个半圆弧
rect_rounded_left_arc.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <solid android:color="#8000ff00" /> <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />shape>3.5.圆角矩形-左右两边都是半圆弧
rect_rounded_left_right_arc.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <solid android:color="#8000ff00" /> <corners android:radius="20dp" />shape>3.6.圆角矩形-左右两边都是半圆弧-带边框
rect_rounded_left_right_arc_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="50dp" android:height="10dp" /> <stroke android:color="#ffff0000" android:width="2dp"/> <solid android:color="#8000ff00" /> <corners android:radius="20dp" />shape>3.7.圆角矩形-圆
rect_rounded_arc.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:height="10dp" android:width="10dp"/> <solid android:color="#8000ff00" /> <corners android:radius="20dp" />shape>3.8.圆角矩形-上下两边半圆弧
rect_rounded_top_bottom_arc.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="10dp" android:height="60dp" /> <solid android:color="#8000ff00" /> <corners android:radius="10dp" />shape>4.渐变效果（以矩形为例）
4.1.垂直线性渐变
rect_gradient_linear_vertical.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <gradient android:angle="-45" android:centerX="0.5" android:centerY="0.4" android:centerColor="#8000ff00" android:endColor="#1000ff00" android:startColor="#ff00ff00" android:type="linear" />shape>4.2.水平线性渐变
rect_gradient_linear_horizon.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:centerColor="#8000ff00" android:endColor="#ff00ff00" android:startColor="#1000ff00" android:type="linear" />shape>4.3.对角线线性渐变
rect_gradient_linear_diagonal.xml
<?xml version="1.0" encoding="utf-8"?> 4.4.径向渐变
rect_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <stroke android:width="1px" android:color="#ffff00ff" /> <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:startColor="#0000ff00" android:endColor="#ff00ff00" android:gradientRadius="40dp" android:type="radial" />shape>4.5.扫描渐变
rect_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="true"> <size android:width="20dp" android:height="20dp" /> <stroke android:width="1px" android:color="#ffff00ff" /> <gradient android:angle="0" android:centerX="0.5" android:centerY="0.5" android:startColor="#ff00ff00" android:gradientRadius="20dp" android:type="sweep" />shape>5.圆（边框+填充+渐变）
5.1.圆-边框
circle_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff0000" />shape>5.2.圆-填充
circle_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <solid android:color="#800000ff" />shape>5.3.圆-边框填充
circle_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#800000ff" />shape>5.4.线性渐变
circle_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <gradient android:angle="-90" android:centerX="0.5" android:centerY="0.8" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" />shape>5.5.径向渐变
circle_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="40dp" android:height="40dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:startColor="#ffff0000" android:centerColor="#80ff0000" android:endColor="#10ff0000" android:gradientRadius="30dp" android:type="radial" />shape>5.6.扫描渐变
circle_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <size android:width="@dimen/shape_size" android:height="@dimen/shape_size" /> <gradient android:centerX="0.5" android:centerY="0.6" android:startColor="#ffff0000" android:centerColor="#80ff0000" android:endColor="#20ff0000" android:gradientRadius="20dp" android:type="sweep" />shape>6.椭圆（边框+填充+渐变）
6.1.边框
oval_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" />shape>6.2.填充
oval_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <solid android:color="#800000ff" />shape>6.3.边框+填充
oval_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true"> <stroke android:width="2dp" android:color="#ffff0000" /> <solid android:color="#800000ff" />shape>6.4.线性渐变
oval_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:angle="45" android:centerX="0.5" android:centerY="0.7" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" />shape>6.5.径向渐变
oval_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#00ff0000" android:startColor="#ffff0000" android:gradientRadius="40dp" android:type="radial" />shape>6.6.扫描渐变
oval_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" > <size android:width="80dp" android:height="60dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="sweep" />shape>7.圆环（边框+填充+渐变）
7.1.环内填充
ring_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadiusRatio="4" android:shape="ring" android:thicknessRatio="4" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <solid android:color="#80ff0000" />shape>7.2.圆环边框
ring_border.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="20dp" android:shape="ring" android:thickness="16dp" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <stroke android:width="2dp" android:color="#ffff00ff" />shape>7.3.边框+填充
ring_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="20dp" android:shape="ring" android:thickness="16dp" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <solid android:color="#80ff0000" /> <stroke android:width="2dp" android:color="#ffff00ff" />shape>7.4.线性渐变
ring_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <gradient android:angle="45" android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="linear" />shape>7.5.径向渐变
ring_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <gradient android:centerX="0.5" android:centerY="0.5" android:centerColor="#80ff0000" android:endColor="#00ff0000" android:startColor="#ffff0000" android:gradientRadius="40dp" android:type="radial" />shape>7.6.扫描渐变
ring_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="10dp" android:thickness="30dp" android:useLevel="false"> <size android:width="80dp" android:height="80dp" /> <gradient android:centerColor="#80ff0000" android:endColor="#ffff0000" android:startColor="#00ff0000" android:type="sweep" />shape>更多相关文章
- Android(安卓)Paint
- Android(安卓)shape 矩形边框
- android 使用shape定义圆角矩形
- Android(安卓)draw Rect 坐标图示
- Android:使用Canvas合并Bitmap
- Android组件TextView细节
- Android给TextView设置透明背景、圆角边框
- 2.2.1 LinearLayout(线性布局)
- Android(安卓)drawText获取text宽度的三种方式