Android自定义导航图文按钮ImageTextButton

**

Android自定义导航图文按钮ImageTextButton

**
今天我和一个网友聊天，聊到这里了，说android里面怎么自定义控件，比如说android图片按钮，后面我就告诉他了，相信也有很多朋友需要这个图文按钮吧，比如说做导航按钮的时候，自己写一个空间组合的确实有点蛮烦，操作起来也比较复杂，现在我就给大家展示一下我自定义的ImageTextButton的代码

1、自定义控件首先在values目录下创建一个attrs.xml文件
2、再在这attrs.xml中定义控件的xml属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImageTextButton">
        <attr name="textName" format="string"/>
        <attr name="textColor" format="color"/>
        <attr name="textColorSelected" format="color"/>
        <attr name="imageSrc" format="reference"></attr>
        <attr name="imageWidth" format="dimension"></attr>
        <attr name="imageHeight" format="dimension"></attr>
        <attr name="spacing" format="dimension"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="imageSrcSelected" format="reference"></attr>
    </declare-styleable>
</resources>

3、定义好之后，我们在自定义一个控件ImageTextButton继承LinearLayout

package com.omaoyu.textimagebuttom;


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class ImageTextButton extends LinearLayout {
    private int textColor;
    private int textColorSelected;
    private int imageSrc;
    private int imageSrcSelected;
    private String textName;
    private ImageView imageView;
    private TextView textView;
    private float imageWidth;
    private float imageHeight;
    private float spacing;
    private float textSize;

    public float getTextSize() {
        return textSize;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    public float getSpacing() {
        return spacing;
    }

    public void setSpacing(float spacing) {
        this.spacing = spacing;
    }

    public float getImageWidth() {
        return imageWidth;
    }

    public void setImageWidth(float imageWidth) {
        this.imageWidth = imageWidth;
    }

    public float getImageHeight() {
        return imageHeight;
    }

    public void setImageHeight(float imageHeight) {
        this.imageHeight = imageHeight;
    }

    public int getTextColorSelected() {
        return textColorSelected;
    }

    public void setTextColorSelected(int textColorSelected) {
        this.textColorSelected = textColorSelected;
    }

    public ImageTextButton(Context context) {
        super(context);
    }

    public ImageTextButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
                R.styleable.ImageTextButton);

        float width = dip2px(context,23);
        //获取自定义属性和默认值
        textColor = mTypedArray.getColor(R.styleable.ImageTextButton_textColor, Color.GREEN);
        textColorSelected = mTypedArray.getColor(R.styleable.ImageTextButton_textColorSelected, textColor);
        imageSrc = mTypedArray.getResourceId(R.styleable.ImageTextButton_imageSrc, Color.GREEN);
        imageSrcSelected = mTypedArray.getResourceId(R.styleable.ImageTextButton_imageSrcSelected, imageSrc);
        textName = mTypedArray.getString(R.styleable.ImageTextButton_textName);
        imageWidth = mTypedArray.getDimension(R.styleable.ImageTextButton_imageWidth,width);
        imageHeight = mTypedArray.getDimension(R.styleable.ImageTextButton_imageHeight,width);
        textSize = mTypedArray.getDimensionPixelSize(R.styleable.ImageTextButton_imageHeight,12);
        spacing = mTypedArray.getDimension(R.styleable.ImageTextButton_imageHeight,dip2px(context,3));
        setLayout(context);

        mTypedArray.recycle();
    }

    private void setLayout(Context context){
        setOrientation(LinearLayout.VERTICAL);
        setGravity(Gravity.CENTER);
        imageView = new ImageView(context);
        imageView.setLayoutParams(new LayoutParams((int)imageWidth,(int)imageHeight));
        textView = new TextView(context);
        textView.setTextSize(textSize);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.setMargins(0, (int)spacing, 0, 0);
        textView.setLayoutParams(lp);
        imageView.setImageResource(imageSrc);
        textView.setText(textName);
        textView.setTextColor(textColor);
        addView(imageView);
        addView(textView);
    }

    @Override
    public void setSelected(boolean selected) {
        super.setSelected(selected);
        if(selected){
            textView.setTextColor(textColorSelected);
            imageView.setImageResource(imageSrcSelected);
        } else {
            textView.setTextColor(textColor);
            imageView.setImageResource(imageSrc);
        }
    }

    public int getImageSrcSelected() {
        return imageSrcSelected;
    }

    public void setImageSrcSelected(int imageSrcSelected) {
        this.imageSrcSelected = imageSrcSelected;
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public int getImageSrc() {
        return imageSrc;
    }

    public void setImageSrc(int imageSrc) {
        this.imageSrc = imageSrc;
    }

    public String getTextName() {
        return textName;
    }

    public void setTextName(String textName) {
        this.textName = textName;
    }

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

然后在android布局文件中调用

<com.omaoyu.textimagebuttom.ImageTextButton
            android:id="@+id/itb_tab_0"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:imageSrc="@mipmap/ic_1"
            app:imageSrcSelected="@mipmap/ic_1_selected"
            app:textColor="#999999"
            app:textColorSelected="#ff6633"
            app:textName="首页"></com.omaoyu.textimagebuttom.ImageTextButton>

运行一下试试吧，希望能给大家带来帮助…
项目下载ImageTextButton图文导航按钮