Android:对文本后面的图像使用alignBaseline

发布于 2024-10-19 00:31:11 字数 782 浏览 3 评论 0原文

下面是一个 TextView,后跟一个包含在relativelayout中的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"
        />

Below is a TextView followed by an ImageView contained in RelativeLayout. I'm trying to get the bottom of the image to align with the baseline of the text. When I use alignBaseline for the image,reference the TextView, it is the top of the image that aligns with the baseline of the text instead of the bottom. How can I fix this?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

傲性难收 2024-10-26 00:31:11

从 API11 开始你可以简单地使用
android:baselineAlignBottom="true"

在 API11 之前,您可以覆盖 getBaseLine() 并返回图像高度。

Since API11 you can simply use
android:baselineAlignBottom="true"

Prior to API11 you can overwrite getBaseLine() and return image height.

2024-10-26 00:31:11

您应该在 ImageView 中使用以下两行将 Image 视图的底部与附近 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>

You should use both following lines in your ImageView to align bottom of Image view to bottom of nearby 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>
昵称有卵用 2024-10-26 00:31:11

我能够完成我想做的事情。我没有使用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>

这就是结果:

日历/计划表的标题

I was able to accomplish what I wanted to do. I did not utilize alignBaseline, just fixed the problem with padding and resizing the image. Some of the issues I was having arose from having an image too big and it filling up the space undesirably. The code I used to achieve what I wanted is below:

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

This was the result:

Header for a calendar/planner

深海少女心 2024-10-26 00:31:11

我偶然发现了一个类似的问题,并通过完全避免 layout_alignBaseline 来解决它,而是依靠 layout_alignBottom ,它从 API 1 开始就可用。

I stumbled upon a similar issue, and solved it just by avoiding layout_alignBaseline altogether, relying on layout_alignBottom instead, which is available since API 1.

治碍 2024-10-26 00:31:11

我使用文本视图而不是图像视图,并使用新文本视图的可绘制对象来设置图像并且它有效:

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

i used a text view instead of an image view and used the new text view's drawable to set the image and it worked:

<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"
        />
冷月断魂刀 2024-10-26 00:31:11
/**
 * 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();
    }
}
/**
 * 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();
    }
}
情未る 2024-10-26 00:31:11

您想要使用 android:layout_alignBottom 属性将 ImageView 与另一个 View 的基线对齐。

在下面的示例中,我将 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>

You want to use the android:layout_alignBottom attribute to align the ImageView with the baseline of another View.

In the sample below I aligned the ImageView to another TextView. I included the code for the ImageView, and not the TextView. In order to align to the TextView you'll just need to include the id of the TextView.

Adjusting the margin or padding will result in the Views being misaligned if the user changes the text size on their device.

enter image description here

<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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文