Android LinearLayout 高度与元素的宽度不成比例

Question

我想在任何屏幕尺寸上将我的 5 个按钮均匀地排成一行。为此，我做了以下布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_background_v3"
    tools:context="com.magnifi.pennantrace.training.TrainingSelectFragment">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="5"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent">
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_stretch"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_mechanics"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_cardio"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_weights"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@mipmap/training_batfield"
                android:layout_weight="1"/>
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>
</FrameLayout>

它达到了我的要求，但现在高度不正确。所有按钮图像均为正方形。这是我得到的：

如何设置合适的高度（与按钮宽度成比例）？

Answer 1

将下面编写的代码替换为您的代码将解决您的问题。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/main_background_v3"
tools:context="com.magnifi.pennantrace.training.TrainingSelectFragment">
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="5"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@mipmap/training_stretch"
            android:layout_weight="1"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@mipmap/training_mechanics"
            android:layout_weight="1"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@mipmap/training_cardio"
            android:layout_weight="1"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@mipmap/training_weights"
            android:layout_weight="1"/>
        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@mipmap/training_batfield"
            android:layout_weight="1"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

Answer 2

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_background_v3"
    tools:context="com.magnifi.pennantrace.training.TrainingSelectFragment">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="5"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent">
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_stretch"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_mechanics"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_cardio"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_weights"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
            <ImageButton
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@mipmap/training_batfield"
                android:background="@android:color/transparent"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_weight="1"/>
        </LinearLayout>
    </android.support.constraint.ConstraintLayout>

    </FrameLayout>

Answer 3

如果您使用线性布局和权重，请不要忘记填充所有必要的文件夹：xxxhdpi、xxhdpi、xhdpi、hdpi、mdpi！

Android LinearLayout 高度与元素的宽度不成比例

Android LinearLayout height is not proportional to element's width

height

android

android-layout

android-linearlayout