如何创建自定义形状按钮背景?
How to create a custom shape button background?
我正在尝试为我的按钮制作自定义背景(简单),但它显示不正确。它只显示以下输出。
创建房间(btn_create_room_bg) :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners
android:bottomLeftRadius="360dp"
android:topLeftRadius="360dp" />
<solid android:color="@color/colorAccent" />
</shape>
</item>
</layer-list>
加入房间(btn_join_room_bg):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="360dp"
android:topRightRadius="360dp" />
<solid android:color="@color/colorPrimary" />
</shape>
</item>
</layer-list>
按钮代码:
这是我的线性布局的双按钮代码。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="300dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="300dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:layout_weight="5"
android:background="@drawable/btn_create_room_bg"
android:fontFamily="@font/open_sans_bold"
android:text="@string/landing_btn_create_room"
android:textAllCaps="false"
android:textColor="@color/colorWhite" />
<Button
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:layout_weight="5"
android:background="@drawable/btn_join_room_bg"
android:fontFamily="@font/open_sans_bold"
android:text="@string/landing_btn_join_room"
android:textAllCaps="false"
android:textColor="@color/colorWhite" />
</LinearLayout>
我需要这样的输出。
您可以使用 MaterialButton
.
构建自定义 CornerTreatment
您可以扩展默认 CutCornerTreatment
:
public class FullCutCornerTreatment extends CutCornerTreatment {
protected static final float ANGLE_LEFT = 180;
public FullCutCornerTreatment() {
super();
}
@Override
public void getCornerPath(
@NonNull ShapePath shapePath, float angle, float interpolation, float radius) {
shapePath.reset(0, 2*radius * interpolation, ANGLE_LEFT, 180 - angle);
shapePath.lineTo(
(float) (Math.sin(Math.toRadians(angle)) * radius * interpolation),
(float) (Math.sin(Math.toRadians(90 - angle)) * radius * interpolation));
}
}
然后只需将 CornerTreatment
应用到 Button
:
MaterialButton materialButton = findViewById(R.id....);
FullCutCornerTreatment customCutCornerTreatment = new FullCutCornerTreatment();
materialButton.setShapeAppearanceModel(materialButton.getShapeAppearanceModel().toBuilder()
//Standard rounded corner with corner radius=50%
.setTopLeftCorner(CornerFamily.ROUNDED,new RelativeCornerSize(0.5f))
.setBottomLeftCorner(CornerFamily.ROUNDED,new RelativeCornerSize(0.5f))
//Square angle
.setTopRightCorner(CornerFamily.ROUNDED,0)
//Full cut corner
.setBottomRightCorner(customCutCornerTreatment)
.setBottomRightCornerSize(new RelativeCornerSize(0.5f))
.build());
关于 new RelativeCornerSize(0.5f)
的注释:它在 1.2.0-beta01
中发生了变化。之前是 new RelativeCornerSize(50))
.
我正在尝试为我的按钮制作自定义背景(简单),但它显示不正确。它只显示以下输出。
创建房间(btn_create_room_bg) :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners
android:bottomLeftRadius="360dp"
android:topLeftRadius="360dp" />
<solid android:color="@color/colorAccent" />
</shape>
</item>
</layer-list>
加入房间(btn_join_room_bg):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:bottomRightRadius="360dp"
android:topRightRadius="360dp" />
<solid android:color="@color/colorPrimary" />
</shape>
</item>
</layer-list>
按钮代码: 这是我的线性布局的双按钮代码。
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="300dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="300dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:layout_weight="5"
android:background="@drawable/btn_create_room_bg"
android:fontFamily="@font/open_sans_bold"
android:text="@string/landing_btn_create_room"
android:textAllCaps="false"
android:textColor="@color/colorWhite" />
<Button
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:layout_weight="5"
android:background="@drawable/btn_join_room_bg"
android:fontFamily="@font/open_sans_bold"
android:text="@string/landing_btn_join_room"
android:textAllCaps="false"
android:textColor="@color/colorWhite" />
</LinearLayout>
我需要这样的输出。
您可以使用 MaterialButton
.
CornerTreatment
您可以扩展默认 CutCornerTreatment
:
public class FullCutCornerTreatment extends CutCornerTreatment {
protected static final float ANGLE_LEFT = 180;
public FullCutCornerTreatment() {
super();
}
@Override
public void getCornerPath(
@NonNull ShapePath shapePath, float angle, float interpolation, float radius) {
shapePath.reset(0, 2*radius * interpolation, ANGLE_LEFT, 180 - angle);
shapePath.lineTo(
(float) (Math.sin(Math.toRadians(angle)) * radius * interpolation),
(float) (Math.sin(Math.toRadians(90 - angle)) * radius * interpolation));
}
}
然后只需将 CornerTreatment
应用到 Button
:
MaterialButton materialButton = findViewById(R.id....);
FullCutCornerTreatment customCutCornerTreatment = new FullCutCornerTreatment();
materialButton.setShapeAppearanceModel(materialButton.getShapeAppearanceModel().toBuilder()
//Standard rounded corner with corner radius=50%
.setTopLeftCorner(CornerFamily.ROUNDED,new RelativeCornerSize(0.5f))
.setBottomLeftCorner(CornerFamily.ROUNDED,new RelativeCornerSize(0.5f))
//Square angle
.setTopRightCorner(CornerFamily.ROUNDED,0)
//Full cut corner
.setBottomRightCorner(customCutCornerTreatment)
.setBottomRightCornerSize(new RelativeCornerSize(0.5f))
.build());
关于 new RelativeCornerSize(0.5f)
的注释:它在 1.2.0-beta01
中发生了变化。之前是 new RelativeCornerSize(50))
.