一步一步学android控件（之九） —— ImageButton

ImageButton控件呢是显示图片而不是文字的button。个人觉得很多时候Button可以完全替代ImageButton。为什么？

ImageButton使用的是图片，这完全可以用Button的android:background属性来指定，而且Button还可以设置字体。这样一比较，ImageButton就没有什么优势了。

今天内容很简单，自定义一个可以设置文字的ImageButton，文字内容的位置可以随意调整。下面先看看效果图：

图中"任何文本内容"是放在一个TextView中的，若要调整文本位置，就跳帧TextView的位置。

若要添加按下时效果，请参考一步一步学android控件（之三） —— Button

下面完成上述功能：

1、使用到的字串

<!-- strings for ImageButton -->
    <string name="image_button_str">任何文本内容</string>
    <!-- end -->

添加到strings.xml文件中

2、创建自定义ImageButton的布局文件selfdef_img_btn.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center">

    <ImageView
        android:id="@+id/img_btn_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/hello_image_view" />

    <TextView
        android:id="@+id/img_btn_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="105dp"
        android:text="@string/image_button_str"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:fontFamily="bold" />

</RelativeLayout>

3、创建java文件TextIncludedButton.java

package com.xy.zt.selfdefinewieget.ui;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.xy.zt.selfdefinewieget.R;

public class TextIncludedButton extends RelativeLayout {
    private ImageView mImgBtn;
    private TextView mImgText;

    public TextIncludedButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    public TextIncludedButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public TextIncludedButton(Context context) {
        super(context);
        init(context);
    }

    private void init(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        inflater.inflate(R.layout.selfdef_img_btn, this);
        mImgBtn = (ImageView) findViewById(R.id.img_btn_image);
        mImgText = (TextView) findViewById(R.id.img_btn_text);

    }

    public CharSequence getText() {
        return mImgText.getText();
    }

    public void setText(CharSequence text) {
        mImgText.setText(text);
    }

    public void setImage(Drawable img) {
        mImgBtn.setImageDrawable(img);
    }

    public Drawable getImage() {
        return mImgBtn.getDrawable();
    }
}

4、使用自定义ImageButton的布局文件widget_img_btn_layout.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:orientation="vertical" >

    <!-- <include layout="@layout/selfdef_img_btn"/> -->

    <com.xy.zt.selfdefinewieget.ui.TextIncludedButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

5、activity——WidgetImgBtnActivity.java

package com.xy.zt.selfdefinewieget;

import android.app.Activity;
import android.os.Bundle;

public class WidgetImgBtnActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.widget_img_btn_layout);
    }

}

6、在ViewData和widgetsAdapter中分别加入如下代码

public static final int IMAGE_BTN_ID = IMAGE_VIEW_ID + 1;
    public static final String IMAGE_btn_NAME = "ImageButton";
private static final ViewData mImageBtn = new ViewData(IMAGE_btn_NAME, IMAGE_BTN_ID);
View_Datas.add(mImageBtn);

下面代码添加到WidgetAdapter的handleItemClicked函数中

case ViewData.IMAGE_BTN_ID :
            intent.setClass(mContext, WidgetImgBtnActivity.class);
            mContext.startActivity(intent);
            break;

ImageButton到这里就结束了，下一个控件Gallery。