Android UI美化之 shape的使用及其屬性總結

XiaoChen發表於2018-03-06
AndroidUI

近期在整理專案的過程中突然發現專案中有好多未曾使用過的圖片，經過對比UI設計圖片並檢查程式碼後發現在UI上的這些地方都是通過drawable 下面的資原始檔設定的背景，於是便想起來整理一下關於此類UI美化的東西，若存在寫的不好的地方還希望大家多多指導。

本系列預計共3部分，本文具體內容為 shape 的使用，由於另外兩篇文章暫時未整理，此處便先列出文章標題，後期會對此新增連結：

  • Android UI 美化之 shape 的使用
  • Android UI 美化之 selector 的使用
  • Android UI 美化之 layer-list 的使用

言歸正傳，相信大家在專案中都用過很多用 shape 定義的效果，大多是一些較為規則的圖形，如圓形、矩形、實線虛線以及漸變色等樣式，而這種地方如果要讓美工再去做張圖片的話未免有點小題大做的感覺，而且有時候還要考慮各種適配問題，所以這個時候使用我們的 shape 的話便再好不過了，下面便介紹一下關於 shape 的使用過程中出現的一些屬性。

android:shape 此屬性有以下4種型別可供選擇

  • rectangle：矩形( 預設)，可以畫出直角矩形、圓角矩形、弧形等
  • oval：橢圓形，用得比較多的是畫正圓
  • line：線形，可以畫實線或虛線
  • ring：環形，可以畫環形邊框或環形進度條

（注：只有當 android:shape 的值設定為 ring 時以下4種屬性才會生效）

android:innerRadius：內環半徑

android:innerRadiusRatio：內環半徑相對於環的寬度的比例，比如環的寬度為50,比例為2.5,那麼內環半徑為20

android:thickness：環的厚度

android:thicknessRatio：環的厚度相對於環的寬度的比例

android:useLevel 如果當做是LevelListDrawable使用時值為true，否則為false.

上面這些便是 shape 標籤的一些屬性了,接下來的話便是我們的重點部分了,那就是使用 shape 做一些形狀的繪製,下面便簡單介紹下使用shape 繪製形狀時的一些標籤及其屬性

corners 定義圓角,其屬性如下

  • android:radius：全部的圓角半徑
  • android:topLeftRadius：左上角的圓角半徑
  • android:topRightRadius：右上角的圓角半徑
  • android:bottomLeftRadius：左下角的圓角半徑
  • android:bottomRightRadius：右下角的圓角半徑

在定義圓角的時候大家應該可以看出可以通過兩種形式來進行設定,即:

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

    <corners android:radius="15dp"/>
    <solid android:color="#F00"/>

</shape>
複製程式碼

與

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

    <corners android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
    <solid android:color="#F00"/>

</shape>
複製程式碼

上面兩種的效果相同

gradient 定義漸變,其屬性如下

  • android:type：共有3中漸變型別，線性漸變(linear)（預設）/放射漸變(radial)/掃描式漸變(sweep)
  • android:angle：漸變角度，必須為45的倍數，0為從左到右，90為從上到下
  • android:centerX：漸變中心X的相當位置，範圍為0～1
  • android:centerY：漸變中心Y的相當位置，範圍為0～1
  • android:startColor：漸變開始點的顏色
  • android:centerColor：漸變中間點的顏色，在開始與結束點之間
  • android:endColor：漸變結束點的顏色
  • android:gradientRadius：漸變的半徑，只有當漸變型別為radial時才能使用
  • android:useLevel：使用LevelListDrawable時就要設定為true。設為false時才有漸變效果

程式碼如下

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

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

    <gradient
        android:type="sweep"
        android:angle="90"
        android:centerX="0.2"
        android:centerY="0.2"
        android:centerColor="@color/colorAccent"
        android:startColor="@color/colorPrimary"
        android:endColor="@color/colorPrimaryDark"/>

    <stroke android:width="1dp"
        android:color="@android:color/white"/>

</shape>
複製程式碼

solid 定義填充色

  • android:color：形狀內部的填充色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

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

</shape>
複製程式碼

stroke 定義描邊

  • android:width：描邊的寬度
  • android:color：描邊的顏色
  • android:dashWidth：虛線的寬度，值為0時是實線
  • android:dashGap：虛線的間隔
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--實線-->
    <stroke android:width="2dp"
        android:color="@android:color/holo_purple" />

</shape>
複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--虛線-->
    <stroke android:width="2dp"
        android:color="@android:color/holo_purple"
        android:dashWidth="10dp"
        android:dashGap="5dp" />

</shape>
複製程式碼

padding 定義形狀內邊距

  • android:left：左邊內邊距
  • android:top：上方內邊距
  • android:right：右方內邊距
  • android:bottom：下部內邊距
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

    <padding
        android:left="2dp"
        android:top="1dp"
        android:right="2dp"
        android:bottom="1dp" />

</shape>
複製程式碼

size 定義形狀的大小

  • android:width：寬度
  • android:height：高度
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false" >

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

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

</shape>
複製程式碼

最後附上本文程式碼,敬請大神指導Android 的UI 美化方式

更多內容請移駕我的部落格

相關文章