快捷導(dǎo)航

Android中Shape的用法詳解

更新時(shí)間：2017年07月09日 15:18:42 作者：Code_legend

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

ShapeDrawable是一種很常見的Drawable，可以理解為通過顏色來構(gòu)造的圖形，它既可以是純色的圖形，也可以是具有漸變效果的圖形，ShapeDrawabled語法稍顯復(fù)雜，如下所示：

<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個(gè)選項(xiàng)，rectangle（矩形）oval（橢圓）line（橫線）ring（圓環(huán)），默認(rèn)為rectangle，需要注意line和ring需要通過標(biāo)簽來指定線的寬度和顏色等信息，否則無法達(dá)到預(yù)期效果

•首先來說一下最常用的rectangle（矩形），一般都是在按鈕或者字體上面設(shè)置一個(gè)background的Drawable。一般設(shè)置效果為正方形或者兩邊有弧度的形狀。

◦第一種情況就是設(shè)置矩形背景

<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>

通過設(shè)置size設(shè)置矩形的寬度和高度，*這里需要說明一下，咱們?cè)谶@里設(shè)置size的寬高，在最終顯示尺寸是沒有用的，也就是說當(dāng)你在一個(gè)控件中設(shè)置background的時(shí)候，這個(gè)shape是會(huì)被拉伸或者縮小為view的大小。*solid屬性設(shè)置矩形里面的背景顏色。

這里寫圖片描述

將背景色設(shè)置為漸變

<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>

效果圖：

這里寫圖片描述

這里默認(rèn)的type就是linear，里面還有其他兩個(gè)屬性可以選擇分別是radial(徑向漸變)和sweep(掃描漸變)
一般最常用的也就是線性漸變還有其他幾個(gè)屬性沒有用但是很好理解

android:angle——漸變的角度，默認(rèn)為0，其值必須是45的倍數(shù)，0表示從左到右，90表示從下到上。

android:centerX——漸變的中心點(diǎn)橫坐標(biāo)

android:centerY——漸變的中心點(diǎn)縱坐標(biāo)

android:gradientRadiu——漸變半徑，僅當(dāng)android:type=”radial”時(shí)有效

•接下來說一下畫圓角的矩形背景

◦其實(shí)只用設(shè)置一下corners的屬性就是了。

這里寫圖片描述

◦具體詳細(xì)的說明

◦android:radius—— 給四個(gè)角設(shè)置相同的角度，優(yōu)先級(jí)較低，會(huì)被其他四個(gè)屬性覆蓋

android:bottomLeftRadius——設(shè)定左下角的角度

android:bottomRightRadius——設(shè)定右下角的角度

android:TopLeftRadius——設(shè)定左上角的角度

android:TopRightRadius——設(shè)定右上角的角度

接下來就是如何畫一個(gè)空心的背景

<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>

效果圖如下

這里寫圖片描述

當(dāng)然里面也可以自由發(fā)揮設(shè)置漸變色，但是一般里面都純色。

◦這里里面也可以設(shè)置為虛線

<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>

這里寫圖片描述