Android UI 之TextView的妙用

          之前，剛接觸android的時候，覺得TextView就是一個文字顯示的控件；後來，隨着接觸的多了，需求的變化，以及看一些好的開源項目，對TextView也有了更多的瞭解，發現它可以做到更多的效果，甚至可以達到Button能做到的效果。好了，下面就來分享下，歡迎交流指正。

        先看下效果：

        

       要在TextView中加圖標，還要加背景，同時可以用selector控制顯示狀態，（這個靈感來自ViewPagerIndicator 中的tab指示器，有興趣的也可以看下源碼）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#101022">

    <TextView
        android:id="@+id/button_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_text_play"
        android:textColor="@android:color/white"
        android:padding="10dp"
        android:clickable="true"
        android:gravity="center"
        android:background="@drawable/button_background_selector"
        android:drawableLeft="@drawable/video_play_icon"
        android:drawablePadding="10dp"/>
    
    <TextView
        android:id="@+id/button_collect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_play"
        android:text="@string/button_text_collect"
        android:textColor="@android:color/white"
        android:padding="10dp"
        android:clickable="true"
        android:gravity="center"
        android:background="@drawable/button_background_selector"
        android:drawableLeft="@drawable/button_icon_collect_selector"
        android:drawablePadding="10dp"/>

</RelativeLayout>

需要注意的幾個點：

1.整體背景的selector可以在android：background中設置；

2.小的icon可以在android：drawableLeft去設置；

3.如果還想控制icon和文字間的距離可以設置android：drawablePadding

對應的button_background_selector如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/video_detail_button_focused" android:state_pressed="true"/>
    <item android:drawable="@drawable/video_detail_button_unfocused" android:state_pressed="false"/>

</selector>

同時我還可以在代碼中控制：

package com.ml.demo.textview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
/**
 * @Package com.ml.demo.textview
 * @ClassName: MainActivity
 * @Description: 巧用textview
 * @author malong
 * @date Apr 1, 2015 1:46:06 PM
 */
public class MainActivity extends Activity implements OnClickListener {
    private TextView mCollectTextView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mCollectTextView=(TextView) findViewById(R.id.button_collect);
        mCollectTextView.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button_collect:
                String text=mCollectTextView.getText().toString();
                if(text.equals("收藏")){
                    mCollectTextView.setText("已收藏");
                    mCollectTextView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.video_detail_collected, 0, 0, 0);
                }else{
                    mCollectTextView.setText("收藏");
                    mCollectTextView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.video_detail_uncollected, 0, 0, 0);
                }
                break;

            default:
                break;
        }
    }


}

可以在setCompoundDrawablesWithIntrinsicBounds(int left, int top, int right, int bottom)中去設置要顯示的資源，以及圖片相對文字顯示的位置，這個方法非常的好用，有的時候我們就想帶一個小icon和text一起，如果用一個TextView和ImageView組合實現起來可能要更麻煩，比如說作一個tab指示器，需要在Focus狀態下文字和圖標同時改變，如果text和icon分開用控件實現，在改變狀態時就十分麻煩。如果用TextView這樣用兩個selector就可以達到效果，十分方便。

        另外，想在代碼中動態控制icon和text間的距離（例如位移動畫）可以在setCompoundDrawablePadding(int pad)中動態設置。