700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Android基础控件——ProgressBar自定义的介绍 动画效果实现 附加三个漂亮的进度条

Android基础控件——ProgressBar自定义的介绍 动画效果实现 附加三个漂亮的进度条

时间:2023-07-22 00:29:37

相关推荐

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" /><gradientandroid: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="/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" /><gradientandroid:centerColor="#88ff3939"android:endColor="#50ff3939"android:startColor="#90ff3939" /></shape></clip></item><item android:id="@android:id/progress"><clip><shape><corners android:radius="5dip" /><gradientandroid:centerColor="#88221e12"android:endColor="#50221e12"android:startColor="#90221e12" /></shape></clip></item></layer-list>

步骤二:在layout的xml文件中使用

<ProgressBarandroid: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="/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/app_refresh_people_0"android:duration="200" /><itemandroid:drawable="@drawable/app_refresh_people_1"android:duration="200" /><itemandroid:drawable="@drawable/app_refresh_people_2"android:duration="200" /><itemandroid:drawable="@drawable/app_refresh_people_3"android:duration="200" /></animation-list>

在layout\xml文件中:

<ProgressBarstyle="?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="/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="/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="/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="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="16dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="5dp"android:background="#F07C4E"android:orientation="horizontal"android:padding="8dp"><TextViewandroid: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" /><ProgressBarstyle="@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><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="5dp"android:background="#F14E69"android:orientation="horizontal"android:padding="8dp"><TextViewandroid: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" /><ProgressBarstyle="@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><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="5dp"android:background="#4ED9EC"android:orientation="horizontal"android:padding="8dp"><TextViewandroid: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" /><ProgressBarstyle="@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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。