帶圓角的進度條？

Question

我想實現這個進度條設計：

當前的代碼，我有產生這樣的：

這是代碼：

<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="8dp"/> 
     <solid android:color="@color/dirtyWhite"/> 
    </shape> 
</item> 

<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <corners android:radius="8dp"/> 
      <solid android:color="@color/colorPrimaryDark"/> 
     </shape> 
    </clip> 
</item> 

我的進度條：

<ProgressBar 
      android:id="@+id/activeProgress" 
      style="?android:attr/progressBarStyleHorizontal" 
      android:layout_width="300dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:progress="10" 
      android:progressDrawable="@drawable/rounded_corners_progress_bar"/> 

我試着在<shape>的<clip上加<size>屬性來使進度形狀稍微小一些，但它不起作用。此外，進度條是平坦的，我想按設計彎曲。爲了實現設計，我需要改變什麼？

Answer 1

如何讓進度變得更小？

你需要給項目進度稍微填充，就像這樣：

<item android:id="@android:id/progress" 
    android:top="2dp" 
    android:bottom="2dp" 
    android:left="2dp" 
    android:right="2dp"> 

如何使進度條彎曲按設計？

用<scale android:scaleWidth="100%"></scale>代替<clip></clip>元件。這將使形狀保持其形式，而不是切斷。 不幸的是，它在開始時會產生一些不需要的視覺效果 - 因爲形狀邊角沒有足夠的空間來繪製。但對大多數情況來說，這可能已經足夠好了。

全碼：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="8dp"/> 
     <solid android:color="@color/dirtyWhite"/> 
    </shape> 
</item> 

<item android:id="@android:id/progress" 
    android:top="1dp" 
    android:bottom="1dp" 
    android:left="1dp" 
    android:right="1dp"> 

    <scale android:scaleWidth="100%"> 
     <shape> 
      <corners android:radius="8dp"/> 
      <solid android:color="@color/colorPrimaryDark"/> 
     </shape> 
    </scale> 
</item> 
</layer-list>