天天看點

使用Android自帶屬性實作基本的控件展示效果

開發項目中,經常需要用到實線,虛線,漸變線條,方角按鈕,圓角按鈕,漸變按鈕,疊加圖檔等效果。最初的時候,我主要是通過普通圖檔和.9圖來實作不同的圖檔背景和線條效果的,實作出來的效果也是蠻不錯的。

但是後來發現這樣不太合适,一是不夠靈活;二是要在項目中存放大量的圖檔資源,極大的增加了App的大小;三是發現使用Androd自帶的屬性就可以實作大多數我們需要的效果,既然Android自帶的東西可以實作這樣效果,為什麼不用呢?

于是乎,抽時間整理了一下和Shape,gradient,Selector,layer_list相關的屬性,做了個小demo,寫篇技術短文,讓自己進一步鞏固這些基礎以及友善日後查閱。

首先展示一下整個demo的效果圖(具體實作代碼文章結尾給出)

使用Android自帶屬性實作基本的控件展示效果

一、shape簡介

我們使用shape可以很友善的在xml檔案中實作各種常用的幾何形狀

  • 效果圖:
使用Android自帶屬性實作基本的控件展示效果
  • shape的常見取值:
<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"] </shape>
*其中rectagle矩形,oval橢圓,line水準直線,ring環形*
           
  • 子節點的常用屬性:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圓角 整型-->
    <corners
        android:radius="9dp"  
        android:topLeftRadius="2dp"  
        android:topRightRadius="2dp" 
        android:bottomLeftRadius="2dp" 
        android:bottomRightRadius="2dp"  />

    <!-- 漸變   angle必須為的整數倍,且type類型必須是linear-->
    <gradient
        android:startColor="@android:color/white"   起始顔色
        android:centerColor="@android:color/black"  中間顔色
        android:endColor="@android:color/black"     結束顔色
        android:useLevel="false"  ["true" | "false"] 如果要使用LevelListDrawable對象,就要設定為true。設定為true無漸變,false有漸變色
        android:angle="45"  漸變角度,從左到右,表示從下到上,數值必須為的整數倍,預設為,此時type類型必須是linear
        android:type="radial" linear(線性變化,預設是這個),radial(輻射漸變)以及sweep(掃描漸變)
        android:centerX="0"  整型,漸變中心X點坐标的相對位置
        android:centerY="0"  整型,漸變中心Y點坐标的相對位置
        android:gradientRadius="90"  這個表示漸變的半徑,當type=radial類型的時候才需要使用
 />

    <!-- 各方向的間隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/>

    <!-- 寬高大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 寬度和高度 -->

    <!-- 填充的顔色 -->
    <solid
        android:color="@android:color/white"/>

    <!-- 描邊 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/black"
        android:dashWidth="1dp"  整型 表示'-'橫線的寬度, 值為時,表示為實線。值大于則為虛線。
        android:dashGap="2dp"    整型 表示'-'橫線之間的距離,虛線之間的間隔 即“ - - - - ”
     -->
/>
</shape>
           

二、selector簡介

在程式開發中我們使用selector來做元件的背景,這樣我們就可以不需要使用代碼來控制元件在不同狀态下不同背景和顔色的變化,可以簡化很多邏輯代碼,使用非常友善。

  • 效果圖:
使用Android自帶屬性實作基本的控件展示效果
  • Selector的分類:

    selector其實就是許多不同狀态的清單集合體(StateList), 它主要分為兩類:Color-Selector 和Drawable-Selector

  • Color-Selector:

    color-selector ,顧名思義就是顔色狀态清單,可以跟color一樣使用,顔色會随着元件的狀态而改變,color-selector資源檔案一般存儲于/res/color/filename_selector.xml裡面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="hex_color"   顔色值,#RGB,$ARGB,#RRGGBB,#AARRGGBB
        android:state_pressed=["true" | "false"]        是否觸摸
        android:state_focused=["true" | "false"]        是否獲得焦點
        android:state_selected=["true" | "false"]       是否被狀态
        android:state_checkable=["true" | "false"]      是否可選
        android:state_checked=["true" | "false"]        是否選中
        android:state_enabled=["true" | "false"]        是否可用
        android:state_window_focused=["true" | "false"] 是否視窗聚焦
    /> 
</selector>
           
  • Drawable-Selector:

drawable-selector 是背景圖狀态清單,可以跟圖檔一樣使用,背景會根據元件的狀态變化而變化。drawable-selector資源檔案一般存儲于/res/drawable/filename.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]      drawable的大小是否當中狀态變化,true表示是變化,false表示不變換,預設為false
    android:dither=["true" | "false"]            當位圖與螢幕的像素配置不一樣時(例如,一個ARGB為的位圖與RGB為的螢幕)會自行遞色(dither)。設定為false時不可遞色。預設true
    android:variablePadding=["true" | "false"]>  内邊距是否變化,預設false
    <item
        android:drawable="@[package:]drawable/drawable_resource"  圖檔資源
        android:state_pressed=["true" | "false"]     是否觸摸
        android:state_focused=["true" | "false"]     是否擷取到焦點
        android:state_hovered=["true" | "false"]     光标是否經過
        android:state_selected=["true" | "false"]    是否選中
        android:state_checkable=["true" | "false"]   是否可勾選
        android:state_checked=["true" | "false"]     是否勾選
        android:state_enabled=["true" | "false"]     是否可用
        android:state_activated=["true" | "false"]   是否激活
        android:state_window_focused=["true" | "false"] />  所在視窗是否擷取焦點
</selector>
           

三、layer-list簡介

Android自帶的layer-list可以實作多個圖層堆疊顯示的效果,借這個特性可以做一些特别的效果(比如:陰影、投影,旋轉疊加效果等)。

- 效果圖:

使用Android自帶屬性實作基本的控件展示效果
使用Android自帶屬性實作基本的控件展示效果
使用Android自帶屬性實作基本的控件展示效果
  • 簡單介紹一下效果1的實作,首先是布局檔案:
<ImageView
        android:layout_width="66dp"
        android:layout_height="72dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:scaleType="centerInside"
        android:src="@drawable/layer_list_photo_01" />
           
  • 其中用到了res/drawable/layer_list_photo_01.xml檔案:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 第一層的為QQ企鵝照片-->
    <item android:id="@+id/qq"
        android:drawable="@mipmap/photo_background" />

    <!-- 第二層的為相框照片圖案 ,下面的層次會依次覆寫上面的層次;
    left,top,right,bottom分别是距各個方向的距離,靈活使用他們可以實作各種豐富多彩的效果-->
    <item android:id="@+id/qq_background"
        android:drawable="@mipmap/photo"
        android:left="10dp"
        android:top="18dp"
        android:right="25dp"
        android:bottom="35dp" />
</layer-list>
           
  • 關于項目中閃屏頁無白屏秒開和分屏過渡動畫的實作:

    請參考這篇文章《閃屏頁無白屏秒開和分屏過渡動畫的實作》

  • demo下載下傳位址:點選打開

繼續閱讀