Android文本应该出现在交换机的两侧

我使用自定义开关来支持API 8.我正在使用这个自定义开关Libarary。 但是我想制作一些像图中所示的东西。我试图改变颜色,虽然改变了颜色的样式但是并不影响我想要的。

在这里输入图像说明

请帮助我,在此先感谢。

Solutions Collecting From Web of "Android文本应该出现在交换机的两侧"

这是一个完整的工作解决scheme。

自定义开关示例

使用以下设置交换机轨道的绘图。 轨道是拇指向左和向右滑动的容器。

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

这里是SwitchTrackTextDrawable的实现,它将文本在后台完全写在正确的位置(好吧,我只testing了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; } } 

尝试使用

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

代替

 android:text="On" 

在交换机。

如果有帮助,你也可以通过这个 。

我在这个布局中创build了一个包含线性布局(将用作开关的轨道)的自定义布局,我放置了两个文本来模拟轨道上的“开”/“关”文本,在它上面有一个常规的开关,但没有一个轨道,只是一个透明的轨道拇指。

无论如何,这是代码:

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) { } } 

有一个由2个标准button和一个LinearLayout组成。 有一堆xml文件导入,但它在所有版本上都很完美,而且非常易于使用。 检查下面的Github页面

自定义开关2个button

用法

  1. 将res / drawable下的XML文件复制到项目的res / drawable文件夹中。
  2. 将LinearLayout从layout.xml复制到布局文件。
  3. 将values / colors.xml和values / dimens中的值复制到您自己的文件中。
  4. 用下面的代码启动交换机

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"); } } });