全面解析：Android开发中Shape文件属性图形用法大全
2020-11-11 本文已影响0人
千夜零一
引言
全面教你如何使用Shape文件中的属性图形，看这一篇就够了！
好家伙！妈妈再也不担心我遇到具体情况忘乎所以，不知道shape属性名称了！我直呼好家伙！
还在等什么呢？快@你的小伙伴一起来学习+收藏吧！用最精炼的代码，让你收获最真实的用法实战经验。告别冗余和繁琐，我们在行动！
效果图
用法
一、虚线条引用的自定义shape文件(放在Drawable资源文件夹下)
- 横向：dash_line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="#000000"
android:dashWidth="3dp"
android:dashGap="3dp" />
<size android:height="1dp" />
</shape>
- 纵向：dash_line_ver.xml（原理：将dash_line布局翻转90度即可）
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-300dp"
android:right="-300dp">
<rotate
android:drawable="@drawable/dash_line"
android:fromDegrees="90"
android:toDegrees="90"
android:visible="true" />
</item>
</layer-list>
二、圆形引用的自定义shape文件
- 空心圆：circle_stroke.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp"
android:color="@color/black"
/>
<size android:width="20dp"
android:height="20dp"/>
</shape>
- 实心圆：circle_solid.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/black"/>
</shape>
- 实心圆+描边儿：circle_solidandstroke.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/blue"/>
<stroke android:color="@color/black"
android:width="2dp"
/>
</shape>
三、椭圆引用的自定义shape文件
- 空心椭圆：oval_stroke.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp"
android:color="@color/black"/>
</shape>
- 实心椭圆：oval_solid.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/black"/>
</shape>
- 实心椭圆+描边儿：oval_solidandstroke.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/blue" />
<stroke
android:width="2dp"
android:color="@color/black" />
</shape>
四、圆环引用的自定义shape文件
- 纯色圆环：ring.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="40dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<size
android:width="100dp"
android:height="100dp" />
<gradient
android:endColor="@color/black"
android:startColor="@color/black" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
- 渐变色圆环：ring_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="40dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<size
android:width="100dp"
android:height="100dp" />
<gradient
android:endColor="@color/blue"
android:startColor="@color/green" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
主布局完整引用代码
Tips：我使用了View做示例，background引用可以套用到大多数组件上使用，比如TextView。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".blog2.Case63"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:textSize="24sp"
android:textColor="@color/white"
android:background="@color/green"
android:gravity="center"
android:text="Android中Shape文件使用集合"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/lineType"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="线条"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@id/toolbar"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="@color/white"
android:background="@color/blue"
/>
<View
android:id="@+id/realLineHor"
android:layout_width="80dp"
android:layout_height="1dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/realLineVer"
app:layout_constraintTop_toBottomOf="@id/lineType"
app:layout_constraintBottom_toTopOf="@id/circleType"
android:background="@color/black"/>
<View
android:id="@+id/realLineVer"
android:layout_width="1dp"
android:layout_height="80dp"
app:layout_constraintTop_toBottomOf="@id/lineType"
app:layout_constraintBottom_toTopOf="@id/circleType"
app:layout_constraintLeft_toRightOf="@id/realLineHor"
app:layout_constraintRight_toLeftOf="@id/dashLineHor"
android:background="@color/black"/>
<View
android:id="@+id/dashLineHor"
android:layout_width="80dp"
android:layout_height="2dp"
android:background="@drawable/dash_line"
app:layout_constraintTop_toBottomOf="@id/lineType"
app:layout_constraintBottom_toTopOf="@id/circleType"
app:layout_constraintRight_toLeftOf="@id/dashLineVer"
app:layout_constraintLeft_toRightOf="@id/realLineVer"
/>
<View
android:id="@+id/dashLineVer"
android:layout_width="1dp"
android:layout_height="80dp"
android:background="@drawable/dash_line_ver"
app:layout_constraintTop_toBottomOf="@id/lineType"
app:layout_constraintBottom_toTopOf="@id/circleType"
android:layout_marginRight="60dp"
app:layout_constraintRight_toRightOf="parent"
android:layerType="software"
/>
<TextView
android:id="@+id/circleType"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="圆形"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@id/lineType"
android:layout_marginTop="100dp"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="@color/white"
android:background="@color/blue"/>
<View
android:id="@+id/circleStroke"
android:layout_width="75dp"
android:layout_height="75dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/circleSolid"
android:layout_marginTop="10dp"
android:background="@drawable/circle_stroke"
app:layout_constraintTop_toBottomOf="@id/circleType"
/>
<View
android:id="@+id/circleSolid"
android:layout_width="75dp"
android:layout_height="75dp"
app:layout_constraintLeft_toRightOf="@id/circleStroke"
app:layout_constraintRight_toLeftOf="@id/circleSolidAndStroke"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/circle_solid"
app:layout_constraintTop_toBottomOf="@id/circleType"
/>
<View
android:id="@+id/circleSolidAndStroke"
android:layout_width="75dp"
android:layout_height="75dp"
app:layout_constraintLeft_toRightOf="@id/circleSolid"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:background="@drawable/circle_solidandstroke"
app:layout_constraintTop_toBottomOf="@id/circleType"
app:layout_constraintRight_toRightOf="parent"
/>
<TextView
android:id="@+id/voalType"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="椭圆形"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@id/circleType"
android:layout_marginTop="100dp"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="@color/white"
android:background="@color/blue"/>
<View
android:id="@+id/voal_hor"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@drawable/voal_stroke"
app:layout_constraintTop_toBottomOf="@id/voalType"
app:layout_constraintBottom_toTopOf="@id/ringType"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/voal_ver"
/>
<View
android:id="@+id/voal_ver"
android:layout_width="40dp"
android:layout_height="80dp"
android:background="@drawable/voal_stroke"
app:layout_constraintLeft_toRightOf="@id/voal_hor"
app:layout_constraintRight_toLeftOf="@id/voal_solid_hor"
app:layout_constraintTop_toBottomOf="@id/voalType"
app:layout_constraintBottom_toTopOf="@id/ringType"
/>
<View
android:id="@+id/voal_solid_hor"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@drawable/voal_solid"
app:layout_constraintRight_toLeftOf="@id/voal_solid_ver"
app:layout_constraintLeft_toRightOf="@id/voal_ver"
app:layout_constraintTop_toBottomOf="@id/voalType"
app:layout_constraintBottom_toTopOf="@id/ringType"
/>
<View
android:id="@+id/voal_solid_ver"
android:layout_width="40dp"
android:layout_height="80dp"
android:background="@drawable/voal_solid"
app:layout_constraintRight_toLeftOf="@id/voal_solidAndStroke"
app:layout_constraintLeft_toRightOf="@id/voal_solid_hor"
app:layout_constraintTop_toBottomOf="@id/voalType"
app:layout_constraintBottom_toTopOf="@id/ringType"
/>
<View
android:id="@+id/voal_solidAndStroke"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="@drawable/voal_solidandstroke"
app:layout_constraintLeft_toRightOf="@id/voal_solid_ver"
app:layout_constraintTop_toBottomOf="@id/voalType"
app:layout_constraintBottom_toTopOf="@id/ringType"
app:layout_constraintRight_toRightOf="parent"
/>
<TextView
android:id="@+id/ringType"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="环形"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@id/voalType"
android:layout_marginTop="100dp"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="@color/white"
android:background="@color/blue"/>
<View
android:id="@+id/ring"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/ringGradient"
android:background="@drawable/ring"
app:layout_constraintTop_toBottomOf="@id/ringType"
/>
<View
android:id="@+id/ringGradient"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
app:layout_constraintLeft_toRightOf="@id/ring"
app:layout_constraintRight_toRightOf="parent"
android:background="@drawable/ring_gradient"
app:layout_constraintTop_toBottomOf="@id/ringType"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
