java - 如何创建中间带有单个边框的相邻 Material 按钮

Question

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

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

我的下一次尝试是使用 Material 按钮的描边属性，但我找不到将描边应用到单边的方法。

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

这两个按钮当前位于 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>

除了以编程方式调整按钮之间的 View 大小和位置之外，我还希望有一种更简单的解决方案来添加单边边框。

Answer 1

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

<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>

最终结果: