首先在佈局上android
<RelativeLayout android:layout_below="@id/just_used_to_locate_04" android:layout_marginLeft="16.0dip" android:layout_marginRight="16.0dip" android:layout_marginTop="5dp" android:layout_toRightOf="@+id/cim_xinix" android:layout_width="wrap_content" android:layout_height="30dp"> <ProgressBar android:id="@+id/gradient_progress" android:layout_width="match_parent" android:layout_height="30dp" style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal" android:progress="60" android:progressDrawable="@drawable/my_xinxi_progress" android:indeterminateDuration="10" /> <ImageView android:layout_width="15dp" android:layout_height="15dp" android:background="@drawable/redbag_img_minitree" android:layout_centerVertical="true" android:layout_marginLeft="10dp" /> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="6/10" android:textColor="#ffffff" /> </RelativeLayout>
在drawable下佈局兩個佈局
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="20dp" /> <stroke android:width="2dp" android:color="#ffffff" /> <gradient android:angle="270" android:centerColor="#C55C18" android:centerY="0.75" android:endColor="#C55C18" android:startColor="#C55C18" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="20dp" /> <stroke android:width="2dp" android:color="#ffffff" /> <gradient android:angle="270" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:startColor="#80ffd300" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <scale android:scaleWidth="100%" android:drawable="@drawable/progressview_xinxi" /> </clip> </item> </layer-list> 效果圖如上
progressview_xinxi.xml
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="20dp"/> <stroke android:width="2dp" android:color="#00000000" /> <stroke android:width="4dp"/> <solid android:color="#00000000"/> <solid android:color="#F55c18"/> <gradient android:angle="0" android:centerY="0.75" android:endColor="#ff3e24" android:startColor="#ffcf23"/> </shape>
而後在mainActivity裏面加上一句spa
ProgressBar gradient_progress = (ProgressBar) findViewById(R.id.gradient_progress); ObjectAnimator .ofInt(gradient_progress, "progress", 0, 60) .setDuration(500) .start();
就這樣 這個動態的長形出來了。3d
shape的定義xml
android:shape=["rectangle"|"oval"|"line"|"ring"]ip
shape的 形狀,默認爲矩形,能夠設置爲矩形(rectangle), 、橢圓形(oval)、線性形狀(line)、環形(ring)utf-8
下面的屬性只有在android:shape=」ring時可用:
android:innerRadius 尺寸,內環的半徑。
android:innerRadiusRatio 浮點型,以環的寬度比率來表示內環的半徑,ci
solid
實心,填充的意思
android:color指定填充的顏色get
gradient
漸變
android:startColor 開始的顏色
android:endColor 漸變結束的顏色
android:angle 漸變角度,必須爲45的整數倍,當angle=0時,漸變色是從左向右。 而後逆時針方向轉,當angle=90時爲從下往上
android:type=」linear」,即線性漸變,能夠指定漸變爲徑向漸變,android:type=」radial」,徑向漸變須要指定半徑android:gradientRadius=」50」it
stroke
描邊緣
android:width=」2dp」 描邊的寬度
android:color 描邊的顏色
咱們還能夠把描邊弄成虛線的形式,設置方式爲:android:dashWidth=」5dp」 android:dashGap=」3dp」
其中android:dashWidth表示’-‘這樣一個橫線的寬度,android:dashGap表示之間隔開的距離。
corners
拐角,radius屬性爲半徑,android:radius爲角的弧度,值越大角越圓。
padding:間隔
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape> <gradient android:startColor="#ff8c00" android:endColor="#ff8c00" android:angle="270"/> <stroke android:width="0dp" android:color="#dcdcdc"> </stroke> <corners android:radius="10dp"> </corners> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"></padding> </shape> </item> <item android:state_focused="true"> <shape> <gradient android:startColor="#ffc2b7" android:endColor="#ffc2b7" android:angle="270"> </gradient> <stroke android:width="0dp" android:color="#dcdcdc"> </stroke> <corners android:radius="10dp"> </corners> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"> </padding> </shape> </item> <item> <shape> <gradient android:startColor="#ff9677" android:endColor="#ff9d77" android:angle="270"> </gradient> <stroke android:width="0dp" android:color="#fad3cf"> </stroke> <corners android:radius="10dp"> </corners> <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"> </padding> </shape> </item> </selector>