Question

我使用自定义开关来支持API 8.我使用THIS Libarary进行自定义切换。但我想制作像图中显示的东西。我试图改变颜色，虽然改变了风格的颜色，但并没有像我想的那样有效。

enter image description here

请帮助我，提前致谢。

Answer 1

这是一个完整的，有效的解决方案，在实现了这个有趣的一天之后。

使用以下命令设置开关轨道的drawable。轨道是拇指左右滑动的容器。

mMessengerSwitch.setTrackDrawable(new SwitchTrackTextDrawable(this,
        "LEFT", "RIGHT"));

这是SwitchTrackTextDrawable的实现，它将背景中的文本准确地写在正确的位置（好吧，我只在Nexus 5上测试了它的API 23）：

/**
 * Drawable that generates the two pieces of text in the track of the switch, one of each
 * side of the positions of the thumb.
 */
public class SwitchTrackTextDrawable extends Drawable {

    private final Context mContext;

    private final String mLeftText;

    private final String mRightText;

    private final Paint mTextPaint;

    public SwitchTrackTextDrawable(@NonNull Context context,
            @StringRes int leftTextId,
            @StringRes int rightTextId) {
        mContext = context;

        // Left text
        mLeftText = context.getString(leftTextId);
        mTextPaint = createTextPaint();

        // Right text
        mRightText = context.getString(rightTextId);
    }

    private Paint createTextPaint() {
        Paint textPaint = new Paint();
        //noinspection deprecation
        textPaint.setColor(mContext.getResources().getColor(android.R.color.white));
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);
        // Set textSize, typeface, etc, as you wish
        return textPaint;
    }

    @Override
    public void draw(Canvas canvas) {
        final Rect textBounds = new Rect();
        mTextPaint.getTextBounds(mRightText, 0, mRightText.length(), textBounds);

        // The baseline for the text: centered, including the height of the text itself
        final int heightBaseline = canvas.getClipBounds().height() / 2 + textBounds.height() / 2;

        // This is one quarter of the full width, to measure the centers of the texts
        final int widthQuarter = canvas.getClipBounds().width() / 4;
        canvas.drawText(mLeftText, 0, mLeftText.length(),
                widthQuarter, heightBaseline,
                mTextPaint);
        canvas.drawText(mRightText, 0, mRightText.length(),
                widthQuarter * 3, heightBaseline,
                mTextPaint);
    }

    @Override
    public void setAlpha(int alpha) {
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

Answer 2

尝试使用

android:textOn="On"
android:textOff="Off"

而不是

android:text="On"

在交换机中

。

如果有帮助，您也可以浏览this。

Answer 3

在努力寻找合适的解决方案之后，我找到了neat little library。我发现它易于使用，完全满足了我的需求。它甚至可以用于显示更多而不是2个值。

更新：同时此库已停止维护，因此您可能需要尝试one they recommend。

这就是我最终看起来更像造型的方式，比如白色边框，我把FrameLayout包裹起来（我需要让它看起来像这样，你不需要使用边界）：

这是xml：

<FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="1dp"
            android:background="@drawable/white_border">

            <belka.us.androidtoggleswitch.widgets.ToggleSwitch
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                custom:activeBgColor="@color/white"
                custom:activeTextColor="@color/black"
                custom:inactiveBgColor="@color/black"
                custom:inactiveTextColor="@color/white"
                custom:textToggleLeft="left"
                custom:textToggleRight="right"/>
        </FrameLayout>

@drawable/white_border看起来像这样：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@android:color/transparent" />
<stroke android:width="2dip"
    android:color="@color/white" />
<corners
    android:radius="3dp"/>

Answer 4

我在这个布局中创建了一个包含线性布局的自定义布局（将用作开关的轨道）我放置了两个文本来模拟轨道＆＃34; on＆＃34; /＆＃34; off＆＃ 34;文本，除此之外，它有一个常规的开关，但没有轨道，只有一个透明轨道的拇指。

无论如何这是代码：

colors.xml

<color name="switch_selected_text_color">#FFFFFF</color>
<color name="switch_regular_text_color">#A8A8A8</color>

settings_switch_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/switch_selected_text_color" android:state_checked="true" />
    <item android:color="@color/switch_regular_text_color" />
</selector>

styles.xml

<style name="SwitchTextAppearance" parent="@android:style/TextAppearance.Holo.Small">
    <item name="android:textColor">@color/settings_switch_color_selector</item>
</style>

new_switch.xml - 在自定义视图中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/track_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/settings_track"
        android:weightSum="1">

        <TextView
            android:id="@+id/left_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textColor="@color/switch_regular_text_color"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="OFF" />

        <TextView
            android:id="@+id/right_text"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:textColor="@color/switch_regular_text_color"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="ON" />
    </LinearLayout>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/thumb_selector"
        android:switchTextAppearance="@style/SwitchTextAppearance"
        android:textOn="ON"
        android:textOff="OFF"
        android:checked="true"
        android:showText="true"
        android:track="@android:color/transparent"/>
</RelativeLayout>

这是自定义视图 - 它只是用于充气自定义视图布局

public class DoubleSidedSwitch extends RelativeLayout {

    private TextView _leftTextView;
    private TextView _rightTextView;
    private Switch   _switch;

    public DoubleSidedSwitch(Context context) {
        super(context);
        init(context);
    }

    public DoubleSidedSwitch(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.new_switch, this, true);
        initViews(view);
        initListeners();
    }

    private void initListeners() {

    }

    private void initViews(View view) {

    }
}

Answer 5

有一个由2个标准按钮和一个LinearLayout制作。有大量的xml文件要导入，但它在所有版本上都很完美，而且非常易于使用。检查以下Github页面

Custom Switch With 2 Buttons

使用

将res / drawable下的XML文件复制到项目的res / drawable文件夹中。
将LinearLayout从layout.xml复制到您的布局文件。
将值/ colors.xml和values / dimens中的值复制到您自己的文件中。
使用以下代码

SekizbitSwitch mySwitch = new SekizbitSwitch(findViewById(R.id.sekizbit_switch));
            mySwitch.setOnChangeListener(new SekizbitSwitch.OnSelectedChangeListener() {
                @Override
                public void OnSelectedChange(SekizbitSwitch sender) {
                    if(sender.getCheckedIndex() ==0 )
                    {
    					System.out.println("Left Button Selected");
                    }
                    else if(sender.getCheckedIndex() ==1 )
                    {
                        System.out.println("Right Button Selected");
                    }
                }
            });

Android文本应该出现在Switch的两侧

5 个答案:

使用