如何使用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。