Android xml绘制基本图形

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时,黑色到白色的渐变是从左到右的。旋转度数为 渐变色逆时针旋转的度数。

  1. layer-list使用

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>

再比如这样:
Android xml绘制基本图形_第1张图片

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左右两边的边框,漏出了上下边框

你可能感兴趣的:(学习记录)