android 背景样式shape -- rectangle矩形

时间:2023-02-09 23:55:18

一、写在前面的:

TextView、Button、EditText、ProgressBar、Toast、Checkbox等控件的样式背景,都可以用shape来实现,可以优化资源的使用,在一个项目中,个人觉得各种资源统一管理起来最好,公用一套,方便后期管理,不管以后是你自己管理,还是有后来者接手,都能大大提高工作效率,相信你也不想接手一个写的很乱的项目,都说“见字如见人”,作为一个程序员来说,咱们的代码就是咱们的字,最起码得让人觉得“嗯!这人还不错”。

闲话不多说了,下面记载一下个人总结的shape用法

二、shape属性:

先来了解一下shape的各个属性

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- rectangle:矩形、圆角矩形、弧形等
oval:圆、椭圆
line:线、实线、虚线
ring:环形 -->

<corners <!-- 圆角 只适用于rectangle类型-->
android:radius="integer" <!-- 圆角半径 -->
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer" />

<gradient <!-- 渐变色 -->
<!-- 渐变的角度,线性渐变时才有效,必须是45的倍数 -->
android:angle="integer"
<!-- 渐变中心的相对X、Y坐标,放射渐变时才有效 -->
android:centerX="integer"
android:centerY="integer"
<!-- 渐变的半径,放射渐变(radial)时才有效-->
android:gradientRadius="integer"
<!-- 渐变开始、中心、结束的颜色 -->
android:startColor="color"
android:centerColor="integer"
android:endColor="color"
<!-- 渐变的类型 linear线性、radial放射、sweep扫描-->
android:type=["linear" | "radial" | "sweep"]
<!-- 是否可在LevelListDrawable中使用 -->
android:useLevel=["true" | "false"] />

<padding <!-- 设置内容与形状边界的内间距 -->
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />

<size <!-- 大小 -->
android:width="integer"
android:height="integer" />

<solid <!-- 填充的颜色 -->
android:color="color" />

<stroke <!-- 刻画边线 -->
android:width="integer"
android:color="color"
android:dashWidth="integer" <!-- 虚线长度 -->
android:dashGap="integer" /> <!-- 虚线间隔 -->
</shape>

注:shape的属性基本上就那么多了,个别生疏的属性都有相应的注释,这里不做过多介绍,还有些特定场景下用的属性,下面还会有介绍

三、shape -- rectangle矩形:

来吧,先看一下效果图,先心里有个底,小学上课的时候,老师总说要带着疑问看课文,说实话,那个时候还不知道“疑问”这个词是什么呢!!

android 背景样式shape -- rectangle矩形


四、代码实现:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="加了内间距的矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="圆角矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape1"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="弧形边矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape5"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="颜色渐变的矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape2"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="实线描边的矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape3"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="虚线描边的矩形"
android:textSize="20sp"
android:textColor="#ff0000"
android:background="@drawable/text_shape4"/>
</LinearLayout>


五、shape背景代码

text_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#990000ff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
</shape>


text_shape1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#990000ff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
<corners
android:radius="15dp"/>
</shape>

text_shape2

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#990000ff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
<gradient
android:startColor="#ff0000"
android:centerColor="#00ff00"
android:endColor="#0000ff"/>
</shape>

text_shape3

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ffffff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
<stroke
android:width="2dp"
android:color="#00ff00"/>
</shape>

text_shape4

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ffffff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
<stroke
android:width="2dp"
android:color="#00ff00"
android:dashWidth="4dp"
android:dashGap="4dp"/>
</shape>

text_shape5

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#990000ff"/>
<padding
android:bottom="15dp"
android:left="30dp"
android:right="30dp"
android:top="15dp" />
<corners
android:radius="30dp"/>
</shape>

六、总结:

01、rectangle是默认的形状,也是用得最多的形状,一些文字背景、按钮背景、控件或布局背景等

02、根据不同的需求,可以绘制出相应的背景,省的都用背景图片了。


七、写在后面的:

后面还会总结一下shape的其他形式的用法。有什么不足之处,欢迎提出,有分享才有进步。