Android基础控件——ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条
16lz
2021-01-23
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>red<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>blue<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资源文件 - 使用资源存储字符串 颜色 尺寸 整型 布尔值
- Android如何使用so文件和Android studio中导入so
- android读取plist文件
- 在Android中把SQLite的数据库文件存储在SD卡中【转】
- 使用Android自带的DownloadManager下载文件
- android 获取.thumbnail文件下的小图标
- Android--用Pull解析器将对象解析成xml文件及单元测试
- Android 颜色渲染(五) LinearGradient线性渲染
- android4.0系统点击后颜色-浅蓝色