Android

Question

Android 开发人员还很陌生，我在使用 RelativeLayout 时遇到了问题。在下面的 XML 示例中，我希望我的 ImageButton（在右侧，带有“+”）与 RelativeLayout 高度相匹配。然而，它并没有，如此图所示：为什么带有“+”的右键不匹配最大可能高度？

相关代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/artist_cell_background">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_margin="10dp"
    android:src="@drawable/ic_music_note_24dp">
</ImageView>

<ImageButton
    android:id="@+id/artist_button"
    android:src="@drawable/ic_add_24dp"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:background="@drawable/artist_cell_playlist_button_background">
</ImageButton>

<TextView
    android:id="@+id/artist_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/black"
    android:layout_alignParentTop="true"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button">
</TextView>

<TextView
    android:id="@+id/number_of_albums"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:layout_marginBottom="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button"
    android:layout_below="@id/artist_name">
</TextView>

</RelativeLayout>

感谢您的帮助或想法。

编辑：我想要的是右键占据行的高度，即与中间的两个文本区域加上上下边距具有相同的高度，不多也不少。

Answer 1

将您的相对布局放在线性布局中，这样就可以了

<?xml version="1.0" encoding="utf-8"?>
<LinearLaout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/artist_cell_background">
<RelativeLayout 
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_margin="10dp"
    android:src="@drawable/ic_music_note_24dp">
</ImageView>

<ImageButton
    android:id="@+id/artist_button"
    android:src="@drawable/ic_add_24dp"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:background="@drawable/artist_cell_playlist_button_background">
</ImageButton>

<TextView
    android:id="@+id/artist_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/black"
    android:layout_alignParentTop="true"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button">
</TextView>

<TextView
    android:id="@+id/number_of_albums"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:layout_marginBottom="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button"
    android:layout_below="@id/artist_name">
</TextView>

</RelativeLayout>
</LinearLayout>

Answer 2

您的图片可能很小。在 ImageButton.

中使用 android:scaleType="fitCenter"

还可以尝试通过将 ImageButton 设置为 0dp 来删除默认的填充和边距。

Answer 3

正如我从 XML 了解到的，您似乎想让“+”按钮更容易点击。我建议您使用一些填充物，这样就可以了。

编辑 1：您可以在没有填充的情况下执行以下操作，方法是将 ImageView 的顶部和底部与相关的 TextView 对齐

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/artist_cell_background">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_margin="10dp"
    android:src="@drawable/ic_music_note_24dp">
</ImageView>

<TextView
    android:id="@+id/artist_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/black"
    android:layout_alignParentTop="true"
    android:paddingTop="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button">
</TextView>

<TextView
    android:id="@+id/number_of_albums"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:paddingBottom="10dp"
    android:layout_toRightOf="@id/imageView"
    android:layout_toEndOf="@id/imageView"
    android:layout_toLeftOf="@id/artist_button"
    android:layout_toStartOf="@id/artist_button"
    android:layout_below="@id/artist_name">
</TextView>

<ImageButton
    android:id="@+id/artist_button"
    android:src="@drawable/ic_add_24dp"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/artist_name"
    android:layout_alignBottom="@id/number_of_albums"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:background="@drawable/artist_cell_playlist_button_background">
</ImageButton>
</RelativeLayout>

Answer 4

在@rex 的帮助下，我想出了如何做到这一点：将左图和 2 个 TextView 包含在一个 RelativeLayout 中（这设置了主 RelativeLayout 的大小），并将 ImageButton 的顶部和底部对齐到这个布局。代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/artist_cell"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/cell_background">

<ImageButton
    android:id="@+id/artist_plus_button"
    android:src="@drawable/ic_add_24dp"
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:layout_alignTop="@+id/artist_infos"
    android:layout_alignBottom="@+id/artist_infos"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:background="@drawable/plus_button_background"
    android:contentDescription="@string/artistPlusButtonCD">
</ImageButton>

<RelativeLayout
    android:id="@id/artist_infos"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/artist_plus_button"
    android:layout_toStartOf="@id/artist_plus_button">

    <ImageView
        android:id="@+id/album_cover"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:src="@drawable/ic_music_note_24dp"
        android:contentDescription="@string/albumCoverContentDescription">
    </ImageView>

    <TextView
        android:id="@+id/artist_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/black"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/album_cover"
        android:layout_toEndOf="@id/album_cover">
    </TextView>

    <TextView
        android:id="@+id/number_of_albums"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_marginBottom="10dp"
        android:layout_toRightOf="@id/album_cover"
        android:layout_toEndOf="@id/album_cover"
        android:layout_below="@id/artist_name">
    </TextView>
</RelativeLayout>

</RelativeLayout>

Android - RelativeLayout 中的 ImageButton 与父尺寸不匹配

Android - ImageButton in RelativeLayout not matching parent size

android-layout

android-relativelayout