2012-04-22 125 views
33

顶我想创建对齐图像的顶部这样一个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"属性似乎只影响文本,而不是绘制。

+2

我认为你需要使用的RelativeLayout ... – amp 2012-04-22 11:01:56

+0

你是否需要在顶部或左侧 – 2012-04-22 11:03:03

+0

作为@amp说使用相对布局最好.. – MAC 2012-04-22 12:25:09

回答

1

尝试使用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> 
+0

CompoundDrawable的要点是尽量减少View层次结构中的视图数量。尽管这个解决方案在外观上看起来相同,但它并不回答这个问题。 – rds 2016-06-13 13:21:10

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

这将做到这一点。

1

我认为,有比3视图更容易和更快的方式。您需要为图标准备适当的9patch,然后使用FrameLayout。甚至有可能只有单一EditText/TextView使用相同的可绘制背景。更多细节在this answer中描述。

0

使用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> 
22

您可以通过创建一个包装您可绘制自定义绘制对象对准复合抽拉顶端(或底部),然后操纵通过重写方法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(); 
    } 
} 
+0

伟大的解决方案。这必须是被接受的答案。 – TharakaNirmana 2015-07-21 09:18:22

+0

工作..谢谢 – 2015-12-16 09:18:20

+1

如何用它来对齐文本和左边的drawable到textview的左边 – TheReprator 2016-03-02 05:16:05