将图像顶部与 TextView 顶部对齐 [英] Align top of image to top of TextView

问题描述

我想创建一个将图像顶部与 TextView 顶部对齐的布局，如下所示:

I want to create a layout that aligns the top of an image to the top of a TextView like this:

---------  Text text text text text text text
| Image |  text text text text text text text
---------  text text text text text text text
           text text text text text text text
           text text text text text.

我尝试通过将 android:drawableLeft 设置为我的图像来做到这一点，但这使图像垂直居中:

I tried doing this by setting android:drawableLeft to my image, but that centers the image vertically:

           Text text text text text text text
---------  text text text text text text text
| Image |  text text text text text text text
---------  text text text text text text text
           text text text text text.

这是否可以仅使用 TextView 或我是否需要创建一个包含 TextView 和 ImageView 的 RelativeLayout?

Is this possible with just a TextView or do I need to create a RelativeLayout containing a TextView and an ImageView?

这是我的 TextView 的 XML 布局，它给出了不正确的布局:

Here is the XML layout for my TextView that gives the incorrect layout:

<TextView
    android:gravity="top"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/image"
    android:drawablePadding="8dp"
    android:text="@string/text" />

android:gravity="top" 属性似乎只影响文本，而不影响可绘制.

The android:gravity="top" attribute only seems to affect the text, not the drawable.

推荐答案

你可以通过创建一个包裹你的 Drawable 的自定义 Drawable 来将一个复合 Drawable 对齐到顶部(或底部)，然后操作你的自定义 Drawable 的绘图通过覆盖方法 onDraw(Canvas).

You can align a compound-Drawable to the top (or bottom) by creating a custom Drawable that wraps your Drawable, and then manipulate the drawing of your custom Drawable by overriding the method onDraw(Canvas).

下面的示例是最简单的示例.这会将图像与顶部对齐，但您也可以通过在 onDraw(Canvas) 方法中实现所需的逻辑，使其与 TextView 的底部、左侧或右侧对齐.您可能还想在 onDraw(Canvas) 中建立一个边距，以使您的设计实现像素完美.

The sample below is the simplest possible example. This aligns the image to the top, but you can also make it align to the bottom, left or right of the TextView by implementing the required logic in the onDraw(Canvas)-method. You might also want to build in a margin in the onDraw(Canvas), to make your design implementation pixel perfect.

示例用法:

GravityCompoundDrawable gravityDrawable = new GravityCompoundDrawable(innerDrawable);
// NOTE: next 2 lines are important!
innerDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
gravityDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
mTextView.setCompoundDrawables(gravityDrawable, null, null, null);

示例代码:

public class GravityCompoundDrawable extends Drawable {

    // inner Drawable
    private final Drawable mDrawable;

    public GravityCompoundDrawable(Drawable drawable) {
        mDrawable = drawable;
    }

    @Override
    public int getIntrinsicWidth() {
        return mDrawable.getIntrinsicWidth();
    }

    @Override
    public int getIntrinsicHeight() {
        return mDrawable.getIntrinsicHeight();
    }

    @Override
    public void draw(Canvas canvas) {
        int halfCanvas= canvas.getHeight() / 2;
        int halfDrawable = mDrawable.getIntrinsicHeight() / 2;

        // align to top
        canvas.save();
        canvas.translate(0, -halfCanvas + halfDrawable);
        mDrawable.draw(canvas);
        canvas.restore();
    }
}

这篇关于将图像顶部与 TextView 顶部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！