TextView 显示图像＋文字的方法

TextView 通常的用法只是进行文字的显示，但是仔细了解之后发现它可以显示图像信息。

本文将介绍此种用法：android:drawableLeft="@drawable/ic_launcher"及相应的编码方法

利用TextView 进行图像＋文字的显示时，有两种方式：xml文件方式和编码方式

代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="6dip">
    <TextView 
        android:id="@+id/myTextView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is a TextView with an image in the left.This is a TextView with an image in the left.This is a TextView with an image in the left."
        android:ellipsize="end"
        android:maxLines="1"
        android:layout_marginLeft="20dp"
        android:drawablePadding="50dp"
        android:drawableLeft="@drawable/ic_launcher"/>
    
    <TextView 
        android:id="@+id/myTextView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is a TextView with an image in the left.This is a TextView with an image in the left.This is a TextView with an image in the left."
        android:ellipsize="end"
        android:layout_marginLeft="20dp"
        android:drawablePadding="50dp"
        />
    
</LinearLayout>

该布局文件中垂直放入了两个TextView以分别对对应这两和种方式。

运行效果如下图所示：

可以看到第一TextView中显示了图像加文字（设置显示效果时注意布局文件中的其他属性）。第二个TextView 还没有通过编码设置，所以显示的只有文字。

下面通过编码的方式达到和第一个TextView 中相同的效果：

package com.demo.demotest;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {
	private TextView myTextView2;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		init();
	}
	//初始化控件
	private void init(){
		//获取控件 并以编码的方式设置其图像
		myTextView2=(TextView)findViewById(R.id.myTextView2);
		Drawable imagmeDrawable=getResources().getDrawable(R.drawable.ic_launcher);
		//这一步一定要做，否则不会显示图像!!!!
		imagmeDrawable.setBounds(0, 0, imagmeDrawable .getMinimumWidth(), imagmeDrawable.getMinimumHeight());
		myTextView2.setCompoundDrawables(imagmeDrawable, null,null, null);
		myTextView2.setMaxLines(1);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

运行之后的效果为：

可以看出能过编码的方式也达到了相同的效果。

细心一点你会发现每一行最后都有“...”，如下图所示：

实际上是因为每一行文字都没有显示完全，而显示出来的。

这个跟TextView 的android:ellipsize属性有关系，下面介绍一下该属性。

TextView及其子类，当字符内容太长显示不下时可以省略号代替未显示的字符；省略号可以在显示区域的起始，中间，结束位置，或者以跑马灯的方式显示文字(textview的状态为被选中)。

其实现只需在xml中对textview的ellipsize属性做相应的设置即可，或者在程序中可通过setEillpsize显式设置。
 

android:ellipsize="start"        省略号在开头        
        
android:ellipsize="middle"       省略号在中间        
        
android:ellipsize="end"          省略号在结尾        
        
android:ellipsize="marquee"      跑马灯显示

注: EditText不支持marquee这种模式。Android:ellipsize属性要配合android:MaxLines＝“1”一起使用才能生效,因为如果不设置android:MaxLines＝“1”的话，TextView中的文字默认多行显示。