1. 程式人生 > >Android實現自定義帶文字和圖片的Button

Android實現自定義帶文字和圖片的Button

專案中的需求往往十分怪異,例如在按鈕文字的左邊加一個圖示,這樣按鈕內部既有文字又有圖片,乍看之下Button和ImageView都沒法直接使用,若用LinearLayout對ImageView和Button組合佈局,這樣固然可行,但是佈局檔案會冗長許多

其實有一個既簡單又靈活的辦法,在文字周圍放置圖片,只使用Button就能實現,具體可在XML佈局檔案中設定一下5個屬性

drawableTop : 指定文字上方的圖形

drawableBottom : 指定文字下方的圖形

drawableLeft : 指定文字左邊的圖形

drawableRight : 指定文字右邊的圖形

drawablePadding : 指定圖形與文字的間距

示例:

<Button
    android:id="@+id/btn_icon"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:drawableLeft="@mipmap/ic_launcher"
    android:text="程式設計師"/>


若在程式碼中實現,則課呼叫如下方法

setCompoundDrawables : 設定文本週圍圖形的位置,接受四個引數,可分別設定為左邊、上邊、右邊、下邊的圖形

setCompoundDrawablePadding : 設定圖形與文字的間距

下面的程式碼演示在按鈕中變換圖示位置的功能

XML佈局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="sxpi.com.myapplication.MainActivity">

    <Button
        android:id="@+id/btn_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="程式設計師" />

    <Button
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="圖示在左" />

    <Button
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="圖片在右" />

    <Button
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="圖片在上" />

    <Button
        android:id="@+id/bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="圖片在下" />
</LinearLayout>

程式如下

importandroid.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;


public class MainActivity 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_main);
        btn_icon=(Button)findViewById(R.id.btn_icon);
        drawable=getResources().getDrawable(R.mipmap.ic_launcher);
        //必須設定圖片大小,否則不顯示圖片
        drawable.setBounds(0,0,drawable.getMinimumWidth(),drawable.getMinimumHeight());
        findViewById(R.id.left).setOnClickListener(this);
        findViewById(R.id.right).setOnClickListener(this);
        findViewById(R.id.top).setOnClickListener(this);
        findViewById(R.id.bottom).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v.getId()==R.id.left){
            btn_icon.setCompoundDrawables(drawable,null,null,null);
        }else if (v.getId()==R.id.top){
            btn_icon.setCompoundDrawables(null,drawable,null,null);
        }else if (v.getId()==R.id.right){
            btn_icon.setCompoundDrawables(null,null,drawable,null);
        }else if (v.getId()==R.id.bottom){
            btn_icon.setCompoundDrawables(null,null,null,drawable);
        }
    }
}