logo标签列表

在Android中如何实现三态滑动按钮

androidbutton
7
我希望为我的应用实现一个三态滑动按钮。在第一个位置，它应该显示一种颜色，在中心位置，它应该显示另一种颜色，而在结束位置，它应该再次更改颜色。这里我提供了相关图片。
您如何实现这个功能？
1
如果这是一个要求，那么你能做什么呢...否则，请不要创建非标准的UI控件。无论你认为它们有多有用，用户都不会喜欢它们。 - entonio
这是关于编程的内容，请将其从英语翻译成中文。请仅返回已翻译的文本：这是客户的要求... - Aju
4个回答
8
这实际上看起来像是扩展了 滑动条 的样式。
要实现这种滑块，我会创建一个继承 滑动条 的类。在构造函数中，我会使用 .setMax(2); 这意味着滑动条只有 3 个位置/步数。
然后在默认实现中，我会添加一个 seekbar.OnChangeListener()。在其中的 pogressChanged(...) 方法中，使用 .setBackgroundDrawable(...) 切换背景图像资源，如有必要，使用 .setThumb(...) 将拇指更改为所需的图像。
如果您想要更改滑块的位置，可以实现 Click 事件处理，使用 .setProgress(); 更改滑块的位置。
这是一个非常易于处理且快速完成的实现，因为它仅需要几行代码。
我必须处理这个问题，但在研究和开发上浪费了相当多的时间后，实施这个功能是最佳途径。 - Ashutosh Sagar
2

这可以通过使用RadioGroup来实现。

您需要像这样自定义RadioGroup中的RadioButtons：

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_toggler"
    android:orientation="horizontal"
    android:padding="4dp">

    <RadioButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button1_background"
        android:button="@null"
        android:checked="true" />

    <RadioButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button2_background"
        android:button="@null"
        android:checked="false" />

    <RadioButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button3_background"
        android:button="@null"
        android:checked="false" />

</RadioGroup>

drawable/button1_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn1checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn1unchecked"
        android:state_checked="false" />
</selector>

drawable/button2_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn2checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn2unchecked"
        android:state_checked="false" />
</selector>

drawable/button3_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/btn3checked"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/btn3unchecked"
        android:state_checked="false" />
</selector>

请为所有3个按钮使用相关的可绘制资源。 现在，您可以处理RadioGroup检查更改的事件。

1

这是我为了自己的需求而开发的，现在分享代码。非常容易做和配置。只需要使用一个switch语句来查找指针位置并执行操作。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@color/md_green_100"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:text="@string/send"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="18sp"
        android:textStyle="bold" />

    <SeekBar
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:backgroundTint="@color/md_green_100"
        android:id="@+id/transferSwitch"
        android:elevation="5dp"
        android:foregroundTint="@color/md_green_100"
        android:indeterminateTint="@color/md_green_100"
        android:max="2"
        android:padding="5dp"
        android:progress="1"
        android:progressBackgroundTint="@color/md_green_100"
        android:progressTint="@color/md_green_100"
        android:secondaryProgressTint="@color/md_green_100"
        android:thumb="@android:drawable/presence_online"
        android:thumbTint="@color/md_green_800"
        app:tickMarkTint="@color/md_green_800" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|end"
        android:gravity="center"
        android:padding="10dp"
        android:text="@string/receive"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

使用方法：

SeekBar seekBar = findViewById(SEEKBAR);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
       //Do something here!
       switch(progress){
          case 0: //Left
          case 2: //Right
          case 1: default: //Center 
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

    }
});

预览：

Sweet 3-way switch

0
创建一个新的视图并覆盖 onPaint() 方法。
在 A、B 或 C 位置（最左边，中间，最右边）中绘制 "slider" 位图，然后将背景颜色设置为当前视图所处的 A、B、C 位置之一。使用 Canvas.drawBitmap() - http://developer.android.com/reference/android/graphics/Canvas.html#drawBitmap(android.graphics.Bitmap，float，float，android.graphics.Paint) 绘制位图。
您可以使用 Canvas.drawRGB() 绘制背景颜色，但需要在绘制滑块位图之前进行。
添加某种事件处理来更改位置，例如实现 onClickListener 并监听点击事件。当您收到点击事件时，只需将位置加 1，以便 A->B、B->C、C->A 等等。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接