android:shape標籤代碼

前言：就好比咱們想給界面跳轉的button在界面的邊角處用個箭頭來代替按鈕，使得界面簡潔；或者是給TextView加個邊框時；

　　咱們能夠經過在drawable文件夾下建立自定義的xml文件，經過shape標籤來繪製須要的圖案，而後做爲組件的背景呈現。

一、在介紹shape以前，先來對drawable粗糙瞭解一下。

　　以下所示，drawable文件夾主要是一系列用來顯示的視覺元素，包括位圖、背景漸變等；經常使用來做爲組件的背景使用。

　　drawable文件夾下能夠存放圖片，而後直接做爲背景調用；但更多的是在該文件夾下建立xml文件，而後做爲背景調用；

　　

　　1.一、而drawable夾下的xml文件的類型也有許多種，

　　　　好比selector標籤，layer-list標籤，shape標籤、bitmap標籤等；而且還能夠在一種標籤裏嵌套另外一種標籤使用。

　　　　本文主要是對其中的shape標籤進行總結。可是shape標籤用着用着就搭配上其餘標籤了，可是本文仍是隻介紹shape標籤。

二、以下所示是關於shape標籤的知識導圖。

三、結合以上思惟導圖的知識點，附上使用代碼。

　　四個<shape屬性/>分別建立了一個xml文件。

　　其中<shape子標籤corners、solid、stroke/>主要在rectangle.xml進行舉例，<shape子標籤gradient、size、padding/>主要在shape_gradient_linear.xml中進行舉例。

　　而後<子標籤gradient/>由於有三種經常使用漸變方式，因此又單獨加了xml舉例。

　　順帶着在oval.xml中使用到了layerlist和bitmap製做背景。

　　3.一、rectangle.xml：包含子標籤corners、solid、stroke。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <gradient
                android:type="sweep"
                android:centerX="1"
                android:centerY="0.5"
                android:startColor="@color/colorMediumPurple"
                android:endColor="@color/colorKhaki1"/>
            <stroke
                android:width="2dp"
                android:color="@color/colorMediumPurple"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="@color/colorThistle" />
            <stroke
            android:width="5dp"
            android:dashWidth="10dp"
            android:dashGap="10dp"
            android:color="@color/colorMediumPurple"/>
        </shape>
    </item>
</selector>
<!--使用selector狀態選擇器，能夠設置button點擊先後的不一樣shape-->

　　　　3.二、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="8dp"
        android:color="@color/colorTomato2"/>
    <size
        android:height="10dp"
        android:width="300dp"/>
</shape>
<!-- stroke的width描述stroke的寬度，size的height描述shape的寬度；
     由於stroke屬於shape內的標籤，因此stroke的寬度要小於shape的高度 -->
<!--size和組件長寬不一樣時，顯示數值大的-->

　　3.三、ring.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false">

    <gradient
        android:type="sweep"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorWhite" />
</shape>
<!--shape是環形的，因此子標籤的屬性描述的是環形，而不是環心的空心部分-->
<!--須要定義內環半徑innerRadius和內環厚度thickness-->
<!--至於屬性innerRadiusRatio和thicknessRatio的比例不知道怎麼計算-->
<!--useLevel屬性是必要屬性，否則不顯示，不知道爲何-->

　　3.四、oval.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorgreen"/>
        </shape>
    </item>
    <item>
        <bitmap
            android:src="@drawable/pic"/>
    </item>
</layer-list>

<!--layer-list是經過層疊來自定義按鈕，最早寫的是最底層。-->

四、主要是演示子標籤gradient的三種漸變方式。

　　4.一、shape_gradient_linear.xml 。包含子標籤gradient、size、padding。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:type="linear"
                android:angle="270"
                android:startColor="@color/darkGrey"
                android:endColor="@color/colorRosyBrown1" />
            <size
                android:width="50dp"
                android:height="50dp"/>
            <padding
                android:top="15dp"/>
        </shape>
    </item>
    <!--線性gradient，angle屬性只有線性漸變能用-->
</selector>
    <!--總結：gradient標籤使用的三步驟能夠歸納爲先肯定type，而後肯定位置，最後肯定顏色-->
    <!--總結：angle是linear的特有屬性，gradientRadius是radial的必要屬性-->

　　4.二、shape_gradient_raidial.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="50dp"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="@color/colorRosyBrown1"
        android:endColor="@color/colorgreen" />
    <size
        android:width="50dp"
        android:height="50dp"/>
    <!--gradientRadius屬性是反射性漸變的半徑，是必要屬性-->
</shape>

　　4.三、shape_gradient_sweep.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:type="sweep"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="@color/colorLightBlue"
        android:endColor="@color/colorRosyBrown1" />
    <size android:width="50dp"
        android:height="50dp"/>
    <!--掃描gradient，先肯定類型，而後肯定掃描中心點，而後肯定顏色-->
</shape>

　　4.四、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/line_name"
        android:text="line"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>
    <LinearLayout
        android:id="@+id/line_view"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="vertical"
        android:layout_below="@id/line_name"
        android:background="@drawable/line">
    </LinearLayout>

    <TextView
        android:id="@+id/btns_name"
        android:text="ring、oval、rectangle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/line_view"
        android:gravity="center"/>
    <LinearLayout
        android:id="@+id/btns_shape"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btns_name"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:id="@+id/btn_ring"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/ring" />
        <Button
            android:id="@+id/btn_oval"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/oval" />
        <Button
            android:id="@+id/btn_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/rectangle"/>
    </LinearLayout>

    <TextView
        android:id="@+id/gradient_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btns_shape"
        android:layout_marginTop="80dp"
        android:text="gradient"
        android:gravity="center"/>
    <TextView
        android:id="@+id/gradients_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/gradient_name"
        android:text="linear、radial、sweep"
        android:gravity="center"/>
    <LinearLayout
        android:id="@+id/gradient_btns"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_below="@id/gradients_name"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="padding"
            android:textColor="@color/colorWhite"
            android:background="@drawable/shape_gradient_linear"/>
        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/shape_gradient_radial"/>
        <Button
            android:id="@+id/btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/shape_gradient_sweep"/>
    </LinearLayout>

</RelativeLayout>

 

五、最後，附上效果圖，源碼地址https://github.com/caesura-k/button_activity