如何创建具有单个边框的相邻材质按钮

Question

我想让两个 Material Buttons 直接相邻，它们之间有一个 1dp 宽的分隔线 like this (imgur)。

我尝试在按钮上设置自定义背景可绘制对象，但 Material Buttons no longer allow this.

我的下一个尝试是使用 Material Buttons 的 stroke 属性，但我找不到将笔划应用于单边的方法。

我还尝试在按钮之间插入一个 1dp 宽的视图，这可能是一个解决方案，但我无法以编程方式设置该视图的高度和位置，而不会变得太复杂。

这两个按钮当前位于 ConstraintLayout 中，但我也尝试将它们嵌套在 ConstraintLayout 内的 RelativeLayout 中。

这是在 RelativeLayout 中的尝试：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:id="@+id/registration_cl">

    <RelativeLayout
        android:id="@+id/signin_social_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/signin_btn_back">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_facebook"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginBottom="8dp"
            android:backgroundTint="#525352"
            android:backgroundTintMode="screen"
            android:fontFamily="@font/proximanova"
            android:padding="15dp"
            android:text="Facebook"
            android:textAllCaps="false"
            android:textColor="@color/white_ffffff"
            android:textSize="18sp"
            app:icon="@drawable/ic_facebook_icon_fb_socialshare_"
            app:iconTint="@color/white_ffffff"
            tools:alpha="1" />

        <View
            android:id="@+id/signin_social_div"
            android:layout_width="1dp"
            android:layout_height="50dp"
            android:backgroundTint="@color/white_ffffff"
            android:background="@color/white_ffffff"
            android:layout_toEndOf="@id/signin_btn_facebook"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_google"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:layout_toEndOf="@id/signin_social_div"
            android:backgroundTint="#525352"
            android:backgroundTintMode="screen"
            android:fontFamily="@font/proximanova"
            android:padding="15dp"
            android:text="Google"
            android:textAllCaps="false"
            android:textColor="@color/white_ffffff"
            android:textSize="18sp"
            app:iconSize="8dp"
            tools:alpha="1" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

除了在按钮之间以编程方式调整和定位视图之外，我还希望有一个更简单的解决方案来添加单边边框。

Answer 1

您的视图不受RelativeLayout 的限制，这就是View 占满高度的原因。相反，使用LinearLayout 来实现结果会容易得多。以下代码应该会有所帮助：

<androidx.constraintlayout.widget.ConstraintLayout ...>

    <LinearLayout
        android:id="@+id/signin_social_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/signin_btn_back">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_facebook"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            ... />

        <View
            android:id="@+id/signin_social_div"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            ... />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_google"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            ... />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

使用LinearLayout 而不是RelativeLayour 也会使渲染速度更快。希望对您有所帮助！

Answer 2

这不是您正在寻找的，但它非常简单。
您可以执行以下操作：

<com.google.android.material.button.MaterialButton
    app:strokeWidth="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON 1"
    />

<View
    android:layout_width="1dp"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"/>

<com.google.android.material.button.MaterialButton
    app:strokeWidth="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON 2"
    />

您可以使用strokeWidth=0dp 移除边框，您可以使用shapeAppearanceOverlay 属性应用不同的圆角半径（它需要1.1.0 版本）。

  <style name="ShapeAppearanceOverlay.Button.Left" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">0dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">16dp</item>
  </style>

  <style name="ShapeAppearanceOverlay.Button.Right" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomRight">16dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

最终结果：