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

這篇文章將為大家詳細講解有關在Android控件View文字周圍添加圖標的示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

在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>

關于“在Android控件View文字周圍添加圖標的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。