web-dev-qa-db-fra.com

Aligner le haut de l'image sur le haut de TextView

Je veux créer une mise en page qui aligne le haut d'une image sur le haut d'un TextView comme ceci:

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

J'ai essayé de le faire en définissant Android:drawableLeft à mon image, mais qui centre l'image verticalement:

           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.

Est-ce possible avec juste un TextView ou dois-je créer un RelativeLayout contenant un TextView et un ImageView?

Voici la disposition XML de mon TextView qui donne la disposition incorrecte:

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

Le Android:gravity="top" l'attribut ne semble affecter que le texte, pas le dessinable.

androidandroid-layouttextviewdrawablevertical-alignment
38
Claes

Vous pouvez aligner un Drawable composé en haut (ou en bas) en créant un Drawable personnalisé qui enveloppe votre Drawable, puis manipulez le dessin de votre Drawable personnalisé en remplaçant la méthode onDraw(Canvas).

L'exemple ci-dessous est l'exemple le plus simple possible. Cela aligne l'image en haut, mais vous pouvez également l'aligner en bas, à gauche ou à droite de TextView en implémentant la logique requise dans la méthode onDraw(Canvas)-. Vous pouvez également créer une marge dans la onDraw(Canvas), pour rendre votre pixel d'implémentation de conception parfait.

Exemple d'utilisation:

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

Exemple de code:

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

Essayez d'utiliser 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

Je pense qu'il y a un moyen plus simple et plus rapide que d'avoir 3 vues. Vous devez préparer le bon 9patch pour l'icône, puis utiliser FrameLayout. Il est même possible d'avoir seulement un seul EditText/TextView en utilisant le même dessinable que leur arrière-plan. Plus de détails sont décrits dans cette réponse .

1
sandrstar

Utilisation layout_alignTop. Avec lui, vous pouvez aligner le haut de la vue sur le haut d'une autre vue

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

Cela suffirait.

0
MysticMagicϡ