web-dev-qa-db-ja.com

画像の上端をTextViewの上端に揃えます

次のように、画像の上部をTextViewの上部に揃えるレイアウトを作成します。

---------  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を設定してこれを試しましたが、画像を垂直方向に中央揃えにします。

           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を作成する必要がありますか？

これは、不適切なレイアウトを提供するTextViewのXMLレイアウトです。

<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"属性は、ドローアブルではなく、テキストにのみ影響を与えるようです。

androidandroid-layouttextviewdrawablevertical-alignment
38
Claes

DrawableをラップするカスタムDrawableを作成して複合Drawableを上（または下）に配置し、onDraw(Canvas)メソッドをオーバーライドしてカスタムDrawableの描画を操作できます。

以下のサンプルは、可能な最も単純な例です。これは画像を上に揃えますが、必要なロジックをonDraw(Canvas)メソッドに実装することで、TextViewの下、左、または右に揃えることもできます。また、onDraw(Canvas)にマージンを組み込んで、設計の実装を完全なピクセルにすることもできます。

使用例：

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();
    }
}
29
Reinier

RelativeLayoutを使用してみてください......

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" >

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentTop="true"
        Android:src="@drawable/ic_launcher" />

    <TextView
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_toRightOf="@id/imageView1"
        Android:text="@string/text" />

</RelativeLayout>
1
user1213202

3つのビューよりも簡単で高速な方法があると思います。アイコン用の適切な9patchを準備してから、FrameLayoutを使用する必要があります。 singleEditText/TextViewだけを背景として使用することも可能です。詳細は this answer で説明されています。

1
sandrstar

使用する layout_alignTop。これを使用すると、ビューの上部を別のビューの上部に位置合わせできます

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" >

    <TextView
        Android:id="@+id/textView1"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:text="@string/text" />

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignTop="@id/textView1"
        Android:layout_toLeftOf="@id/textView1"
        Android:src="@drawable/ic_launcher" />    

</RelativeLayout>
0
Crimson
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" >

    <ImageView
        Android:id="@+id/imageView1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_alignParentTop="true"
        Android:src="@drawable/ic_launcher" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_toRightOf="@+id/imageView1"
        Android:text="@string/text" />

</RelativeLayout>

これはそれを行うでしょう。

0
MysticMagicϡ