Android：使用alignBaseline属性将图片与文本对齐

Question

以下是一个包含在RelativeLayout中的TextView和ImageView。我想让图像底部与文本基线对齐。当我使用alignBaseline为图像，并参考TextView时，实际上是图像顶部与文本基线对齐，而不是底部。如何解决这个问题？

<TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
   <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingLeft="15px"
        android:layout_toRightOf="@id/month"
        android:layout_alignBaseline="@id/month"
        android:src="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />

- Gaege

Answer 1

自 API 11 起，您可以简单地使用 android:baselineAlignBottom="true"。

在 API 11 之前，您可以覆盖 getBaseLine() 并返回图像高度。

- lujop

Answer 2

您应该在ImageView中使用以下两行代码来将图像视图的底部与附近TextView的底部对齐：

        android:layout_alignBaseline="@+id/txtview"
        android:baselineAlignBottom="true"

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <TextView
        android:id="@+id/txtview"
        ... />

    <ImageView
        ...
        android:layout_toRightOf="@+id/txtview"
        android:layout_alignBaseline="@+id/txtview"
        android:baselineAlignBottom="true"
        ...
        />
</RelativeLayout>

- Vitaliy A

Answer 3

我成功完成了我想做的事情。我没有使用alignBaseline，只是通过填充和调整图片大小来解决问题。我遇到的一些问题是由于图片太大，导致它不希望地填满了空间。我用下面的代码实现了我想要的效果：

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:paddingLeft="25px"
    android:paddingTop="30px"
    android:id="@+id/LinearLayout1">
    <TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
   <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@id/month"
        android:layout_alignBottom="@id/month"
        android:paddingBottom="12px"
        android:src="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="2011" 
        android:id="@+id/year" 
        android:layout_toRightOf="@id/calimage"
        android:layout_alignBaseline="@id/month"
        android:typeface="serif"
        android:textSize="40px"
        />
</RelativeLayout>

这是结果：

- Gaege

---

我已经在几个不同的模拟器上测试过了，结果都一样。我旨在让这三个元素以此配置彼此绑定，无论屏幕大小如何，而以上代码似乎实现了这一点。可以请您解释一下使用dpi而非px的优势吗？ - Gaege

我问这个问题是因为我在不同尺寸和分辨率的模拟器中尝试了您的代码，有时图片会稍微低于或高于文本，并且在3.7英寸WVGA（Nexux One）模拟器中，我的图片甚至因为填充而被裁剪。虽然我没有更好的解决方案...关于dpi优于px的优势，请阅读这里的答案https://dev59.com/VFLTa4cB1Zd3GeqPeOC7 - Adinia

感谢您的回复，我刚刚才意识到您已经发布了。我现在已经基本解决了这个问题。大部分问题都来自于原始图像的尺寸。 - Gaege

这不是一个理想的解决方案。TextView 可以改变大小或位置。例如，Android 用户可以更改设备字体大小。添加边距或填充将意味着当屏幕更改时，ImageView 将不再对齐。请参见下面的我的解决方案。 - AdamHurwitz

Answer 4

我使用了一个文本视图而不是一个图像视图，并使用新的文本视图的可绘制对象来设置图像，它起作用了：

<TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
<TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingLeft="15px"
        android:layout_toRightOf="@id/month"
        android:layout_alignBaseline="@id/month"
        android:drawableRight="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />

- Itay Bianco

Answer 5

我遇到了类似的问题，通过完全避免使用layout_alignBaseline，而是依靠自API 1以来可用的layout_alignBottom解决了它。

- Giulio Piancastelli

Answer 6

/**
 * Set whether to set the baseline of this view to the bottom of the view.
 * Setting this value overrides any calls to setBaseline.
 *
 * @param aligned If true, the image view will be baseline aligned with
 *      based on its bottom edge.
 *
 * @attr ref android.R.styleable#ImageView_baselineAlignBottom
 */
public void setBaselineAlignBottom(boolean aligned) {
    if (mBaselineAlignBottom != aligned) {
        mBaselineAlignBottom = aligned;
        requestLayout();
    }
}

- Sophia

Answer 7

你想使用android:layout_alignBottom属性将ImageView与另一个视图的基线对齐。

在下面的示例中，我将ImageView对齐到另一个TextView上。我包含了ImageView的代码，而不是TextView的代码。为了对齐到TextView，你只需要包含TextView的ID。

如果用户更改设备上的文本大小，则调整边距或填充将导致视图错位。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground">

        <!-- additional code here -->

        <ImageView
            android:id="@+id/message_time_chevron_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/replies_username_id"
            android:layout_alignParentRight="true"
            android:clickable="true"
            android:src="@drawable/ic_chevron_right"/>

        <!-- additional code here -->

</RelativeLayout>

- AdamHurwitz