Android Text 应该出现在 Switch 的两侧
Posted
技术标签:
【中文标题】Android Text 应该出现在 Switch 的两侧【英文标题】：Android Text should appear both side in the Switch 【发布时间】：2014-04-26 21:46:23 【问题描述】：我使用自定义开关来支持 API 8。我使用 THIS Libarary 进行自定义开关。但是我想做一些如图所示的东西。我试图改变颜色，虽然改变了样式中的颜色但没有达到我想要的效果。
请帮助我，在此先感谢。
【问题讨论】：
【参考方案1】：尝试使用
android:textOn="On"
android:textOff="Off"
而不是
android:text="On"
在开关中。
如果有帮助，您也可以通过this。
【讨论】：
是的，我同时使用了android:textOn 和android:textOff，我得到了两个文本，但问题是，它只显示一个文本，而另一个文本同时消失。我想同时显示两者文本是否打开或关闭。因此用户可以看到其他可用选项。
检查该链接。在这种情况下可能会有所帮助。 @MayurRaval【参考方案2】：
这是一个完整的、有效的解决方案，经过有趣的一天实施。
使用以下内容设置开关轨道的可绘制对象。轨道是拇指在其中左右滑动的容器。
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;
【讨论】：
在 KitKat 上试过...没有用。它显示空白屏幕。 @espinchi 您对此有任何更新吗，我正在尝试做同样的事情，如果您对此或其他更好的解决方案有任何更新，请告诉我。 @NikunjSakhrelia：这个drawable只是设置文本。您可以创建一个背景可绘制对象（也许只是在 xml 中，只需创建一个可绘制对象并设置形状和颜色）并像这里指出的那样动态组合它们：***.com/questions/2739971/… @espinchi 您是如何绘制实际图像的？ 代码与图像不匹配。它只是在一侧显示文本，而不是两侧【参考方案3】：我创建了一个自定义布局，其中包含一个线性布局（将用作开关的轨道）在这个布局中我放置了两个文本来模拟轨道“开”/“关”文本，在它之上，它有一个普通的开关，但没有轨道，只有一个带有透明轨道的拇指。
不管怎样，这是代码：
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_
android:layout_>
<LinearLayout
android:id="@+id/track_layout"
android:layout_
android:layout_
android:background="@drawable/settings_track"
android:weightSum="1">
<TextView
android:id="@+id/left_text"
android:layout_
android:layout_
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_
android:layout_
android:textColor="@color/switch_regular_text_color"
android:layout_weight="0.5"
android:gravity="center"
android:text="ON" />
</LinearLayout>
<Switch
android:layout_
android:layout_
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)
【讨论】：
【参考方案4】：有一个由 2 个标准按钮和一个 LinearLayout 组成。有一堆 xml 文件要导入，但它在所有版本上都能完美运行，而且非常易于使用。检查以下 Github 页面
Custom Switch With 2 Buttons
用法
-
将 res/drawable 下的 XML 文件复制到项目的 res/drawable 文件夹中。
将 LinearLayout 从 layout.xml 复制到您的布局文件。
将 values/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");
);【讨论】：
【参考方案5】：在努力寻找合适的解决方案后，我找到了neat little library。我发现它易于使用，并且完美地满足了我的需求。它甚至可以用于显示更多超过 2 个值。
更新：同时这个库已经停止维护，所以你可能想试试one they recommend。
这就是我最终用更多样式使它看起来的方式，比如我在FrameLayout 周围放置了白色边框来包裹它（我需要让它看起来完全像这样，你不需要使用边框） ：
这是用于此的 xml：
<FrameLayout
android:layout_
android:layout_
android:padding="1dp"
android:background="@drawable/white_border">
<belka.us.androidtoggleswitch.widgets.ToggleSwitch
android:layout_
android:layout_
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:
android:color="@color/white" />
<corners
android:radius="3dp"/>
【讨论】：
感谢您对好的库的建议，但如果您想要这种开关，那么现在已经过时了，然后使用：github.com/llollox/Android-Toggle-Switch，它非常相似并且运行良好。 是的，我注意到了。虽然我用过这个没有问题，但是去维护一个可能是一个聪明的主意。我将编辑我的答案。以上是关于Android Text 应该出现在 Switch 的两侧的主要内容，如果未能解决你的问题，请参考以下文章