Android 項目中資源文件 -- shape篇

樣式篇：
Android 項目中資源文件 -- shape篇
Android 項目中資源文件 -- selector篇
Android 項目中資源文件 -- layer-list篇

其實，自己也不知道接下來寫什么，那就接著“Android 項目中資源文件 ”這個題目往繼續(xù)吧。這篇就來整理一下 Android shape 的使用，和一些常用屬性。

話不多說先上圖一張

色彩漸變

如果在開發(fā)中，我們要做一個上圖效果的色彩漸變的效果，最簡單的方法就是使用我們 Android 中的shape來完成。當然有人會說他可以使用一個圖片來實現(xiàn)同樣的效果，那就要告訴一下 使用 shape 可以減少資源的占用，減少 apk 的大小，同時他可以很好的適配各種不同尺寸的 Android 設(shè)備

**先給大家推薦一個工具 : ** Android shape 在線編輯 & 效果展示

shape

shape 文件語法簡例

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] > // 定義形狀
    <corners //圓角屬性
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient //漸變屬性
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding //邊距屬性
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size //大小屬性
        android:width="integer"
        android:height="integer" />
    <solid //填充屬性
        android:color="color" />
    <stroke //描邊屬性
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

從上面 shape 文件開始介紹它的屬性吧

1）特殊屬性

shape 使用的時候，提供了不同的形狀供我們選擇

形狀（shape） 屬性值
矩形 rectangle
橢圓 oval
線 line
圓環(huán) ring 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape=["rectangle" | "oval" | "line" | "ring"] //shape的形狀，默認為矩形，可以設(shè)置為矩形(rectangle)、橢圓形(oval)、線性形狀(line)、環(huán)形(ring)   
  //下面的屬性只有在android:shape="ring"時可用：   
  android:innerRadius="10dp" //  內(nèi)環(huán)的半徑； 
  android:innerRadiusRatio="2"  // 浮點型，以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑；   
  android:thickness="3dp"   // 環(huán)的厚度；   
  android:thicknessRatio="2" //  浮點型，以環(huán)的寬度比率來表示環(huán)的厚度；  
  android:useLevel="false"> //  boolean值，如果當做是LevelListDrawable使用時值為true，否則為false。
</shape>
  • rectangle（矩形）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorPrimary"/>
</shape>
  • oval（橢圓）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorPrimary"/>
    <size android:height="100dp"
        android:width="100dp"/>
</shape>
  • line（線）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="1dp"
         android:color="@color/colorAccent"
         android:dashGap="3dp"http://虛線間距
         android:dashWidth="4dp"/>//虛線寬度
    <size android:height="3dp"/>
</shape>
  • rectangle（矩形）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:innerRadius="20dp" // 內(nèi)環(huán)的半徑
    android:thickness="10dp"> // 圓環(huán)寬度
    <!--useLevel需要設(shè)置為false-->
    <solid android:color="@color/colorAccent"/>
</shape>

2）基本屬性

shape 使用時可以定義 view 的一些效果（圓角、漸變、顏色、邊框、大小等等）。這些往往都可以通過 shape 的子標簽來實現(xiàn)。 shape 的子標簽有：

shape的子標簽 效果樣式
<corners> 圓角
<solid> 填充色
<gradient> 漸變
<stroke> 描邊
<padding> 內(nèi)邊距
<size> 大小
  • <corners>（圓角）
<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <corners    //定義圓角   
    android:radius="10dp"  //全部的圓角半徑；   
    android:topLeftRadius="5dp"  //左上角的圓角半徑；   
    android:topRightRadius="5dp" //右上角的圓角半徑；   
    android:bottomLeftRadius="5dp"  //左下角的圓角半徑；   
    android:bottomRightRadius="5dp" /> //右下角的圓角半徑。
</shape>
  • <solid>（內(nèi)部填充色）
<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 
    <solid android:color="#ffff00"/> //內(nèi)部填充色
</shape>
  • <gradient>（漸變）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient  
    android:type=["linear" | "radial" | "sweep"]   //共有3中漸變類型，線性漸變（默認）/放射漸變/掃描式漸變；
    android:angle="90"  //漸變角度，必須為45的倍數(shù)，0為從左到右，90為從上到下；   
    android:centerX="0.5"  //漸變中心X的相當位置，范圍為0～1；
    android:centerY="0.5"  //漸變中心Y的相當位置，范圍為0～1；   
    android:startColor="#24e9f2"  //漸變開始點的顏色；   
    android:centerColor="#2564ef" //漸變中間點的顏色，在開始與結(jié)束點之間；   
    android:endColor="#25f1ef"  //漸變結(jié)束點的顏色；   
    android:gradientRadius="5dp"  //漸變的半徑，只有當漸變類型為radial時才能使用；   
    android:useLevel="false" /> //使用LevelListDrawable時就要設(shè)置為true。設(shè)為false時才有漸變效果。  
</shape>
漸變方式（type的值） 漸變方式
linear 線性漸變（默認）
radial 放射漸變
sweep 掃描式漸變
  • <stroke>（描邊）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke        
    android:width="1dp"   //描邊的寬度   
    android:color="#ff0000"   //描邊的顏色   
    // 以下兩個屬性設(shè)置虛線   
    android:dashWidth="1dp" //虛線的寬度，值為0時是實線   
    android:dashGap="1dp" />//虛線的間隔
</shape>
  • <padding>（內(nèi)邊距）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <padding    
    android:left="10dp"  //左內(nèi)邊距； 
    android:top="10dp"   //上內(nèi)邊距；
    android:right="10dp"   //右內(nèi)邊距；
    android:bottom="10dp" /> //下內(nèi)邊距。
</shape>
  • <size>（大?。?/h6> 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <size   
    android:width="50dp"  //寬度 
    android:height="50dp" />// 高度
</shape>

shape 使用

1）在 res/drawable 目錄下新建 shape_test.xml 文件；
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/color_FEDA4D"
        android:endColor="@color/color_FEC84D" />
    <corners android:topRightRadius="@dimen/qb_px_25"
        android:bottomRightRadius="@dimen/qb_px_25"/>

</shape>
2）在布局文件的 view 中引入 shape_test.xml 文件；
    <TextView
        android:id="@+id/tv_confirm"
        android:layout_width="0dp"
        android:layout_height="@dimen/qb_px_50"
        app:layout_constraintStart_toEndOf="@id/tv_reset"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_reset"
        android:layout_marginEnd="@dimen/qb_px_15"
        android:background="@drawable/bg_end_r25_change"
        android:textStyle="bold"
        android:text="確 定"
        android:textSize="@dimen/sp_16"
        android:textColor="@color/textColor_2f2f2f"
        android:gravity="center"/>

下圖中的 確認 按鈕的效果如下：

效果展示

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

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