漸變和圓角風格

圓角

 

下面的佈局文件實現了有顏色填充的圓角矩形

<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”>
<solid
android:color=”#f0600000”/>
<stroke
android:width=”10dp”
android:color=”#00FF00”/>
<corners
android:radius=”15dp” />
<padding
android:left=”10dp”
android:top=”10dp”
android:right=”10dp”
android:bottom=”10dp”
/>
</shape>


 

下面是效果:

詳細解釋:

<shape>標籤支持的屬性:

Line——直線

Oval——橢圓

Rectangle——矩形

Ring——圓環

 

<solid>標籤:顏色填充

<corners>標籤:實現圓角。Radius屬性定義了圓角的弧度。

 

 

 

 

 

漸變

 

GradientDrawables提供三種漸變類型linear,radial,sweep

Linear——線性漸變,默認的漸變類型,從startColor開始漸變到endColor結束,angle定義了漸變的角度

Radial——從startColor開始到endColor,對應由圖形邊緣到中心的圓形漸變

Sweep——沿着圖形的外邊緣從startColorendColor的漸變

 

下面的佈局片段對上述三種風格進行了實現,效果如下:

<!-- Rectangle with linear gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”
android:useLevel=”false”>
<gradient
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:type=”linear”
android:angle=”45”
/>
</shape>
<!-- Oval with radial gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”oval”
android:useLevel=”false”>
<gradient
android:type=”radial”
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:gradientRadius=”300”
/>
</shape>
<!-- Ring with sweep gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”ring”
android:useLevel=”false”
android:innerRadiusRatio=”3”
android:thicknessRatio=”8”>
<gradient
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:type=”sweep”
/>
</shape>


 

詳細解釋:

startColor——起始顏色

endColor——結束顏色

centerColor——過度顏色

angle——漸變角度,逆時針旋轉。0度表示從左到右,90度表示從下到上,180表示從右到左,270表示從上到下

gradientRadius——漸變半徑

corner——圓角半徑

 

發佈了44 篇原創文章 · 獲贊 115 · 訪問量 34萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章