【Android进阶】-Android组合的方式自定义控件

引言

在软件开发过程中，大家可能都发现了这个问题，就是软件的标题栏样式几乎都是一样的，只是文字不同而已，就像下面的两张图片一样。为了减少重复代码，提高效率，同时也方便大家使用，咱们可以把标题栏通过组合的方式定义成一个控件。

---

实现步骤

步骤一：在values-attrs中定义控件要用到的属性，如下面的代码所示。这里我们定义了标题栏文字（textText），字体大小（textSize），字体颜色（textColor），左边按钮文字（leftBtnText），字体大小（leftBtnTextSize），字体颜色（leftTextColor），背景颜色（leftBgColor）。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Topbar">
        <attr name="textText" format="string|reference" />
        <attr name="textSize" format="dimension|reference" />
        <attr name="textColor" format="color|reference" />
        <attr name="leftBtnText" format="string|reference"/>
        <attr name="leftBtnTextSize" format="dimension|reference"/>
        <attr name="leftTextColor" format="color|reference"/>
        <attr name="leftBgColor" format="color|reference"/>
    </declare-styleable>
</resources>

---

步骤二：定义类Topbar继承自RelativeLayout，具体代码如下。代码中定义了一个TextView显示标题文字，一个Button显示左侧按钮，定义了一个OnClickListenner来监听Button的点击，其他字段对应attrs中声明的属性。

public class Topbar extends RelativeLayout {
    private String title;
    private int textColor;
    private float textSize;
    private TextView txtTitle;
    private String leftText;
    private int leftTextColor;
    private int leftBgColor;
    private float leftTextSize;
    private Button btnLeft;
    private OnClickListener leftClickListener;


    public Topbar(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Topbar);
        title = ta.getString(R.styleable.Topbar_textText);
        textColor = ta.getColor(R.styleable.Topbar_textColor, 0);
        textSize = ta.getDimension(R.styleable.Topbar_textSize, 20f);

        leftText=ta.getString(R.styleable.Topbar_leftBtnText);
        leftTextColor =ta.getColor(R.styleable.Topbar_leftTextColor, 0);
        leftBgColor =ta.getColor(R.styleable.Topbar_leftBgColor, 0);
        leftTextSize=ta.getDimension(R.styleable.Topbar_leftBtnTextSize, 12f);

        ta.recycle();

        txtTitle = new TextView(context);
        txtTitle.setTextColor(textColor);
        txtTitle.setTextSize(textSize);
        txtTitle.setText(title);

        btnLeft=new Button(context);
        btnLeft.setText(leftText);
        btnLeft.setTextSize(leftTextSize);
        btnLeft.setTextColor(leftTextColor);
        btnLeft.setBackgroundColor(leftBgColor);

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(txtTitle, layoutParams);

        LayoutParams layoutParamsBtn = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParamsBtn.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        addView(btnLeft, layoutParamsBtn);

        /**
         * 监听Topbar左上角返回按钮点击
         */
        btnLeft.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                leftClickListener.onClick(v);
            }
        });
    }

    public void setLeftClickListener(OnClickListener leftClickListener) {
        this.leftClickListener = leftClickListener;
    }

}

---

步骤三：使用，布局文件代码如下。注意声明自己的名字空间，xmlns:tailyou=”http://schemas.android.com/apk/res-auto”

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tailyou="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.tailyou.customview.Topbar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:padding="8dp"
        tailyou:leftBgColor="@android:color/transparent"
        tailyou:leftBtnText="主页"
        tailyou:leftBtnTextSize="9dp"
        tailyou:leftTextColor="@android:color/white"
        tailyou:textColor="@android:color/white"
        tailyou:textSize="12dp"
        tailyou:textText="添加好友" />


</RelativeLayout>

在Activity中的使用，代码如下：

 Topbar topbar=(Topbar)findViewById(R.id.topbar);
 topbar.setLeftClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"点击左上角返回按钮",Toast.LENGTH_LONG).show();
            }
        });