Android基礎控制元件——ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條
ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條
shape屬性介紹：
corners 圓角 gradient 漸變 padding 內容離邊界距離 size 大小 solid 填充顏色 stroke 描邊
gradient 屬性介紹：
android:startColor：顏色漸變的開始顏色。 android:endColor：顏色漸變的結束顏色。 android:centerColor：顏色漸變的中間顏色，主要用於多彩。 android:centerX：(0 - 1.0) 相對X的漸變位置。 android:centerY：(0 - 1.0) 相對Y的漸變位置。 這兩個屬性只有在type不為linear情況下起作用。 android:angle：當設定填充顏色後，無漸變效果。 angle的值必須是45的倍數（包括0），僅在type="linear"有效，不然會報錯。
屬性介紹演示圖：
angle對應值的起點如圖
xml檔案：
<item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:centerColor="#00ff00" android:endColor="#0000ff" android:startColor="#ff0000" /> </shape> </item>
angle效果圖[演示從0-45-90-135-180]（為了更好的理解）
centerX效果圖[演示從0-0.2-0.4-0.6-0.8-1.0]（為了更好的理解）
步驟一：創建出drawable的xml檔案
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <stroke android:color="#f6f1f7" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:centerColor="#88ff3939" android:endColor="#50ff3939" android:startColor="#90ff3939" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:centerColor="#88221e12" android:endColor="#50221e12" android:startColor="#90221e12" /> </shape> </clip> </item> </layer-list>
步驟二：在layout的xml檔案中使用<ProgressBar
android:id="@+id/pb"
style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/custom_download_progress_bar" />步驟三：檢視效果圖步驟四：動畫效果實現（這裡使用indeterminateDrawable這個屬性）
準備一組圖片，在drawable\xml中：<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@drawable/app_refresh_people_0"
android:duration="200" />
<item
android:drawable="@drawable/app_refresh_people_1"
android:duration="200" />
<item
android:drawable="@drawable/app_refresh_people_2"
android:duration="200" />
<item
android:drawable="@drawable/app_refresh_people_3"
android:duration="200" />
</animation-list>在layout\xml檔案中： <ProgressBar
style="?android:attr/progressBarStyle"
android:layout_width="98dp"
android:layout_height="146dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:indeterminateDrawable="@drawable/custom_animation_progress_bar" />步驟五：附加三個漂亮的進度條
先看效果圖：
三個drawable的xml檔案：orange<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="10dp" />
<solid android:color="#DD541C" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dip" />
<solid android:color="#F9FFFF" />
</shape>
</clip>
</item>
</layer-list><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="10dp" />
<solid android:color="#D91A36" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dip" />
<solid android:color="#F9FFFF" />
</shape>
</clip>
</item>
</layer-list><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="10dp" />
<solid android:color="#1691AB" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dip" />
<solid android:color="#F9FFFF" />
</shape>
</clip>
</item>
</layer-list>三個在layout的xml檔案：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#F07C4E"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#DB551D"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="18%"
android:textColor="#ffffff"
android:textSize="16dp" />
<ProgressBar
style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:paddingBottom="6dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="6dp"
android:progress="18"
android:progressDrawable="@drawable/custom_orange_progress_bar" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#F14E69"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#DA1C38"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="62%"
android:textColor="#ffffff"
android:textSize="16dp" />
<ProgressBar
style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:paddingBottom="6dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="6dp"
android:progress="62"
android:progressDrawable="@drawable/custom_red_progress_bar" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#4ED9EC"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#1DBADB"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="47%"
android:textColor="#ffffff"
android:textSize="16dp" />
<ProgressBar
style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="22dp"
android:layout_gravity="center_vertical"
android:paddingBottom="6dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:paddingTop="6dp"
android:progress="47"
android:progressDrawable="@drawable/custom_blue_progress_bar" />
</LinearLayout>
</LinearLayout>相關推薦
Android基礎控制元件——ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條
ProgressBar自定義的介紹、動畫效果實現、附加三個漂亮的進度條 shape屬性介紹： corners 圓角 gradient 漸變 padding 內容離邊界距離 size 大小 solid 填充顏色 stroke 描邊 gradien
android之4.0控制元件switch自定義開關背景圖片和控制寬度
<style name="widget_gender_switch"> <item name="android:layout_height">wrap_content</item> <item name=
Android ListView的應用（如何去實現ListView控制元件（自定義介面卡））
稀稀拉拉學了有快1年的Android了，但是依然跟剛入門的小白一樣，用到啥學啥，上網查別人的程式碼，然後複製貼上過去，最後什麼都沒學到，現在是深有體會，我希望記錄一些知識點，踏踏實實的走好每一步，希望剛入門的小白能用到。首先Android Studio中有許多系統自帶的空間，
Android自定義控制元件之自定義TextView，實現drawableLeft可以和文字一起居中
LZ-Says：給大家推薦一個網站，有興趣可以查閱，想為大家貢獻一點自己的力量也可以投稿，老大稽核通過會發表，更好的幫助有需要的人~歡迎大家踴躍投稿~地址如下： http://ww
android自定義控制元件(五) 自定義組合控制元件
< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:layout_widt
android自定義控制元件_完全自定義控制元件（自定義開關）
前面總結到自定義控制元件分為 組合控制元件 繼承已有控制元件 比如自定義SmartImageView繼承ImageView 完全自定義控制元件 上一篇寫了自定義控制元件的自定義屬性深入理解點選連結檢視，是自定控制元件比較難以理解的地方，但是是很重
Android評分條控制元件RatingBar自定義背景顏色圖片
預設的背景圖片顏色是綠色的，看起來和專案顏色極不統一，所以需要自定義背景圖片。 原理很簡單，就是替換系統預設的三種圖片。 替換方式是使用RatingBar的android:progressDrawable="@drawable/rating_yellow" 屬性進行
Android自定義控制元件系列(二)—icon+文字的多種效果實現
今天給大家帶來一個很簡單但是很常用的控制元件ButtonExtendM，在開發中我們經常會用到圖片加文字的組合控制元件，像這樣： 以上圖片都是從微信上擷取的。（暫時沒有找到icon在下，文字在上的例子） 下面我們通過一個控制元件來實現上下左右全部
Android View 滾輪控制元件LoopView+自定義Dialog [時間地域選擇器] Picker
發現了一些好的東西： https://github.com/weidongjian/androidWheelView 曾經找到過 WheelView。當時江湖救急，直接用了。資料來源太大的話會導致效能降低。 當時有吐槽如果有使用自定義view或者繼承ListView
JavaFX UI控制元件教程（二十八）之UI控制元件的自定義
翻譯自 Customization of UI Controls 本章介紹了UI控制元件自定義的各個方面，並總結了Oracle提供的一些提示和技巧，以幫助您修改UI控制元件的外觀和行為。 您可以通過應用層疊樣式表（CSS），重新定義預設行為和使用單元工廠來學習如何從UI
Android 基礎控制元件(二)
##7.ImageView ImageView直接繼承View，也是非常常用的一種檢視控制元件。 示例程式碼： <ImageView android:id="@+id/testImage" android:layout_width="100dp" a
android 基礎控制元件————TextView
TextView是View的直接子類。它是一個文字顯示控制元件，提供了基本的顯示文字的功能，並且是大部分UI控制元件的父類，因為大部分UI控制元件都需要展示資訊。 如果僅僅是展示文字，那麼TextView的作用就太小了，所以它還預定義了一些類似於HTML的標籤，通過這些標籤可以使TextView
echart.js控制元件畫圖自定義tooltip
function makeSelfTooltip(_options){ _options = $.extend(_options, { 'tooltip': { &
C#為ComboBox等陣列型控制元件設定自定義資料
ComboBox、ListBox、CheckedListBox等列表型控制元件，可以單獨為每個Item設定顯示文字和資料。 為此，我們定義一個類，來實現這個Item的文字顯示和資料關聯： public class ListComponentItem { p
Android的基本元件和自定義檢視
Android的基本元件 1 Activity 1.1 Activity代表手機的一個螢幕 1.2 一個Android程式由多個Activity組成，即：一個Android程式由多屏內容組成 1.3 Activity相當於一個展板
Android基礎(一)佈局7.自定義佈局
title.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
html檔案上傳控制元件file自定義樣式
問題： HTML自帶的file上傳按鈕因在各種瀏覽器裡顯示樣式不一、不易自定義樣式給我們帶來很大的麻煩。 解決思路： 將input[type=file]控制元件隱藏，使用一個input[type=text]和button組合作為file控制元件的替代（樣式自行定義），並將
Android圖表控制元件MPAndroidChart的簡單介紹（MPAndroidChart3.0）
每個類對應的圖是什麼github上有詳細的介紹圖表類具有相同的地方X軸：XAxisY軸：YAxis圖例：Legend描述：Description限制線：LimitLine選中圖表中的值，可顯示的檢視：MarkerView 具體在圖表中的表現如下圖以曲線圖為例依賴：projec
UIPickerView控制元件中自定義顯示的字型大小及樣式
//重寫方法 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIVi
MD控制元件之自定義behavior
首先這裡介紹系統自帶的behavior中的一些方法 /** * 表示是否給應用了Behavior 的View 指定一個依賴的佈局，通常，當依賴的View 佈局發生變化時 * 不管被被依賴View 的順序怎樣，被依賴的View也會重新佈局