如何对准其他UI元素材质按钮 [英] How to align Material buttons with other UI elements

问题描述

我有麻烦对齐默认材质按键与UI的其他元素。其实我已经看过了Android源$ C ​​$ C以及按钮背景插图包含要能够绘制阴影和处理按钮的点击标高时：

I have trouble to align default material buttons with other elements of the UI. In fact I have looked at the Android source code and the background for the buttons contains insets to be able to draw the shadow and deal with the elevation of the button when clicked:

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

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

So, I have the very basic layout below:

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

正如你所看到的，按钮的左边缘不与其他视图左侧边缘对齐。

And as you can see, the left edge of the button is not aligned with the left edges of the other views.

所以我的问题是，有没有办法来摆脱这些插图的而不失去默认的Andr​​oid按键开箱处理的影子/仰角有UI完全一致？

So my question is, is there a way to get rid of these insets without loosing the shadow/elevation handled out of the box by default Android buttons to have the UI well aligned?

谢谢！

推荐答案

有也创下涉及区域的事情。按键比图形更大的点击区域。

There's also hit area thing involved. Buttons have larger clickable area than the graphics.

您已经布局了填充，使按键容易有空间来绘制阴影。所有你需要做的是从按钮的背景中消除插图水平

Your layout already has padding, so the button will easily have space to draw shadow. All you have to do is to remove horizontal insets from button's background.

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

The general case is more complex. You should:

• 从按钮的背景插图删除，


• 请记住对周围添加小部件一些填充/保证金，以留出空间阴影，


• 扩展打矩形捕捉到整个可点击区域点击。

一两件事情很简单，最后一点可以通过例如getHitRect（）来完成：

First two things are simple, the last point can be done using for example 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); 
 } 

您的情况下也很容易用碳来解决（它pretty很多我写的 - 删除镶石，增加了自定义的矩形击）：

Your case is also very easy to solve using Carbon (which does pretty much what I wrote - removes insets, adds custom hit 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>

这是它的外观与调试模式。红色线条显示扩展命中正确。绿线视图边界。

And here's how it looks with debug mode on. Red lines show extended hit rect. Green lines are view bounds.

这篇关于如何对准其他UI元素材质按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！