如何在android中设计自定义开关,如下图所示:
当它打开时,它需要看起来像这样
我还需要在两个类别之间切换时显示切换动画效果。我怎样才能实现它?是否有任何 3rd 方 SDK 或库可用?目前我已经设计了一个自定义的线性布局,如下所示:
my_layout.xml:
<LinearLayout
android:id="@+id/customSliderLayout"
android:layout_width="@dimen/_200sdp"
android:layout_height="@dimen/_39sdp"
android:layout_centerInParent="true"
android:orientation="horizontal"
android:weightSum="2"
android:background="@drawable/oval_layout_bg"
android:layout_centerHorizontal="true">
<Button
android:id="@+id/userBtn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textAllCaps="false"
android:text="@string/toggle_user"
android:textSize="@dimen/_18sdp"
android:textColor="@color/black_textcolor"
android:background="@drawable/back"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAllCaps="false"
android:textColor="@color/textcolor_white"
android:textSize="@dimen/_16sdp"
android:gravity="center"
android:text="@string/toggle_doctor"/>
</LinearLayout>
但我需要设计一个拨动开关。
我还检查了这个库:
https://github.com/gmarm/BetterSegmentedControl
但这仅适用于 iOS,不适用于 Android。我需要与链接中的第二个开关完全一样。
最佳答案
这有点棘手,因为你不能在轨道上写任何东西,所以你需要一个文本 View 来显示轨道上的文本,并在需要时简单地改变它的位置。
准备好您的形状或图像,然后在约束布局中设置开关和文本 View ...将它们匹配在您需要它们的同一位置,然后查找代码,当开关打开/关闭时,将文本 View 移动到另一侧...哈哈完美地工作......
和拇指文本:
cSwitch.setTextOn("doctor");
cSwitch.setTextOff("user");
我知道它有很大的改进空间,但我就是这样做的,您可以将形状的宽度和高度更改为...
这是我的代码我没有做你需要的东西哈哈你必须自己做哈哈
我希望这有帮助..干杯
enter image description here
enter image description here
切换轨道形状
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="11mm"
android:height="4.2mm">
<shape android:shape="rectangle">
<corners android:radius="3.7mm" />
<stroke
android:width="0.3mm"
android:color="@color/white" />
<solid android:color="@color/green" />
</shape>
</item>
</layer-list>
切换拇指形状
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="4.2mm"
android:height="4.2mm" />
<corners android:radius="2mm" />
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#bdf7b8" />
</shape>
布局 XML 代码
<android.support.constraint.ConstraintLayout
android:id="@+id/signInLayout"
style="@style/LayoutStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginTop="16dp">
<Switch
android:id="@+id/cSwitch"
android:layout_width="wrap_content"
android:layout_height="4mm"
android:switchMinWidth="11mm"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/cSwitch_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2mm"
android:layout_marginStart="2mm"
android:text="ON"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="@id/cSwitch"
app:layout_constraintLeft_toLeftOf="@+id/cSwitch"
app:layout_constraintTop_toTopOf="@id/cSwitch" />
</android.support.constraint.ConstraintLayout>
和java代码
final Switch cSwitch = rootView.findViewById(R.id.cSwitch);
final TextView cSwitchText = rootView.findViewById(R.id.cSwitch_textView);
cSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
ConstraintLayout constraintLayout = rootView.findViewById(R.id.signInLayout);
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(constraintLayout);
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.TOP, R.id.cSwitch, ConstraintSet.TOP, 0);
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.BOTTOM, R.id.cSwitch, ConstraintSet.BOTTOM, 0);
cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_green));
if (isChecked) {
cSwitchText.setText("ON");
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, R.id.cSwitch, ConstraintSet.LEFT, 0);
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, ConstraintSet.UNSET, ConstraintSet.RIGHT, 0);
cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_green));
} else {
cSwitchText.setText("OFF");
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, R.id.cSwitch, ConstraintSet.RIGHT, 0);
constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, ConstraintSet.UNSET, ConstraintSet.LEFT, 0);
cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_red));
cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_red));
}
constraintSet.applyTo(constraintLayout);
}
});
关于android - 如何在 android 中创建自定义开关,并在开关轨道两侧显示文本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55028892/