TextView的力量 (part1): Drawable

TextView是android基本的UI组件之一。如果可以深刻理解这些组件的用法，可以避免花费大量时间去创建新的布局。也可以让代码的冗余变小。

再这系列我将讲讲TextView和它的子类。我现在从最基本的开始，如果你还不知道此用法，相信你会有兴趣。

在很多情况下我们需要使用在TextView(or EditView, Button..tip:他们都是继承于TextView)的左边或者右边放一张图片，这样做并不困难，right？通常想实现这样的效果我们只会想到在一个LinearLayout里面放一个TextView和一个ImageView，例如下面这样的效果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_marginTop="16dp"

              android:orientation="horizontal"

              android:gravity="center"

              android:layout_gravity="center_horizontal" >

    <TextView

            android:text="@string/my_contacts"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"/>

    <ImageView

            android:paddingLeft="8dp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:src="@drawable/ic_action_add_group"/>

</LinearLayout>

有一种更好的方式做出这样的效果，就是使用一个TextView再加一个Drawable。TextView有四个属性可以设置图片围绕在它的四周，这四个属性分别是：drawableLeft, drawableRight, drawableTop, drawableBotton。还有一个属性：drawablePadding，我们可以使用它来设置text和image的间距。

现在，让我们改变上面的布局方式，摆脱LinearLayout和ImageView。像下面这样：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_marginTop="16dp"             

              android:gravity="center"

              android:layout_gravity="center_horizontal"

              android:text="@string/my_contacts"

              android:drawableRight="@drawable/ic_action_add_group"

              android:drawablePadding="8dp"/>

so cool，这样做我们降低了代码的复杂等级并且让xml看起来更简洁。这样几乎很容易去设置drawables,例如：

textView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_action_add_group, 0);

textView.setCompoundDrawablePadding(...);

 

有这个好方法，我们可以创建非常有趣的布局。让我们来创建一个简单的有用户名和密码的表格：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="250dp"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:gravity="center"

        android:orientation="vertical"

        android:layout_marginTop="16dp">

    <EditText

              android:layout_width="match_parent"

              android:layout_height="wrap_content"

              android:gravity="center_vertical"

              android:hint="@string/user_name"

              android:drawableLeft="@drawable/ic_action_person"

              android:drawablePadding="8dp"/>

    <EditText

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:gravity="center_vertical"

            android:hint="@string/password"

            android:drawableLeft="@drawable/ic_action_accounts"

            android:drawablePadding="8dp"/>

    <Button

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="@string/log_in"

            android:drawableRight="@drawable/ic_action_accept"/>

</LinearLayout>

 

下一篇我将提到如何让一个drawable可点击并且让你的布局看起来更简洁。

 

 

PS: this post come from Antonio Leiva.