android 垂直方向進度條progressbar
阿新 • • 發佈：2019-02-18
在實際需求會碰到使用垂直方向的是進度條
一 水平方向進度條
1.先看看原生的水平方向進度條
<ProgressBar android:id="@+id/progress3" style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:indeterminate="false" android:indeterminateOnly="false" android:max="100" android:progress="50" />
2.根據style="?android:attr/progressBarStyleHorizontal"，我們找到原始碼中的style.xml
<style name="Widget.ProgressBar.Horizontal"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@android:drawable/progress_horizontal</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <item name="android:minHeight">20dip</item> <item name="android:maxHeight">20dip</item> </style>
3.看到<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有，繼續發掘原始碼，找到drawable下面的progress_horizontal.xml，這就是我們今天的主角
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dip" /> <gradient android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" /> </shape> </clip> </item> </layer-list>
4. 把這個progress_horizontal.xml拷到我們專案下drawable，在佈局檔案使用如下：
<ProgressBar
android:id="@+id/progress3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:indeterminate="false"
android:indeterminateOnly="false"
android:max="100"
android:progress="50"
android:progressDrawable="@drawable/progress_horizontal" />5.水平方向效果：
二.垂直方向進度條。
1.複製一份progress_horizontal.xml改名為progress_vertical.xml，內容修改為
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerX="0.75"
android:endColor="#ff747674"
android:angle="90"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerX="0.75"
android:endColor="#a0ffcb00"
android:angle="90"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical"
android:gravity = "bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerX="0.75"
android:endColor="#ffffcb00"
android:angle="90"
/>
</shape>
</clip>
</item>
</layer-list>或內容為
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical"
android:gravity = "bottom">
<bitmap android:src="@drawable/img_graduation_dtc" />
<!--
<shape>
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerX="0.75"
android:endColor="#ffffcb00"
android:angle="90"
/>
</shape>
-->
</clip>
</item>
</layer-list>2為什麼shape外面要包一層clip呢，官方文件解釋是clipdrawable是可以自我複製的，來看看定義
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:clipOrientation有兩個屬性，預設為horizontal
android:gravity有兩個屬性，預設為left
那我們試試改成vertical和bottom會有什麼效果，新建一個progress_vertical.xml，把原始碼progress_horizontal.xml的內容複製過來，這裡去掉了secondaryProgress，修改了clip，shape的漸變中心centerY改為centerX
3.佈局檔案中使用
<ProgressBar
android:id="@+id/progress5"
style="@style/VLineLayout"
android:layout_height="match_parent"
android:layout_weight="1"
android:indeterminate="false"
android:indeterminateOnly="false"
android:max="100"
android:visibility="gone"
android:progress="50"
android:background="@drawable/img_graduation_gray"
android:progressDrawable="@drawable/progress_vertical" />4 效果圖如下：
