2015-07-20 47 views
5

我試圖做這樣的事情:背景樣式不上的進度條顯示

enter image description here

這是我的代碼做什麼:

enter image description here

我將此代碼存入我的可繪製文件中:

progress_bar_layout.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 
      android:innerRadius="70dp" 
      android:shape="ring" 
      android:thickness="18dp"> 
     </shape> 
    </item> 

<item android:id="@android:id/progress"> 
    <shape 
     android:innerRadius="70dp" 
     android:shape="ring" 
     android:thickness="18dp"> 

     <gradient 
      android:endColor="#ff0f315f" 
      android:startColor="#ff005563" 
      android:type="sweep" /> 
    </shape> 
</item> 


<item android:id="@android:id/secondaryProgress"> 
    <shape 
     android:innerRadius="70dp" 
     android:shape="ring" 
     android:thickness="18dp"> 

     <gradient 
      android:endColor="#ff1490e4" 
      android:startColor="#ff00c0dd" 
      android:type="sweep" /> 
    </shape> 
</item> 

</layer-list> 

佈局:

<ProgressBar 
     android:id="@+id/bar" 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="180dp" 
     android:layout_height="180dp" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     android:max="100" 
     android:progress="99" 
     android:progressDrawable="@drawable/progress_bar_layout" 
     android:secondaryProgress="30" /> 

的問題是,我的背景風格不顯示出來。這就是爲什麼我使用進度來完成背景的工作,但正如你所看到的,它不能很好地工作,最大尺寸是99,最後還有一個空間。我錯過了一些代碼?

+1

你可以上傳你正在努力實現的,它可以很容易地在女士造漆或Photoshop –

+0

圖像@LX已經可用。 –

+0

如果你只是想在黑色背景後面progressBar只需在你的標籤中設置這個android:background =「#222222」,它將會訣竅 –

回答

3

基本上,我不得不爲每個元素分割progress_bar_layout.xml可繪製文件,因此,一個文件包含進度設置,另一個文件包含進度設置。 然後,我將它們添加到相應的元素。

android:background="@drawable/circle_shape" 
android:progressDrawable="@drawable/circular_progress_bar" /> 

使用圖層列表,項目沒有找到背景設置,所以這種方法解決了我的問題。

circle_shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:innerRadius="60dp" 
    android:shape="ring" 
    android:thickness="10dp" 
    android:useLevel="false"> 

    <solid android:color="@color/blue"></solid> 

</shape> 

circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?> 
<rotate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromDegrees="270" 
    android:toDegrees="270"> 
    <shape 
     android:innerRadius="60dp" 
     android:shape="ring" 
     android:thickness="10dp" 
     android:useLevel="true"> 

     <solid android:color="@color/blue"></solid> 

    </shape> 
</rotate> 
+0

你可以用circle_shape.xml和circular_progress_bar.xml的代碼更新你的答案,我想看看你如何解決它 –

+0

@LX代碼添加。 –