如何将 Material 按钮与其他 UI 元素对齐

Question

我无法将默认材质按钮与 UI 的其他元素对齐。事实上，我已经查看了 Android 源代码，并且按钮的背景包含能够绘制阴影并在单击时处理按钮高度的插图：

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/abc_button_inset_horizontal_material"
   android:insetTop="@dimen/abc_button_inset_vertical_material"
   android:insetRight="@dimen/abc_button_inset_horizontal_material"
   android:insetBottom="@dimen/abc_button_inset_vertical_material">
   <shape android:shape="rectangle">
        <corners android:radius="@dimen/abc_control_corner_material" />
        <solid android:color="@android:color/white" />
        <padding android:left="@dimen/abc_button_padding_horizontal_material"
             android:top="@dimen/abc_button_padding_vertical_material"
             android:right="@dimen/abc_button_padding_horizontal_material"
             android:bottom="@dimen/abc_button_padding_vertical_material" />
    </shape>
</inset>

所以，我有以下非常基本的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    >
    <View
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#123456"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="test button alignment"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#123456"
        />
</LinearLayout>

如您所见，按钮的左边缘未与其他视图的左边缘对齐。

所以我的问题是，有没有办法在不丢失默认 Android 按钮开箱即用处理的阴影/高程的情况下摆脱这些插图，以使 UI 对齐良好？

谢谢！

Answer 1

还涉及到命中区域。按钮的可点击区域比图形更大。

您的布局已经有填充，所以按钮很容易有空间来绘制阴影。您所要做的就是从按钮的背景中删除水平插图。

一般情况更复杂。你应该：

• 从按钮的背景中移除插图，
• 请记住始终在小部件周围添加一些填充/边距，以便为阴影留出空间，
• 扩展点击矩形以捕获整个可点击区域的点击。

前两件事很简单，最后一点可以使用 getHitRect() 来完成：

 public void getHitRect(@NonNull Rect outRect) { 
     if (touchMargin == null) { 
         super.getHitRect(outRect); 
         return; 
     } 
     outRect.set(getLeft() - touchMargin.left, getTop() - touchMargin.top, getRight() + touchMargin.right, getBottom() + touchMargin.bottom); 
 } 

您的情况也很容易使用 Carbon 来解决（它几乎完成了我所写的 - 删除插图，添加自定义命中 rect）：

<?xml version="1.0" encoding="utf-8"?>
<carbon.widget.LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#123456" />

    <carbon.widget.Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="test button alignment" />

    <View
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#123456" />
</carbon.widget.LinearLayout>

这是在调试模式下的外观。红线显示扩展命中矩形。绿线是视图边界。

Answer 2

请查看以下 xml，我添加了值android:layout_marginLeft="-4dip"

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

<View
    android:id="@+id/te"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#123456" />

<Button
    android:id="@+id/bu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/te"
    android:text="test button alignment"
    android:layout_marginLeft="-4dip"
    />

<View
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#123456"
    android:layout_below="@+id/bu"
    />
</RelativeLayout>