2015-09-27 750 views
5

試圖製作自定義SeekBar。我想實現這一點。Android - 自定義SeekBar - 進度條上的圓角

enter image description here

我迄今所做的就是這個。我無法找到在進度條上四捨五入的方法。

enter image description here

有人能幫助這一點?這裏是我的代碼

main_activity.xml

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:gravity="center"> 

    <SeekBar 
     android:id="@+id/seekBar1" 
     android:layout_width="match_parent" 
     android:layout_height="30dp" 
     android:progressDrawable="@drawable/styled_progress" 
     android:paddingLeft="15dp" 
     android:paddingRight="15dp" 
     android:progress="90" 
     android:thumb="@drawable/thumbler_small" 
     android:maxHeight="30dp" 
     android:layout_marginTop="125dp" 
     android:layout_marginBottom="15dp" 
     android:indeterminate="false" /> 

</LinearLayout> 

styled_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

<item android:id="@android:id/background"> 
    <shape> 
     <gradient 
       android:startColor="#d2e5ff" 
       android:endColor="#d2e5ff" 
       android:angle="45" 
     /> 
     <corners 
       android:bottomRightRadius="7dp" 
       android:bottomLeftRadius="7dp" 
       android:topLeftRadius="7dp" 
       android:topRightRadius="7dp"/> 
    </shape> 
</item> 

<item android:id="@android:id/secondaryProgress"> 
    <clip> 
     <shape> 
      <gradient 
        android:startColor="#808080" 
        android:endColor="#808080" 
        android:angle="270" 
      /> 
      <corners 
       android:bottomRightRadius="7dp" 
       android:bottomLeftRadius="7dp" 
       android:topLeftRadius="7dp" 
       android:topRightRadius="7dp"/> 
     </shape> 
    </clip> 
</item> 
<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <gradient 
       android:startColor="#c5e6eb" 
       android:endColor="#61cabb" 
       android:angle="45" /> 
      <corners 
       android:bottomRightRadius="7dp" 
       android:bottomLeftRadius="7dp" 
       android:topLeftRadius="7dp" 
       android:topRightRadius="7dp"/> 
     </shape> 

    </clip> 
</item> 
</layer-list> 
+0

[圓角進度條內圓角進度]的可能重複(http://stackoverflow.com/questions/25130359/rounded-progress-within-rounded-progress-bar) –

回答

2

you can see the image here

這sulotion是我能做到這一點的唯一方法。 希望這有助於

這是我的搜索條:

  <SeekBar 
      android:id="@+id/simpleProgressBar" 
      android:layout_width="fill_parent" 
      android:layout_height="12dp" 
      android:max="100" 
      android:progress="0" 
      android:background="@null" 
      android:shape="oval" 
      android:splitTrack="false" 
      android:progressDrawable="@drawable/progress_background" 
      android:secondaryProgress="0" 
      android:thumbOffset="10dp" 
      android:thumb="@drawable/oval_seekbar_thumb" /> 

這是(progress_background.xml):

<item android:id="@android:id/background"> 
    <shape android:shape="rectangle"> 
     <corners android:radius="5dp" /> 

     <gradient 
      android:angle="270" 
      android:endColor="@color/grey_line" 
      android:startColor="@color/grey_line" /> 
    </shape> 
</item> 
<item android:id="@android:id/secondaryProgress"> 
    <clip> 
     <shape android:shape="oval"> 
      <corners android:radius="5dp" /> 
      <gradient 
       android:angle="270" 
       android:endColor="@color/blue" 
       android:startColor="@color/blue" /> 
     </shape> 
    </clip> 
</item> 
<item android:id="@android:id/progress"> 
    <clip> 
     <shape android:shape="rectangle"> 
      <corners android:radius="90dp" /> 

      <gradient 
       android:angle="90" 
       android:endColor="@color/colorPrimaryDark" 
       android:startColor="@color/colorPrimary" /> 
     </shape> 
    </clip> 
</item> 

,這是拇指( oval_seekbar_thumb.xml):

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape android:shape="oval"> 
      <solid android:color="#ffffff" /> 
      <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/> 
      <size android:height="12dp" android:width="12dp"/> 
     </shape> 
    </item> 
</selector> 

拇指的高度應該與seekbar的高度相同才能正確查看。