shape的幾種寫法

摘抄自以下博客

https://www.cnblogs.com/popfisher/p/6238119.html

shape標簽能定義多少種類型的Drawable?

shape 可以定義四種類型的幾何圖形,由 android:shape 屬性指定

line --> 線

rectangle --> 矩形(圓角矩形)

oval --> 橢圓,圓

ring --> 圓環

矩形(邊框+填充)

image.png

矩形實線邊框內部無填充:rect_solid_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 實線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:color="#ffff0000" />

</shape>

矩形虛線邊框內部無填充:rect_dashed_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:color="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />

</shape>

矩形實線邊框-內部填充:rect_solid_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 實線邊框+內部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:color="#ffff0000" />

    <solid android:color="#ff00ffff" />

</shape>

矩形虛線邊框-內部填充:rect_dashed_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框+內部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <stroke
        android:width="2dp"
        android:color="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />

    <solid android:color="#ff00ffff" />
</shape>

圓角矩形

image.png

圓角矩形-只有邊框:rect_rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size android:height="100dp"
        android:width="100dp"/>

    <stroke
        android:width="2dp"
        android:color="#ffff0000" />

    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />

</shape>

圓角矩形-只有內部填充:rect_rounded_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圓角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size android:height="100dp"
        android:width="100dp"/>

    <solid android:color="#8000ff00" />

    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />

</shape>

圓角矩形-有邊框有填充:rect_rounded_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框+填充 圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size android:height="100dp"
        android:width="100dp"/>

    <stroke
        android:width="2dp"
        android:color="#ffff0000" />

    <solid android:color="#8000ff00" />

    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />

</shape>

圓角矩形-左邊圓角為一個半圓弧:rect_rounded_left_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個圓弧了 -->
    <corners
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp" />

</shape>

圓角矩形-左右兩邊都是半圓弧:rect_rounded_left_right_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個圓弧了 -->
    <corners android:radius="20dp" />

</shape>

圓角矩形-左右兩邊都是半圓弧-帶邊框:rect_rounded_left_right_arc_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="50dp"
        android:height="10dp" />

    <stroke android:color="#ffff0000"
        android:width="2dp"/>

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個圓弧了 -->
    <corners android:radius="20dp" />

</shape>

圓角矩形-圓:rect_rounded_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+圓出一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size android:height="10dp"
        android:width="10dp"/>

    <solid android:color="#8000ff00" />

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

</shape>

圓角矩形-上下兩邊半圓弧:rect_rounded_top_bottom_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

    <size
        android:width="10dp"
        android:height="60dp" />

    <solid android:color="#8000ff00" />

    <!-- 圓角半徑是高度的一般就是一個圓弧了 -->
    <corners android:radius="10dp" />

</shape>

漸變效果(以矩形為例)

image.png

垂直線性漸變:rect_gradient_linear_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性垂直漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調整angle實現水平漸變,垂直漸變或者對角漸變 -->
    <gradient
        android:angle="-45"
        android:centerX="0.5"
        android:centerY="0.4"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

水平線性漸變:rect_gradient_linear_horizon.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性水平漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調整angle實現水平漸變,垂直漸變或者對角漸變 -->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#ff00ff00"
        android:startColor="#1000ff00"
        android:type="linear" />
</shape>

對角線線性漸變:rect_gradient_linear_diagonal.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-線性對角線漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 調整angle實現水平漸變,垂直漸變或者對角漸變 -->
    <gradient
        android:angle="45"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

徑向漸變:rect_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-徑向漸變,一般不用在rect上,用到圓或者橢圓上 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">

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

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!-- 徑向漸變angle無效 -->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#0000ff00"
        android:endColor="#ff00ff00"
        android:gradientRadius="40dp"
        android:type="radial" />
</shape>

掃描漸變:rect_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <!--如果布局中沒有設置View的大小,會size設置的大小為默認值-->
    <size
        android:width="20dp"
        android:height="20dp" />

    <stroke
        android:width="1px"
        android:color="#ffff00ff" />

    <!--調整angle不能實現角度變化
        centerX,centerY是中心點的位置,這里用的是百分比值(0-1)
        在rect中gradientRadius無效-->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ff00ff00"
        android:gradientRadius="20dp"
        android:type="sweep" />
</shape>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,084評論 25 708
  • 一 Activity 1 Activity 生命周期 1.1 Activity 的四種狀態 running 當前...
    _執_念__閱讀 10,496評論 0 91
  • 蟬鳴喚醒驕陽 蛙聲繁華月光 你我走在路上不知何時相逢 相思仍舊難擋 夏天午后的太陽曬掉所有陰暗黏濕 綴一點慵懶 帶...
    還好_0ab3閱讀 114評論 0 0
  • 看過《遺愿清單》的朋友都知道,由杰克·尼克爾森飾演的愛德華,特別愛喝一種咖啡,叫魯哇克。當他因為癌癥住進醫院的時...
    王子月閱讀 955評論 0 0
  • 大年初一頭一天,抬頭見貓…
    ada_zx閱讀 378評論 0 0