Android控件View的文字周圍添加圖標(biāo)

更新時(shí)間：2021年03月31日 09:44:21 作者：飛哥來了

這篇文章主要為大家詳細(xì)介紹了Android控件View的文字周圍添加圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在Android控件View的文字周圍添加圖標(biāo)，供大家參考，具體內(nèi)容如下

在控件TextView文字周圍放置圖片（基于TextView的Button也能實(shí)現(xiàn)），減少多布局組合嵌套。

優(yōu)點(diǎn)：使用LinearLayout對(duì)ImageView和TextView組合布局固然可行，但是布局文件會(huì)冗長許多。

以TextView為例：

在XML布局文件中設(shè)置以下5個(gè)屬性：

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

若在代碼中實(shí)現(xiàn)，則可調(diào)用如下方法。

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

：

運(yùn)行效果圖:

示例代碼如下：

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

 @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中獲取圖形對(duì)象
  drawable = getResources().getDrawable(R.drawable.ic_smile);
  // 設(shè)置圖形對(duì)象的矩形邊界大小，注意必須設(shè)置圖片大小，否則不會(huì)顯示圖片
  drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

  // 通過四個(gè)按鈕分別演示：左、上、右、下四個(gè)方向展示圖標(biāo)的效果
  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) { // 一旦監(jiān)聽到點(diǎn)擊動(dòng)作，就觸發(fā)監(jiān)聽器的onClick方法
  // 監(jiān)聽到點(diǎn)擊動(dòng)作，就觸發(fā)監(jiān)聽器的onClick方法
  switch (v.getId()) {
   case R.id.btn_left:
    // 設(shè)置按鈕控件btn_icon內(nèi)部文字左邊的圖標(biāo)
    btn_icon.setCompoundDrawables(drawable, null, null, null);
    break;
   case R.id.btn_top:
    // 設(shè)置按鈕控件btn_icon內(nèi)部文字上方的圖標(biāo)
    btn_icon.setCompoundDrawables(null, drawable, null, null);
    break;
   case R.id.btn_right:
    // 設(shè)置按鈕控件btn_icon內(nèi)部文字右邊的圖標(biāo)
    btn_icon.setCompoundDrawables(null, null, drawable, null);
    break;
   case R.id.btn_bottom:
    // 設(shè)置按鈕控件btn_icon內(nèi)部文字下方的圖標(biāo)
    btn_icon.setCompoundDrawables(null, null, null, drawable);
    break;
   default:
 }
}

xml中設(shè)置的2行核心代碼

//在控件左側(cè)設(shè)置圖標(biāo)
android:drawableLeft="@drawable/ic_smile"
//設(shè)置圖標(biāo)與控件文件的間距
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="圖標(biāo)在左"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_top"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標(biāo)在上"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_right"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標(biāo)在右"
   android:textSize="15sp" />
  <Button
   android:id="@+id/btn_bottom"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:text="圖標(biāo)在下"
   android:textSize="15sp" />
 </LinearLayout>
</LinearLayout>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: