1. 程式人生 > >詳解Android中Shape的用法

詳解Android中Shape的用法

工作中總是會用到shape去畫一些背景,每次都要去百度,但是很多都寫的很模糊或者屬性不是很全,所以今天自己總結了一下,給大家分享一下,自己以後也可以看。

ShapeDrawable是一種很常見的Drawable,可以理解為通過顏色來構造的圖形,它既可以是純色的圖形,也可以是具有漸變效果的圖形,ShapeDrawabled語法稍顯複雜,如下所示:

<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>
  • Android: shape
  • 有4個選項,rectangle(矩形)oval(橢圓)line(橫線)ring(圓環),預設為rectangle,需要注意line和ring需要通過標籤來指定線的寬度和顏色等資訊,否則無法達到預期效果
  • 首先來說一下最常用的rectangle(矩形),一般都是在按鈕或者字型上面設定一個background的Drawable。一般設定效果為正方形或者兩邊有弧度的形狀。
    • 第一種情況就是設定矩形背景
    • <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle"
      >
      <size
      android:width="200dp"
      android:height="20dp"
      />
      <solid android:color="#d22121"/>
      </shape>

      通過設定size設定矩形的寬度和高度,*這裡需要說明一下,咱們在這裡設定size的寬高,在最終顯示尺寸是沒有用的,也就是說當你在一個控制元件中設定background的時候,這個shape是會被拉伸或者縮小為view的大小。*solid屬性設定矩形裡面的背景顏色。
      這裡寫圖片描述
    • 將背景色設定為漸變<shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle"
      >
      <size
      android:width="200dp"
      android:height="20dp"
      />
      <gradient
      android:startColor="#fff"
      android:centerColor="#f1a9a9"
      android:endColor="#ec5b5b"
      android:type="linear"
      />
      </shape>
    • 效果圖這裡寫圖片描述
    • 這裡預設的type就是linear,裡面還有其他兩個屬性可以選擇分別是radial(徑向漸變)和sweep(掃描漸變)
      一般最常用的也就是線性漸變還有其他幾個屬性沒有用但是很好理解
      android:angle——漸變的角度,預設為0,其值必須是45的倍數,0表示從左到右,90表示從下到上。
      android:centerX——漸變的中心點橫座標
      android:centerY——漸變的中心點縱座標
      android:gradientRadiu——漸變半徑,僅當android:type=”radial”時有效
  • 接下來說一下畫圓角的矩形背景
    • 其實只用設定一下corners的屬性就是了。
    • 這裡寫圖片描述
    • 具體詳細的說明
    • android:radius—— 給四個角設定相同的角度,優先順序較低,會被其他四個屬性覆蓋
      android:bottomLeftRadius——設定左下角的角度
      android:bottomRightRadius——設定右下角的角度
      android:TopLeftRadius——設定左上角的角度
      android:TopRightRadius——設定右上角的角度
  • 接下來就是如何畫一個空心的背景
    • <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle"
      >
      <size
      android:width="200dp"
      android:height="20dp"
      />
      <stroke
      android:width="1px"
      android:color="#ffff1c77"
      />
      <corners android:radius="50dp"/>
      </shape>

      效果圖如下這裡寫圖片描述
      當然裡面也可以自由發揮設定漸變色,但是一般裡面都純色。
    • 這裡裡面也可以設定為虛線<shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle"
      >
      <size
      android:width="200dp"
      android:height="20dp"
      />
      <stroke
      android:dashWidth="4dp"
      android:dashGap="2dp"
      android:width="1px"
      android:color="#ffff1c77"
      />
      <corners android:radius="50dp"/>
      </shape>
    • 效果圖這裡寫圖片描述

好了,其實裡面的東西很簡單,總結一下就好了。希望大家用的開心。