在 Android 中使用 layout_weight 时图像对齐无法正常工作

Question

我将设计我的应用程序的仪表板，其中有几个 menus/buttons。菜单使用一些图像表示。菜单分为 4 列。首先，每列包含两个菜单，第四列包含三个。画面设计如下图：

现在为了开发这个，我尝试了 Linearlayout 和 layout_weight。但是我无法放置它们并且图像被拉长了。我使用了以下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/mumbaibg"
android:orientation="vertical"
android:weightSum="3" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/newcar" />

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="@android:color/white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/usedcar" />
    </LinearLayout>
</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/white" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/carloan" />

         <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="@android:color/white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/service" />
    </LinearLayout>
</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/white" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/sos" />

         <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="@android:color/white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/learndrive" />
    </LinearLayout>
</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="@android:color/white" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

     <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/insurance" />

         <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="@android:color/white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/rtofinelist" />

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="@android:color/white" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:background="@drawable/newsoffer" />
    </LinearLayout>
</LinearLayout>

图像被放置在每一列上，但它们被拉伸了。我尝试使用 .9patch 图像并将图像放在不同的可绘制文件夹中。

使用当前代码，屏幕如下所示：

谁能给我一个更好更简单的解决方案来实现这个目标。

谢谢，阿林丹.

Answer 1

删除布局中的这两个属性： android:scaleType="fitCenter" android:adjustViewBounds="true" 他们负责拉伸。

然后您将希望获得右对齐的图像。将 layout_gravity 设置为居中，这应该会将图像对齐到相应网格的中间。

Answer 2

具有直接子视图的父 LinearLayout 需要指定 android:weightSum="3" 属性。子视图已经有相应的 android:layout_weight="1" - 这样很好。但是父属性不存在，因此系统不知道如何为子视图正确分配 space。

Answer 3

为了使缩放按预期工作，您需要为水平布局设置 android:layout_width="0dp"，为垂直布局设置 android:layout_height="0dp"。

编辑，这里是实现设计的代码示例：

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.25"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_favorite" />
</LinearLayout>

在 Android 中使用 layout_weight 时图像对齐无法正常工作

Image alignment is not working properly when using layout_weight in Android

layout

android

imageview

android-layout