如何使用搜索栏添加滑块(左和右)效果?

时间:2016-05-30 06:15:04

标签: android seekbar

我有一个对话框,在这里我有2个按钮“是”和“否”。如果我向右滑动它将被视为按下“否”,如果我向左滑动,它将被视为按下“是”,就像一些电话呼叫scree做接受和拒绝呼叫一样。我累了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"
        />

但它没有给我正确的效果,因为我想要的,我想要同样如下图所示..但是带有“是”和“否”文字。

When i slide right When i slide left When i slide right 60% on 80 above it will be whole green icon should be behind the thumb

1 个答案:

答案 0 :(得分: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" />

在drawable中

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>

enter image description here

如果您不喜欢默认的拇指,则必须创建自己的Drawable,然后您可以使用以下内容在代码中设置拇指:

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。