如何使用seekbar添加滑塊（左右）效果？

Question

我有一個對話框，在這裏我有2個按鈕「是」和「否」。如果我向右滑動，那麼它會被視爲按下「否」，如果我向左滑動，它將被視爲按下「是」，就像一些電話呼叫screes爲接受和拒絕呼叫所做的一樣。我累了this鏈接。最初我的滑塊位於中間位置（android：progress =「50」），如果當前進度返回5，我正在考慮它按下了「是」，如果它返回90，我認爲按下「否」，當我嘗試向左滑動或者正確它應該產生一個滑動的效果，以便隨着拇指移動更好的UI。我很累這種方式，但它不是一個很好的效果，當右/左拇指運動.. 意味着我想要完全相同的幻燈片解鎖按鈕像this但要保持滑塊在中間，這樣我可以移動雙方的是和

號

<?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> 
      <gradient 
       android:angle="0" 
       android:startColor="#ff2c10" 
       android:endColor="#ff2c10" /> 
      <corners android:radius="35dip" /> 
      <size android:height="55dp" 
        android:width="250dp"/> 
     </shape> 
    </item> 
    <item android:id="@android:id/progress"> 
     <clip > 
      <shape> 
       <gradient 
        android:angle="0" 
        android:centerY="0.5" 
        android:startColor="#295d0b" 
        android:endColor="#295d0b" /> 
       <corners android:radius="35dip" /> 
       <size android:height="55dp" 
         android:width="250dp"/> 
      </shape> 
     </clip> 
    </item> 
</layer-list> 

而且我seekbar.xml貌似....

<SeekBar 
     android:id="@+id/sb" 
     android:layout_marginTop="10dp" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:progress="50" 
     android:progressDrawable="@drawable/seek_bar" 
     android:thumb="@drawable/slide_thumb" 
     android:splitTrack="false" 
     android:background="@null" 
     android:thumbOffset="2dp" 
     android:paddingLeft="2dp" 
     android:paddingRight="2dp" 
     /> 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Yes" 
     android:textSize="25sp" 
     android:textColor="@android:color/white" 
     android:layout_marginTop="22dp" 
     android:layout_marginLeft="10dp" 
     android:textStyle="bold" 
     /> 
    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="No" 
     android:textSize="25sp" 
     android:textColor="@android:color/white" 
     android:layout_alignParentRight="true" 
     android:layout_marginTop="22dp" 
     android:layout_marginRight="10dp" 
     android:textStyle="bold" 
     /> 

，但它不是給我正確的效果，因爲我想，我想同這些圖片下方是..但是帶「是」和「否」文本。

Answer 1

佈局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context=".MainActivity"> 


<SeekBar 
    android:id="@+id/seekBar" 
    android:layout_width="match_parent" 
    android:layout_height="32dp" 
    android:layout_alignParentEnd="true" 
    android:layout_alignParentRight="true" 
    android:layout_alignParentTop="true" 
    android:layout_gravity="center" 
    android:layout_marginTop="121dp" 
    android:max="100" 
    android:paddingLeft="30dp" 
    android:paddingRight="30dp" 
    android:progress="50" 
    android:progressDrawable="@drawable/seekbar_progressbar" 
    android:thumbTintMode="multiply" /> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="24dp" 
    android:background="@drawable/circle_background_no" 
    android:textColor="#dedede" 
    android:text="No" 
    android:padding="5dp" 
    android:layout_marginLeft="17dp" 
    android:layout_marginStart="17dp" 
    android:layout_alignTop="@+id/textView" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" /> 


<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="24dp" 
    android:textColor="#dedede" 
    android:background="@drawable/circle_background_yes" 
    android:padding="5dp" 
    android:paddingRight="7dp" 
    android:paddingLeft="7dp" 
    android:gravity="center" 
    android:text="Yes" 
    android:id="@+id/textView" 
    android:layout_marginRight="13dp" 
    android:layout_marginEnd="13dp" 
    android:layout_alignTop="@+id/seekBar" 
    android:layout_alignRight="@+id/seekBar" 
    android:layout_alignEnd="@+id/seekBar" 
    android:layout_marginTop="4dp" /> 

在抽拉

circle_background_yes.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 
    <corners android:radius="10dip"/> 
    <stroke android:color="#14ba92" android:width="0dip"/> 
    <solid android:color="#14ba92"/> 
</shape> 

circle_background_no.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 
    <corners android:radius="10dip"/> 
    <stroke android:color="#990800" android:width="0dip"/> 
    <solid android:color="#990800"/> 
</shape> 

seekbar_progressbar.xml

<?xml version="1.0" encoding="utf-8"?> 

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

     <gradient 
      android:angle="180" 
      android:endColor="#14ba92" 
      android:startColor="#14ba92" /> 
    </shape> 
</item> 
<item> 
    <clip> 
     <shape android:shape="rectangle" > 
      <corners android:radius="5dp" /> 

      <gradient 
       android:angle="180" 
       android:endColor="#990800" 
       android:startColor="#d14900" /> 
     </shape> 
    </clip> 
</item> 
<item> 
    <clip> 
     <shape android:shape="rectangle" > 
      <corners android:radius="5dp" /> 

      <gradient 
       android:angle="180" 
       android:endColor="#990800" 
       android:startColor="#d14900" /> 
     </shape> 
    </clip> 
</item> 

如果你不喜歡默認的拇指，你必須創建自己的繪製對象，然後你就可以用類似設置的拇指代碼：

Drawable thumb = getResources().getDrawable(R.drawable.myThumb); 
SeekBar mSeekBar = (SeekBar) findViewById(R.id.mySeekBar); 
mSeekbar.setThumb(thumb); 

也可以設置在XML拇指：

<SeekBar 
    ... 
    android:thumb="@drawable/seek_thumb" /> 

實際的Drawable可以是圖像，形狀或任何其他類型的Drawable，你可能想要的。如果您希望拇指在按下時改變外觀，您將需要創建一個狀態列表Drawable。