Android UI效果之繪圖篇(一)
最近準(zhǔn)備整理一套關(guān)于UI效果的文章,算是對(duì)這段時(shí)間的一個(gè)總結(jié),主要講Android開(kāi)發(fā)中的UI效果設(shè)計(jì)模塊。初步分為一下幾個(gè)篇幅:
- Android XML繪圖(Shape、Layer、Selector)
- Android Canvas繪圖(canvas、point、porterDuffXfermode、shader)
- Android 動(dòng)畫(huà)詳解
- Android 自定義控件
今天就當(dāng)開(kāi)胃菜,先講講最簡(jiǎn)單的xml繪圖,相信這個(gè)大家都用的比較熟,這里就當(dāng)給大家做一個(gè)小文檔,當(dāng)那個(gè)參數(shù)配置忘了,便于查閱
一、Shape
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" // 此處可以設(shè)置shape的形狀 不設(shè)置默認(rèn)為rectangle android:shape=["rectangle"|"oval"|"line"|"ring"|] > <!-- 圓角 shape="rectangle"是使用 默認(rèn)為1dp --> <corners android:radius="xdp" android:topLeftRadius="xdp" android:topRightRadius="xdp" android:bottomLeftRadius="xdp" android:bottomRightRadius="xdp"/> <!-- 漸變 --> <gradient android:startColor="color" android:centerColor="color" android:endColor="color" android:useLevel="boolean" android:angle="integer"http://angle的值必須是45的倍數(shù)(包括0),僅在type="linear"有效 android:type=["linear"|"radial"|"sweep"] android:centerX="integer" android:centerY="integer" android:gradientRadius="integer"/> <!-- 間隔 --> <padding android:left="xdp" android:top="xdp" android:right="xdp" android:bottom="xdp"/> <!-- 大小 寬度和高度 --> <size android:width="dp" android:height="dp"/> <!-- 填充 --> <solid android:color="color"/><!-- 填充的顏色 --> <!-- 描邊 --> <stroke android:width="dp" android:color="color" android:dashWidth="dp" //虛線寬度 android:dashGap="dp"/> //虛線間隔寬度 </shape>
二、Layer
這個(gè)用過(guò)photoshop的朋友,應(yīng)該很好理解,用于實(shí)現(xiàn)圖層效果
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- item1 --> <item> <bitmap android:src="drawable" android:gravity="center" /> </item> <!-- item2 --> <item> <bitmap android:src="drawable" android:gravity="center" /> </item> <!-- item3 --> <item <bitmap android:src="drawable" android:gravity="center" /> </item> </layer-list>
三、Selector
這個(gè)常用語(yǔ)Button、CheckBox、Radio等控件中,通過(guò)不同的事件切換控件效果
<?xml version="1.0" encoding="utf-8" ?> <selector xmlns:Android="http://schemas.android.com/apk/res/android"> <!-- 默認(rèn)時(shí)的背景圖片--> <item Android:drawable="drawable" /> <!-- 沒(méi)有焦點(diǎn)時(shí)的背景圖片 --> <item Android:state_window_focused="false" android:drawable="drawable" /> <!-- 非觸摸模式下獲得焦點(diǎn)并單擊時(shí)的背景圖片 --> <item Android:state_focused="true" android:state_pressed="true" android:drawable= "drawable" /> <!-- 觸摸模式下單擊時(shí)的背景圖片--> <item Android:state_focused="false" Android:state_pressed="true" Android:drawable="drawable" /> <!--選中時(shí)的圖片背景--> <item Android:state_selected="true" android:drawable="drawable" /> <!--獲得焦點(diǎn)時(shí)的圖片背景--> <item Android:state_focused="true" Android:drawable="drawable" /> </selector>
以上就是Android開(kāi)發(fā)中的UI效果設(shè)計(jì)模塊的一部分內(nèi)容,之后還會(huì)繼續(xù)更新,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
Android開(kāi)發(fā)之模仿微信打開(kāi)網(wǎng)頁(yè)的進(jìn)度條效果(高仿)
這篇文章主要介紹了Android開(kāi)發(fā)之模仿微信打開(kāi)網(wǎng)頁(yè)的進(jìn)度條效果(高仿)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07Android 自動(dòng)化測(cè)試經(jīng)驗(yàn)分享 深入U(xiǎn)iScrollable
UiScrollable是一個(gè)UiCollection(這東西還沒(méi)搞懂),我們可以使用它,在可滑動(dòng)的頁(yè)面(水平滑動(dòng)或上下滑動(dòng)都可以)上查找我們想要的控件(item)2013-05-05flutter實(shí)現(xiàn)appbar下選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)appbar下選項(xiàng)卡切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07Android自定義Dialog內(nèi)部透明、外部遮罩效果
這篇文章主要為大家詳細(xì)介紹了Android自定義Dialog內(nèi)部透明、外部遮罩效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10Android延遲實(shí)現(xiàn)的幾種解決方法及原理分析
這篇文章主要給大家介紹了關(guān)于Android延遲實(shí)現(xiàn)的幾種解決方法以及其中的原理分析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Android RecyclerView區(qū)分視圖類(lèi)型的Divider的實(shí)現(xiàn)
本篇文章主要介紹了Android RecyclerView區(qū)分視圖類(lèi)型的Divider的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04詳解Android studio 3+版本apk安裝失敗問(wèn)題
這篇文章主要介紹了詳解Android studio 3+版本apk安裝失敗問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04Android簡(jiǎn)單實(shí)用的可拖拽GridView組件分享
在我們?nèi)粘i_(kāi)發(fā)中,使用?GridView?這種網(wǎng)格視圖的場(chǎng)合還是不少的,本篇我們來(lái)介紹一個(gè)支持拖拽的?GridView?組件,可以輕松搞定網(wǎng)格視圖的拖拽排序,需要的可以參考一下2023-06-06Android開(kāi)發(fā)之CheckBox的簡(jiǎn)單使用與監(jiān)聽(tīng)功能示例
這篇文章主要介紹了Android開(kāi)發(fā)之CheckBox的簡(jiǎn)單使用與監(jiān)聽(tīng)功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了Android使用CheckBox控件的布局與功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07