Odd behavior of button in linear layout that has one line of text instead of two

问题

I have a linear layout wrapped in a HorizontalScrollView. Everything seems to be working fine except that one of the buttons in the layout is higher then the rest.

The reason this button seems to be higher then the rest of the buttons is because it only has one line of text instead of two.

Here is a screenshot of the problem:

While the layout is being used for a keyboard service, I do not think that is the problem because in the design tab of the XML layout file this problem still occurs.

Here is the layout code for the entire service:

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

    <HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="50dp">

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:id="@+id/tablayout">


    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="What did you say?!"
        android:id="@+id/T_YouSay"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="I identify as a..."
        android:id="@+id/T_Identify"
        android:textSize="12sp"
        android:textAllCaps="false"/>


//This button is the one that is higher then the rest. Notice how
//it is only one line of text instead of two.
    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="That's some..."
        android:id="@+id/Thats_some"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="Here's the thing..."
        android:id="@+id/theThing"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="Other copypastas"
        android:id="@+id/tab_Misc"
        android:textSize="12sp"
        android:textAllCaps="false"/>


</LinearLayout>

</HorizontalScrollView>

So, why is a button with only one line of text higher then the others in this Linear Layout wrapped in a HorizontalScrollView and what can I do to fix it?

回答1:

Add

android:baselineAligned="false"

to your LinearLayout containing the buttons (id == tabLayout).

回答2:

The easy and simple solution is to just add gravity attribute to the LinearLayout of @id/tablayout.

android:gravity="center_vertical"

回答3:

You can use weights to assign equal space to your button. Hard codeding widths might not be a good idea as you your buttons will not be taking advantage of big screens and landscape mode . here is enhanced version of your layout.

<LinearLayout
    android:weightSum="5"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/tablayout">


    <Button
         android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="What did you say?!"
        android:id="@+id/T_YouSay"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
         android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="I identify as a..."
        android:id="@+id/T_Identify"
        android:textSize="12sp"
        android:textAllCaps="false"/>


//This button is the one that is higher then the rest. Notice how
//it is only one line of text instead of two.
    <Button
         android:layout_weight="1"
         android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="That's some..."
        android:id="@+id/Thats_some"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
         android:layout_width="0dp"
         android:layout_weight="1"
        android:layout_height="50dp"
        android:text="Here's the thing..."
        android:id="@+id/theThing"
        android:textSize="12sp"
        android:textAllCaps="false"/>

    <Button
         android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="Other copypastas"
        android:id="@+id/tab_Misc"
        android:textSize="12sp"
        android:textAllCaps="false"/>

</LinearLayout>

</LinearLayout>

Result

来源：https://stackoverflow.com/questions/36658862/odd-behavior-of-button-in-linear-layout-that-has-one-line-of-text-instead-of-two