形狀圖形(shape)

shape 常用屬性

android:shape="rectangle" 矩形,默認(rèn)值
android:shape="oval" 橢圓,此時(shí)corners (圓角節(jié)點(diǎn))失效
android:shape="line" 直線,必須設(shè)置stroke(描邊)節(jié)點(diǎn)
android:shape="ring" 圓環(huán)

下面定義了6種圖形

  • corners (圓角)

    android:radius="20dp" 直接定義4個(gè)圓角
    android:bottomLeftRadius="20dp" 左下角
    android:bottomRightRadius="20dp" 右下角
    android:topLeftRadius="20dp" 左上角
    android:topRightRadius="20dp" 右上角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--圓角 弧度為 20-->
    <corners android:radius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
  <!--填充顏色-->
    <solid android:color="@color/white_alpha_32" />

</shape>
image.png
  • gradien(漸變)

android:angle ( 起始角度 0 -9點(diǎn)方向 90- 6點(diǎn)方向 180 -3點(diǎn)方向 270 12點(diǎn)方向)
android:type (linear 線性漸變 默認(rèn)值 , radial 放射漸變 起始顏色是圓心, sweep 滾動(dòng)漸變)
android:centerY="0.4" 圓心y坐標(biāo)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:centerY="0.4"
        android:startColor="@color/black_alpha_224"
        android:centerColor="@color/black_alpha_80"
        android:endColor="@color/trans"
        />

</shape>

image.png
  • padding (定義內(nèi)容離邊界的距離)

  • solid(填充顏色,背景色)

 <solid android:color="@color/white_alpha_32" />
  • size(尺寸)

無節(jié)點(diǎn)表示寬高自適應(yīng)

<size android:height="@dimen/len_4"
        android:width="@dimen/len_4"/>

  • stroke(描邊)

android:dashGap="@dimen/len_4" 每段虛線之間的間隔
android:dashWidth="@dimen/len_4" 每段虛線之間的寬度
上面2個(gè)同時(shí)存在才為虛線
android:width="@dimen/len_4" 描邊厚度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="@color/black"
        android:width="@dimen/len_2"
        />

    <corners android:radius="20dp"/>

    <size android:width="400dp"
        android:height="400dp"/>
</shape>

image.png
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--圓角 弧度為 20-->
    <corners android:radius="20dp" />
    <solid android:color="@color/white_alpha_32" />
</shape>

v21 漣漪效果

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/white_alpha_48">

    <!--漣漪  效果 api 21-->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
</ripple>
v21 以上 
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/black_alpha_32"/>

v21 以下
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/black_alpha_16" />
        </shape>
    </item>
</selector>

進(jìn)階

點(diǎn)擊背景 實(shí)現(xiàn)變色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">

        <shape android:shape="rectangle">
            <corners android:radius="22dp" />
            <solid android:color="@color/trans" />
        </shape>
    </item>

   <!--點(diǎn)擊時(shí)的效果 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="22dp" />
            <solid android:color="@color/black_alpha_112" />
        </shape>
    </item>
</selector>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ANDROID樣式的開發(fā):SHAPE篇 轉(zhuǎn)載自Keegan小鋼并標(biāo)明原文鏈接:http://keeganlee.m...
    一點(diǎn)墨汁閱讀 938評論 0 1
  • 原創(chuàng)文章,轉(zhuǎn)載請注明:轉(zhuǎn)載自Keegan小鋼 并標(biāo)明原文鏈接:http://keeganlee.me/post/a...
    于加澤閱讀 1,719評論 0 5
  • 概述 今天我們來探究一下android的樣式。其實(shí),幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 5,118評論 1 19
  • 記得剛開始學(xué)Android時(shí),看著自己完全用系統(tǒng)控件寫出的不忍直視的界面,對于如何做出不一樣的按鈕,讓它們在不同狀...
    biloba閱讀 1,835評論 1 11
  • 關(guān)于Shape的使用,簡單來說說吧,shape作為Android程序員你也是一定會(huì)用到的一個(gè)工具。用官方的話來說,...
    碼碼Master閱讀 13,630評論 0 6

友情鏈接更多精彩內(nèi)容