Android 自定义Android带图片和文字的ImageButton

2023-08-16 13:36:28

经过分析，上述按钮效果实际上就是一个布局，一个最简单不过的垂直线性布局，上部分是一个ImageView，下部分是一个TextView，这个布局可点击、可设置监听。

我们首先要编写自己的ImageButton类，然后在主布局文件中为我们自定义的Button编写布局，最后在Activity中调用我们自定义ImageButton即可。

首先，我们编写一个MyImageButton类，继承自LinearLayout

package com.billhoo.study; 

import android.content.Context;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView; 

//自定义ImageButton，模拟ImageButton，并在其下方显示文字

//提供Button的部分接口

public class MyImageButton extends LinearLayout { 

  public MyImageButton(Context context, int imageResId, int textResId) {

    super(context); 

    mButtonImage = new ImageView(context);

    mButtonText = new TextView(context); 

    setImageResource(imageResId);

    mButtonImage.setPadding(, , , ); 

    setText(textResId);

    setTextColor(0xFF000000);

    mButtonText.setPadding(, , , ); 

    //设置本布局的属性

    setClickable(true);  //可点击

    setFocusable(true);  //可聚焦

    setBackgroundResource(android.R.drawable.btn_default);  //布局才用普通按钮的背景

    setOrientation(LinearLayout.VERTICAL);  //垂直布局 

    //首先添加Image，然后才添加Text

    //添加顺序将会影响布局效果

    addView(mButtonImage);

    addView(mButtonText);

  } 

  // ----------------public method-----------------------------

  /*

   * setImageResource方法

   */

  public void setImageResource(int resId) {

    mButtonImage.setImageResource(resId);

  } 

  /*

   * setText方法

   */

  public void setText(int resId) {

    mButtonText.setText(resId);

  } 

  public void setText(CharSequence buttonText) {

    mButtonText.setText(buttonText);

  } 

  /*

   * setTextColor方法

   */

  public void setTextColor(int color) {

    mButtonText.setTextColor(color);

  } 

  // ----------------private attribute-----------------------------

  private ImageView mButtonImage = null;

  private TextView mButtonText = null;

}

然后在main布局中为我们自定义的Button写xml布局，注意，我们的“按钮”实际上是一个线性布局，因此xml中应该写LinearLayout而不是Button或者ImageButton

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" android:layout_width="fill_parent"

    android:layout_height="fill_parent"> 

    <!-- 这就是我们的“数据管理按钮” -->

    <LinearLayout android:id="@+id/ll_bt_data_config"

        android:layout_width="wrap_content" android:layout_height="wrap_content" /> 

</LinearLayout>

最后，在Activity中为我们自定义的按钮设置监听

package com.billhoo.study; 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout; 

public class TestActivity extends Activity {

  /** Called when the activity is first created. */

  @Override

  public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main); 

    btDataConfig = new MyImageButton(this, R.drawable.option, R.string.text); 

    //获取包裹本按钮的容器

    llbtDataConfig = (LinearLayout) findViewById(R.id.ll_bt_data_config); 

    //将我们自定义的Button添加进这个容器

    llbtDataConfig.addView(btDataConfig); 

    //设置按钮的监听

    btDataConfig.setOnClickListener(new Button.OnClickListener() {

      @Override

      public void onClick(View v) {

        btDataConfig.setText("按钮被点击过了");

      }

    });

  } 

  private LinearLayout llbtDataConfig = null;  //main布局中包裹本按钮的容器

  private MyImageButton btDataConfig = null;

}

效果：

码农公寓

相关文章