TextView 顯示影象+文字的方法
阿新 • • 發佈:2019-01-29
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中的文字預設多行顯示。