Android控件View的文字周圍添加圖標

Posted on by

在Android控件View的文字周圍添加圖標，供大傢參考，具體內容如下

在控件TextView文字周圍放置圖片（基於TextView的Button也能實現），減少多佈局組合嵌套。

優點：使用LinearLayout對ImageView和TextView組合佈局固然可行， 但是佈局文件會冗長許多。

以TextView為例：

在XML佈局文件中設置以下5個屬性：

  • drawableTop： 指定文本上方的圖形。
  • drawableBottom： 指定文本下方的圖形。
  • drawableLeft： 指定文本左邊的圖形。
  • drawableRight： 指定文本右邊的圖形。
  • drawablePadding： 指定圖形與文本的間距。

若在代碼中實現， 則可調用如下方法。

  • etCompoundDrawables： 設置文本周圍的圖形。 可分別設置左邊、 上邊、 右邊、 下邊的圖形。
  • setCompoundDrawablePadding： 設置圖形與文本的間距。
  • setBounds： 設置圖形對象的矩形邊界大小，必須設置圖片大小，否則不會顯示圖片。

：

運行效果圖:

示例代碼如下：

public class IconActivity extends AppCompatActivity implements View.OnClickListener {
 private Button btn_icon; // 聲明一個按鈕對象
 private Drawable drawable; // 聲明一個圖形對象

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_icon);
  // 從佈局文件中獲取名叫btn_icon的按鈕控件
  btn_icon = findViewById(R.id.btn_icon);
  // 從資源文件ic_launcher.png中獲取圖形對象
  drawable = getResources().getDrawable(R.drawable.ic_smile);
  // 設置圖形對象的矩形邊界大小，註意必須設置圖片大小，否則不會顯示圖片
  drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

  // 通過四個按鈕分別演示：左、上、右、下四個方向展示圖標的效果
  findViewById(R.id.btn_left).setOnClickListener(this);
  findViewById(R.id.btn_top).setOnClickListener(this);
  findViewById(R.id.btn_right).setOnClickListener(this);
  findViewById(R.id.btn_bottom).setOnClickListener(this);
 }

 @Override
 public void onClick(View v) { // 一旦監聽到點擊動作，就觸發監聽器的onClick方法
  // 監聽到點擊動作，就觸發監聽器的onClick方法
  switch (v.getId()) {
   case R.id.btn_left:
    // 設置按鈕控件btn_icon內部文字左邊的圖標
    btn_icon.setCompoundDrawables(drawable, null, null, null);
    break;
   case R.id.btn_top:
    // 設置按鈕控件btn_icon內部文字上方的圖標
    btn_icon.setCompoundDrawables(null, drawable, null, null);
    break;
   case R.id.btn_right:
    // 設置按鈕控件btn_icon內部文字右邊的圖標
    btn_icon.setCompoundDrawables(null, null, drawable, null);
    break;
   case R.id.btn_bottom:
    // 設置按鈕控件btn_icon內部文字下方的圖標
    btn_icon.setCompoundDrawables(null, null, null, drawable);
    break;
   default:
 }
}

xml中設置的2行核心代碼

//在控件左側設置圖標
android:drawableLeft="@drawable/ic_smile"
//設置圖標與控件文件的間距
android:drawablePadding="10dp"

佈局xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="12dp"
 android:orientation="vertical">
 <Button
  android:id="@+id/btn_icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:padding="10dp"
  android:drawableLeft="@drawable/ic_smile"
  android:drawablePadding="10dp"
  android:text="熱烈歡迎"
  android:textSize="17sp" />
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="10dp"
  android:orientation="horizontal">
  <Button
   android:id="@+id/btn_left"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標在左"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_top"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標在上"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_right"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標在右"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_bottom"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標在下"
   android:textSize="15sp" />
 </LinearLayout>
</LinearLayout>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：

    None Found