1. 程式人生 > >TextView 顯示影象+文字的方法

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中對textviewellipsize屬性做相應的設定即可,或者在程式中可通過setEillpsize顯式設定。
 

android:ellipsize="start"        省略號在開頭        
        
android:ellipsize="middle"       省略號在中間        
        
android:ellipsize="end"          省略號在結尾        
        
android:ellipsize="marquee"      跑馬燈顯示
注: EditText不支援marquee這種模式。Android:ellipsize屬性要配合android:MaxLines=“1”一起使用才能生效,因為如果不設定android:MaxLines=“1”的話,TextView中的文字預設多行顯示。