Android簡單實現(xiàn)一個顏色漸變的ProgressBar的方法
今天看一個教程,看到一個顏色漸變的ProgressBar,覺得有點意思,所以記錄一番。
下面這個是效果圖
顏色漸變的ProgressBar
看到效果圖可能會給人一種使用了高端技術(shù)的感覺,其實這個沒有那么高深,我們只是簡單改變了ProgressBar的樣式即可實現(xiàn),下面說說實現(xiàn)方式。
首先我們簡單分析一下:
1 . 上面的樣式只是實現(xiàn)了顏色漸變,但它旋轉(zhuǎn)和呈現(xiàn)的方式仍然是一個圓形的ProgressBar。
2 . 這個ProgressBar實現(xiàn)了顏色漸變,我們就需要用到gradient,這個也比較簡單,只要我們配置開始,中間,結(jié)束顏色即可實現(xiàn)
明白了上面兩點我們就開始寫代碼。
首先,我們實現(xiàn)上面的布局,背景灰色,一個ProgressBar居中,一個TextView位于ProgressBar下方。
代碼如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="cn.codekong.androidloading.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#de262a3b"> <ProgressBar android:id="@+id/loading" android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:indeterminate="false"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/loading" android:text="加載中" android:textColor="#ffffff" android:textSize="20sp" android:layout_centerHorizontal="true"/> </RelativeLayout> </RelativeLayout>
上面其他代碼都很好理解,只有ProgressBar有一個 indeterminate 屬相需要解釋一下:
一般的ProgressBar都是用于顯示加載進(jìn)度,如果我們直到當(dāng)前的具體進(jìn)度,那個這個屬性要設(shè)置為true,并設(shè)置正確的進(jìn)度,如果我們也不知道正確的進(jìn)度,則設(shè)置為false。
布局設(shè)置好了,下一步就是設(shè)置ProgressBar的漸變樣式,這里我們需要自定義一個Drawable。
自定義的Drawable代碼如下:
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="1080.0"> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="10" android:useLevel="false"> <gradient android:centerColor="#FFDC35" android:centerY="0.50" android:endColor="#CE0000" android:startColor="#FFFFFF" android:type="sweep"/> </shape> </rotate>
下面解釋一下上面的代碼:
外層的 rotate 表明這是一個旋轉(zhuǎn)的動畫,并且該規(guī)定了開始角度和結(jié)束角度,還有旋轉(zhuǎn)中心為圓心
內(nèi)層的shape定義了形狀為一個環(huán)(ring),其中有三個屬性:
<1> innerRadiusRatio 為外環(huán)半徑和內(nèi)徑的比值,比如外環(huán)半徑為30,內(nèi)環(huán)半徑為10,則比值為3
<2> thicknessRatio 為外環(huán)半徑與環(huán)的厚度的比值
<3> useLevel 如果為true,則可以在LevelListDrawable中使用
接下來的 gradient 定義了漸變效果,規(guī)定了開始結(jié)束的顏色,還規(guī)定漸變方式為掃描漸變
最后一步,我們通過一個ProgressBar的屬性給他設(shè)置我們上面定義的樣式:
android:indeterminateDrawable="@drawable/loading_drawable"
經(jīng)過上面的步驟我們就實現(xiàn)了一個簡單的漸變的ProgressBar,是不是超級簡單,希望可以幫助到需要的人。
源碼地址: https://github.com/codekongs/Android-Learning/tree/master/AndroidLoading
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android中ImageView實現(xiàn)選擇本地圖片并顯示功能
本文主要介紹了android中ImageView實現(xiàn)選擇本地圖片并顯示功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04ERROR/AndroidRuntime(17121)的問題解決
ERROR/AndroidRuntime(17121)的問題解決,需要的朋友可以參考一下2013-05-05android開發(fā)之橫向滾動/豎向滾動的ListView(固定列頭)
由于項目需要,我們需要一個可以橫向滾動的,又可以豎向滾動的 表格;經(jīng)過幾天的研究終于搞定,感興趣的朋友可以了解下哦2013-01-01Android學(xué)習(xí)教程之日歷庫使用(15)
這篇文章主要為大家詳細(xì)介紹了Android學(xué)習(xí)教程之日歷庫使用的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11android scrollview 自動滾動到頂部或者底部的實例
這篇文章主要介紹了android scrollview 自動滾動到頂部或者底部的相關(guān)資料,需要的朋友可以參考下2017-06-06Android開發(fā)實現(xiàn)讀取Assets下文件及文件寫入存儲卡的方法
這篇文章主要介紹了Android開發(fā)實現(xiàn)讀取Assets下文件及文件寫入存儲卡的方法,涉及Android文件與目錄的讀取、寫入、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10