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

还有涉及区域的事情。按钮的可点击区域比图形大。

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

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

从按钮的背景中删除插图
记住要在小部件周围添加一些填充/边距，以留出阴影空间，
扩展命中rect以捕获整个可点击区域中的点击次数。

前两件事很简单，最后一点可以使用例如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也很容易解决你的情况（我写的很多 - 删除插件，添加自定义命中矩形）：

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

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

2 个答案: