Android樣式開發(fā)之shape總結(jié)

android的樣式主要則是通過shape、selector、layer-list、level-list、style、theme等組合實(shí)現(xiàn)。


Shape篇

1.shape:基礎(chǔ)形狀定義工具。一般用shape定義的xml文件存放在drawable目錄下

2.使用shape可以自定義形狀,可以定義下面四種類型的形狀,通過android:shape屬性指定:

  • rectangle: 矩形,默認(rèn)的形狀,可以畫出直角矩形、圓角矩形、弧形等
  • oval: 橢圓形,用得比較多的是畫正圓
  • line: 線形,可以畫實(shí)線和虛線
  • ring: 環(huán)形,可以畫環(huán)形進(jìn)度條

3.具體使用:

【1】新建xml文件命名為bg_shape.xml,放在drawable目錄下:

【2】通過android:shape屬性指定形狀

【3】最重要的是根據(jù)自己指定形狀需要的樣式指定特性:

公有的特性:
  • solid: 設(shè)置形狀填充的顏色,只有android:color一個(gè)屬性
    • android:color 填充的顏色
  • size: 設(shè)置形狀默認(rèn)的大小
    • android:width 寬度
    • android:height 高度
  • padding: 設(shè)置內(nèi)容與形狀邊界的內(nèi)間距,可分別設(shè)置左右上下的距離
    • android:left 左內(nèi)間距
    • android:right 右內(nèi)間距
    • android:top 上內(nèi)間距
    • android:bottom 下內(nèi)間距
  • gradient: 設(shè)置形狀的漸變顏色,可以是線性漸變、輻射漸變、掃描性漸變
    • android:type 漸變的類型
      • linear 線性漸變,默認(rèn)的漸變類型
      • radial 放射漸變,設(shè)置該項(xiàng)時(shí),android:gradientRadius也必須設(shè)置
      • sweep 掃描性漸變
    • android:startColor 漸變開始的顏色
    • android:endColor 漸變結(jié)束的顏色
    • android:centerColor 漸變中間的顏色
    • android:angle 漸變的角度,線性漸變時(shí)才有效,必須是45的倍數(shù),0表示從左到右,90表示從下到上
    • android:centerX 漸變中心的相對X坐標(biāo),放射漸變時(shí)才有效,在0.0到1.0之間,默認(rèn)為0.5,表示在正中間
    • android:centerY 漸變中心的相對X坐標(biāo),放射漸變時(shí)才有效,在0.0到1.0之間,默認(rèn)為0.5,表示在正中間
    • android:gradientRadius 漸變的半徑,只有漸變類型為radial時(shí)才使用
    • android:useLevel 如果為true,則可在LevelListDrawable中使用
  • stroke: 設(shè)置描邊,可描成實(shí)線或虛線。
    • android:color 描邊的顏色
    • android:width 描邊的寬度
    • android:dashWidth 設(shè)置虛線時(shí)的橫線長度
    • android:dashGap 設(shè)置虛線時(shí)的橫線之間的距離
rectangle特性:
  • corners: 設(shè)置圓角,只適用于rectangle類型,可分別設(shè)置四個(gè)角不同半徑的圓角,當(dāng)設(shè)置的圓角半徑很大時(shí),比如200dp,就可變成弧形邊了
    • android:radius 圓角半徑,會被下面每個(gè)特定的圓角屬性重寫
    • android:topLeftRadius 左上角的半徑
    • android:topRightRadius 右上角的半徑
    • android:bottomLeftRadius 左下角的半徑
    • android:bottomRightRadius 右下角的半徑
ring特性:
  • 【shape根元素】有些屬性只適用于ring類型,先過目下這些屬性吧:
  • android:innerRadius 內(nèi)環(huán)的半徑
  • android:innerRadiusRatio 浮點(diǎn)型,以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑,默認(rèn)為3,表示內(nèi)環(huán)半徑為環(huán)的寬度除以3,該值會被android:innerRadius覆蓋
  • android:thickness 環(huán)的厚度
  • android:thicknessRatio 浮點(diǎn)型,以環(huán)的寬度比率來表示環(huán)的厚度,默認(rèn)為9,表示環(huán)的厚度為環(huán)的寬度除以9,該值會被android:thickness覆蓋
  • android:useLevel 一般為false,否則可能環(huán)形無法顯示,只有作為LevelListDrawable使用時(shí)才設(shè)為true

【4】在哪里使用就可以直接引用xml文件就好了

4.shape實(shí)例弧形矩陣


<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形狀類型,默認(rèn)為rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- solid指定形狀的填充色,只有android:color一個(gè)屬性 -->
    <solid android:color="#2F90BD" />
    <!-- padding設(shè)置內(nèi)容區(qū)域離邊界的間距 -->
    <padding
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp" />
    <!-- corners設(shè)置圓角,只適用于rectangle  200就會變成弧形 小一點(diǎn)就是我們常見的圓形矩陣-->
    <corners android:radius="200dp" />
</shape>
引用:
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:text="弧形邊的矩形"
    android:textSize="16sp"
    android:textColor="@android:color/white"
    android:background="@drawable/bg_rectangle" />

5.shape實(shí)例之畫圓--漸變圓

<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形狀類型,默認(rèn)為rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- padding設(shè)置內(nèi)間距 -->
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    <!-- size設(shè)置形狀的大小  寬度高度不一致就是橢圓,一致就是正圓)-->
    <size
        android:width="40dp"
        android:height="40dp" />
    <!-- gradient設(shè)置漸變.值得注意的是:使用radial漸變時(shí),必須指定漸變的半徑,即android:gradientRadius屬性。 -->
    <gradient
        android:endColor="#000000"
        android:gradientRadius="40dp"
        android:startColor="#FFFFFF"
        android:type="radial" />
</shape>
引用:
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_margin="8dp"
    android:text="6"
    android:textSize="20sp"
    android:textColor="@android:color/black"
    android:background="@drawable/bg_oval" />

6.shape實(shí)例之畫線

line主要用于畫分割線,是通過stroke和size特性組合來實(shí)現(xiàn)
畫線時(shí),有幾點(diǎn)特性必須要知道的:
1.只能畫水平線,畫不了豎線;
2.線的高度是通過stroke的android:width屬性設(shè)置的;
3.size的android:height屬性定義的是整個(gè)形狀區(qū)域的高度;
4.size的height必須大于stroke的width,否則,線無法顯示;
5.線在整個(gè)形狀區(qū)域中是居中顯示的;
6.線左右兩邊會留有空白間距,線越粗,空白越大;
7.引用虛線的view需要添加屬性android:layerType,值設(shè)為"software",否則顯示不了虛線;

//畫虛線
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- 實(shí)際顯示的線 -->
    <stroke
        android:width="1dp"
        android:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" />
    <!-- 形狀的高度 -->
    <size android:height="4dp" />
</shape>

7.shape實(shí)例之畫環(huán)--漸變描邊的環(huán)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

8. shape實(shí)例之旋轉(zhuǎn)的環(huán)形進(jìn)度條

其他就是在上面shape外層包多一個(gè)rotate元素就可以了

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">
        <gradient
            android:endColor="#2F90BD"
            android:startColor="#FFFFFF"
            android:type="sweep" />
    </shape>
</rotate>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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