shape使用:
在drawable文件夹下创建xml文件
内容如下:
①绘制类型
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
shape>
设置图形为 oval (椭圆形) 还可以设置为 line(线) 、rectangle(矩形)、ring(环形)
通过椭圆来学习用法
②椭圆
设置为oval时,可以设置大小
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
>
<solid android:color="#00FFFF" />
<size
android:height="20dp"
android:width="20dp"
/>
shape>
当设置高度和宽度相同的时候则会显示为圆形。特别要注意的是,当组件调用该drawable作为背景时,组件的长和宽要保持一致背景才会显示为圆形。
③设置填充色
在上面的椭圆绘制中的solid标签即为填充色的配置。
接下来设置边框填充
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#00FFFF" />
<size
android:height="20dp"
android:width="20dp"
/>
<stroke
android:width="2dp"
android:color="#FFFFFF"
/>
shape>
stroke标签用来设置边框。
④当设置为矩形时,可以设置矩形的圆角:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="#00FFFF" />
<corners android:radius="100dp" />
<size
android:height="20dp"
android:width="20dp"
/>
<stroke
android:width="2dp"
android:color="#000000"
/>
shape>
corners标签设置矩形的圆角。
⑤设置颜色渐变
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="#00FFFF" />
<corners android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp" />
<size
android:height="20dp"
android:width="20dp"
/>
<gradient
android:startColor="#000000" android:endColor="#FFFFFFFF" android:angle="270"
/>
<stroke
android:width="2dp"
android:color="#000000"
/>
shape>
设置了颜色从黑色到白色的渐变,android:angle=”270”设置了旋转角度为270度。
android:angle=”270”设置了旋转角度为270度。 的理解:
当angle设置为0时,黑色到白色的渐变是从左到右的。旋转度数为 渐变色逆时针旋转的度数。
layer-list可以将上述绘制的图形整合到一起,拼接各个item
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="26dp" />
<solid android:color="@color/white" />
<size android:width="52dp"
android:height="52dp"/>
<stroke android:width="1dp" android:color="@color/bg_grey"/>
shape>
item>
<item android:top="8dp">
<shape>
<solid android:color="@color/white" />
<size android:width="52dp" android:height="26dp"/>
shape>
item>
layer-list>
第一个shape是一个圆,第二个是一个长方形。两个图形重叠在一起。形成长方形上边拱形。
变换图形使用
比如矩形我们希望他根据中心点旋转一下,比如这样
xml代码如下:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:width="12dp"
android:height="12dp"
android:left="12dp"
android:right="20dp"
android:gravity="bottom|center"
>
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="@color/g_white" />
<size
android:width="24dp"
android:height="24dp" />
shape>
rotate>
item>
layer-list>
xml代码:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:bottom="6dp"
android:width="12dp"
android:height="12dp"
android:gravity="bottom|center"
>
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="@color/g_white" />
<size
android:width="24dp"
android:height="24dp" />
shape>
rotate>
item>
<item android:bottom="12dp">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="@color/g_white" />
<size
android:width="40dp"
android:height="40dp" />
shape>
item>
layer-list>
一些UI的背景图,可以用这种方式实现。
不要说什么照UI要个.9图就好了,记住能自己解决的事情,别去麻烦别人。
关于边框只显示特定的边问题
有时候我们需要只有上边和下边有边框的效果,但是发现stroke不能设置位置,即一旦设置就是四个边框都绘制了。
叠加的方式,将不需要显示的边框遮住
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
>
<solid
android:color="@color/g_white"
/>
<stroke
android:width="1dp"
android:color="@color/g_title_bg"
/>
shape>
item>
<item
android:top="1dp"
android:bottom="1dp"
>
<shape
android:shape="rectangle"
>
<solid
android:color="@color/g_white"
/>
shape>
item>
layer-list>
其中第二个item上下设置了距离,该距离与第一个item的stroke width一致。即挡住了第一个item左右两边的边框,漏出了上下边框