Android中DrawableLeft的使用

一、DrawableLeft是什麼？

在Android中，Button、TextView等控件都支持設置Drawable，在按鈕或文本的左邊，上邊，右邊或下邊顯示Drawable。而「DrawableLeft」指的是在文本左邊顯示的Drawable，其它方向的Drawable分別是DrawableTop、DrawableRight、DrawableBottom。

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button with drawable left"
        android:drawableLeft="@drawable/ic_launcher" />

二、為什麼需要使用DrawableLeft？

使用DrawableLeft可以增強UI的美感，同時可以讓界面更加清晰，突出信息的重要性。例如，在一個功能列表中，一個有用的圖標能夠告訴用戶這個功能做了什麼。

此外，使用DrawableLeft還可以優化用戶交互，提高用戶體驗。例如，在搜索框中使用DrawableLeft的圖標指示該搜索框的作用。

三、如何設置DrawableLeft？

1. 通過XML中設置DrawableLeft

可以通過xml的方式設置DrawableLeft

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button with drawable left"
        android:drawableLeft="@drawable/ic_launcher" />

2. 動態設置DrawableLeft

也可以通過java代碼的方式設置DrawableLeft，可以在運行時決定DrawableLeft的顯示效果。

Button button = findViewById(R.id.button);
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
button.setCompoundDrawables(drawable, null, null, null);

四、DrawableLeft的常見問題與解決方式

1. 圖片大小不一致時如何處理？

當設置的圖片大小不一致時，圖片可能會因為縮放、拉伸等導致變形，需要手動調整圖片的大小。方法如下：

Button button = findViewById(R.id.button);
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
DrawableCompat.setTint(drawable, getResources().getColor(R.color.colorPrimary));
drawable.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
button.setCompoundDrawables(drawable, null, null, null);

2. 如何替換DrawableLeft中的圖片？

替換DrawableLeft中的圖片需要先獲取原始DrawableLeft中的Drawable，然後通過setBounds方法修改Drawable的大小或不需要重新繪製，最後再通過setCompoundDrawables方法設置新的DrawableLeft。

Button button = findViewById(R.id.button);
Drawable drawable = button.getCompoundDrawables()[0];
Resources resources = getResources();
Drawable newDrawable = resources.getDrawable(R.drawable.new_drawable);
newDrawable.setBounds(0, 0, DensityUtil.dp2px(20), DensityUtil.dp2px(20));
button.setCompoundDrawables(newDrawable, null, null, null);

3. 如何設置DrawableLeft與文本間距？

如果需要設置DrawableLeft與文本間距，可以使用setCompoundDrawablePadding方法設置間距。

Button button = findViewById(R.id.button);
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
drawable.setBounds(0, 0, DrawableUtil.dp2px(20), DrawableUtil.dp2px(20));
button.setCompoundDrawables(drawable, null, null, null);
button.setCompoundDrawablePadding(DrawableUtil.dp2px(5));

4. 如何使DrawableLeft居中顯示？

當設置的圖片大小和文本大小不一致時，可能會導致DrawableLeft偏離文本的位置。這時候可以通過setGravity和setPadding方法來將DrawableLeft居中顯示。

Button button = findViewById(R.id.button);
Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);
drawable.setBounds(0, 0, DrawableUtil.dp2px(20), DrawableUtil.dp2px(20));
button.setCompoundDrawables(drawable, null, null, null);
button.setGravity(Gravity.CENTER_VERTICAL | Gravity.START);
button.setPadding(DrawableUtil.dp2px(10), 0, 0, 0);