如何使这种类型的进度条

Question

我期待使下面的给定类型的进度条，但不知道从哪里开始。

我已经经历了多个自定义进度条库和示例走了，但他们没有真的帮我创建这个进度条。请帮帮我。提前致谢。

Answer 1

试试如下：

创建文件名为custom_progress_bar_horizo​​ntal.xml和orange_button_selector.xml在如下应用程序的文件夹drawable：

custom_progress_bar_horizo​​ntal.xml

<?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="5dip" /> 

      <gradient 
       android:angle="270" 
       android:centerColor="#ffdddddd" 
       android:centerY="0.50" 
       android:endColor="#ffffffff" 
       android:startColor="#ffffffff" /> 
     </shape> 
    </item> 
    <item android:id="@android:id/secondaryProgress"> 
     <clip> 
      <shape> 
       <corners android:radius="5dip" /> 

       <gradient 
        android:angle="90" 
        android:endColor="#771997e1" 
        android:startColor="#770e75af" /> 
      </shape> 
     </clip> 
    </item> 
    <item android:id="@android:id/progress"> 
     <clip> 
      <shape> 
       <corners android:radius="5dip" /> 

       <gradient 
        android:angle="90" 
        android:endColor="#ff1997e1" 
        android:startColor="#ff0e75af" /> 
      </shape> 
     </clip> 
    </item> 

</layer-list> 

orange_button_selector.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <corners android:radius="200dp" /> 

    <solid android:color="#AAAAAA" /> 

    <padding 
     android:bottom="8dp" 
     android:left="8dp" 
     android:right="8dp" 
     android:top="8dp" /> 

</shape> 

在你style.xml添加下面的风格。

<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal"> 
     <item name="android:indeterminateOnly">false</item> 
     <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item> 
     <item name="android:minHeight">10dip</item> 
     <item name="android:maxHeight">20dip</item> 
    </style> 

创建布局如下：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_gravity="center_vertical" > 

    <LinearLayout 
     android:id="@+id/ll_top1" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_centerInParent="true" 
     android:background="@drawable/orange_button_selector" 
     android:gravity="center" 
     android:orientation="horizontal" 
     android:weightSum="1" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp" > 

     <ProgressBar 
      android:id="@+id/progressBar1" 
      style="@style/CustomProgressBar" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight=".85" /> 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight=".15" 
      android:gravity="right" 
      android:text="18 MB" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textSize="15sp" /> 
    </LinearLayout> 

</RelativeLayout> 

这里是输出：