如何在 android 中自定义切换按钮?
How to customize toggle button in android?
我一直在尝试自定义切换按钮使其看起来像这样,但我似乎没有任何进展。
任何人都可以给我一个想法或任何类型的设计教程吗?
这就是你要找的吗:
先创建一个ToggleButton
XML :
<ToggleButton
android:id="@+id/follow"
android:layout_width="120dp"
android:layout_height="35dp"
android:layout_centerInParent="true"
android:background="#61849f"
android:checked="false"
android:drawableStart="@drawable/ic_baseline_star_24"
android:elevation="0dp"
android:gravity="center"
android:padding="8dp"
android:textColor="#fff"
android:textOff=" FOLLOW "
android:textOn=" FOLLOWING " />
Java :
toggleButton = findViewById(R.id.follow);
toggleButton.setOnCheckedChangeListener((buttonView, isChecked) -> {
if (isChecked) setUnfollow();
else setFollow();
});
setFollow
& setUnfollow
方法:
private void setUnfollow() {
toggleButton.setChecked(true);
toggleButton.setTextColor(Color.BLACK);
toggleButton.setBackgroundColor(Color.WHITE);
toggleButton.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.border));
}
private void setFollow() {
toggleButton.setChecked(false);
toggleButton.setTextColor(Color.WHITE);
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.fill));
toggleButton.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_baseline_star_24, 0, 0, 0);
}
最后 fill.XML 和 bordre.XML(在 drawable 文件夹中创建这些文件)
Border.XML :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#61849f" />
</shape>
Fill.XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#61849f" />
</shape>
我一直在尝试自定义切换按钮使其看起来像这样,但我似乎没有任何进展。
任何人都可以给我一个想法或任何类型的设计教程吗?
这就是你要找的吗:
先创建一个ToggleButton
XML :
<ToggleButton
android:id="@+id/follow"
android:layout_width="120dp"
android:layout_height="35dp"
android:layout_centerInParent="true"
android:background="#61849f"
android:checked="false"
android:drawableStart="@drawable/ic_baseline_star_24"
android:elevation="0dp"
android:gravity="center"
android:padding="8dp"
android:textColor="#fff"
android:textOff=" FOLLOW "
android:textOn=" FOLLOWING " />
Java :
toggleButton = findViewById(R.id.follow);
toggleButton.setOnCheckedChangeListener((buttonView, isChecked) -> {
if (isChecked) setUnfollow();
else setFollow();
});
setFollow
& setUnfollow
方法:
private void setUnfollow() {
toggleButton.setChecked(true);
toggleButton.setTextColor(Color.BLACK);
toggleButton.setBackgroundColor(Color.WHITE);
toggleButton.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.border));
}
private void setFollow() {
toggleButton.setChecked(false);
toggleButton.setTextColor(Color.WHITE);
toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.fill));
toggleButton.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_baseline_star_24, 0, 0, 0);
}
最后 fill.XML 和 bordre.XML(在 drawable 文件夹中创建这些文件)
Border.XML :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#61849f" />
</shape>
Fill.XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#61849f" />
</shape>