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)中动态设置。

Android UI 之TextView的妙用

猜你喜欢