将按钮与 editText 对齐答案

【问题标题】：Align a button with an editText将按钮与 editText 对齐
【发布时间】：2014-08-19 09:04:07
【问题描述】：

我想将 Button 与 EditText 对齐。更准确地说，我想将带有 id= signinButton 的按钮与edittext对齐 id= 密码EditText。 editText 有 padding = "8dp"。我想按钮是根据填充对齐的。布局文件如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/nitos_background_color"
    tools:context="${packageName}.${activityClass}" >




         <EditText
              android:id="@+id/usernameEditText"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_marginLeft="15dp"
              android:layout_marginRight="15dp"
              android:layout_marginBottom="30dp"
              android:layout_marginTop="40dp"
              android:padding="8dp"
              android:ems="10"
              android:inputType="text" 
              android:hint="@string/username"
              android:background="#ffffff">
         <requestFocus />
        </EditText>





           <EditText
               android:id="@+id/passwordEditText"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:layout_below="@+id/usernameEditText"
               android:layout_marginRight="15dp"
               android:layout_marginBottom="28dp"
               android:padding="8dp"
               android:layout_alignLeft="@+id/usernameEditText"
               android:ems="10"
               android:inputType="textPassword" 
               android:hint="@string/password"
               android:background="@color/white_background"/>

               <Button
                android:id="@+id/signinButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/passwordEditText"
                android:layout_alignLeft="@+id/passwordEditText"
                android:layout_alignRight="@+id/passwordEditText"
                android:layout_marginBottom="20dp"
                android:text="@string/signin" />

             <CheckBox 
                 android:id="@+id/keep_me_signed_in_checkbox"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_below="@+id/signinButton"
                 android:layout_alignLeft="@+id/signinButton"
                 android:text="@string/keep_me_signed_in"
                 style="@style/CustomFontStyleText"
                 android:textSize="@dimen/checkbox_text_size"/>

  </RelativeLayout>

最终画面是：

如您所见，按钮与上面的 EditText 并没有完全对齐。

【问题讨论】：

对这种设计使用线性布局。
我认为这是因为您在editText中设置了marginRight和Left，但没有在Button上设置。

标签： android android-layout android-edittext android-button android-relativelayout

【解决方案1】：

试试这个..

这是默认的 Android Button 背景，这就是它显示的原因，您可以将 自定义背景 像 EditText 一样设置为 Button

android:background="@color/white_background"

这将正确显示。

【讨论】：

【解决方案2】：

我认为这是因为默认按钮背景样式具有内部填充（透明区域）。这些视图的框架正确对齐，但在视觉上存在差异。要解决此问题，您可以将按钮的layout_marginLeft 和layout_marginRight 属性设置为略微负值，例如-5dp 并进行比较。或者指定一个自定义按钮背景，周围没有透明区域。

【讨论】：

【解决方案3】：

我使用linearLayout解决了这个问题，正如评论中提到的pratik。解决方案：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/nitos_background_color" >

       <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="15dp" > 


        <EditText
              android:id="@+id/usernameEditText"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:layout_marginTop="40dp"
              android:layout_marginBottom="30dp"
              android:padding="8dp"
              android:ems="10"
              android:inputType="text" 
              android:hint="@string/username"
              android:background="#ffffff">

           </EditText>


             <EditText
               android:id="@+id/passwordEditText"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:layout_marginBottom="30dp"
               android:padding="8dp"
               android:ems="10"
               android:inputType="textPassword" 
               android:hint="@string/password"
               android:background="@color/white_background"/>

               <Button
                android:id="@+id/signinButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:background="@color/light_blue_color"
                android:text="@string/signin" />

              <CheckBox 
                 android:id="@+id/keep_me_signed_in_checkbox"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/keep_me_signed_in"
                 style="@style/CustomFontStyleText"
                 android:textSize="@dimen/checkbox_text_size"/>



           <ImageView
               android:id="@+id/nitlabImageView"
               android:layout_width="230dp"
               android:layout_height="200dp"
               android:layout_gravity="center_horizontal"
               android:layout_marginTop="30dp"
               android:contentDescription="@string/nitlab_image"
               android:src="@drawable/nitlab_letters" />

</LinearLayout>
</ScrollView>

最终画面是：

【讨论】：