您可以根据需要设计定制开关。
轨道和拇指设计之间的空间面临问题以显示我的轨道设计
(空间黑白轨道和拇指设计面临的问题)
我需要这个看起来像 iOS lib 的东西https://github.com/gmarm/BetterSegmentedControl https://github.com/gmarm/BetterSegmentedControl
所以我确实喜欢那样
我的方法很简单,看下面的代码。在RelativeLayout背景上添加了第一个轨道设计(您可以使用您喜欢的布局)。如果需要,轨道将是透明的或变为白色。只需设计您需要的拇指即可。
活动_main.xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="33dp"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="10dp"
android:layout_marginVertical="80dp"
android:background="@drawable/bg_switch"
android:padding="2.5dp">
<androidx.appcompat.widget.SwitchCompat
android:id="@+id/switchOnOff"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:checked="true"
android:textColor="@color/white"
android:thumb="@drawable/thumb_selector"
app:switchMinWidth="140dp"
app:track="@drawable/track_selector" />
<LinearLayout
android:layout_width="140dp"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="@+id/tvSwitchYes"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="Yes"
android:textColor="#4282DC"
android:textSize="12sp" />
<TextView
android:id="@+id/tvSwitchNo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="No"
android:textColor="@color/white"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
可绘制文件中的 bg_switch.xml 。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/white" />
<corners android:radius="6dp" />
<stroke
android:width="1dp"
android:color="#4282DC" />
</shape>
可绘制文件中的thumb_selector.xml。
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape
android:dither="true" android:shape="rectangle"
android:useLevel="false" android:visible="true">
<solid android:color="#4282DC" />
<corners android:radius="6dp" />
<size
android:width="70dp"
android:height="30dp" />
</shape>
</item>
</selector>
可绘制文件中的 track_selector.xml。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle"
android:useLevel="false" android:visible="true">
<solid android:color="@color/white" />
<corners android:radius="6dp" />
<size android:width="100dp"
android:height="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle"
android:useLevel="false" android:visible="true" >
<corners android:radius="6dp" />
<size
android:width="100dp"
android:height="30dp" />
<solid android:color="@color/white" />
</shape>
</item>
</selector>
MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var switchOnOff: SwitchCompat
private lateinit var tvSwitchYes: TextView
private lateinit var tvSwitchNo: TextView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
switchOnOff = findViewById<SwitchCompat>(R.id.switchOnOff)
tvSwitchYes = findViewById<TextView>(R.id.tvSwitchYes)
tvSwitchNo = findViewById<TextView>(R.id.tvSwitchNo)
switchOnOff.setOnCheckedChangeListener { _, checked ->
when {
checked -> {
tvSwitchYes.setTextColor(ContextCompat.getColor(this,R.color.blue_color))
tvSwitchNo.setTextColor(ContextCompat.getColor(this,R.color.white))
}
else -> {
tvSwitchYes.setTextColor(ContextCompat.getColor(this,R.color.white))
tvSwitchNo.setTextColor(ContextCompat.getColor(this,R.color.blue_color))
}
}
}
}
}