自定义组合控件——TitleBar

在自定义组合控件——TitleTextView这篇博客里，我写了一个非常简单的控件，但真正的实际作用不大，算是抛砖引玉吧，但是真正的项目中也是有很多自定义组合控件的，比如电商项目中的头布局，几个页面的头布局格式基本一样，用一个组合控件可以帮我们节省很多时间和代码量。今天模拟了一个电商应用的头布局，废话不多说，先上效果图：

---

• 主要功能
  
  • 设置左中右显示为字体或是图片
  • 设置字体的大小，颜色以及内容
  • 设置左右显示或隐藏以及两边的回调点击事件
  • 设置整体的背景颜色

---

实现过程
1.先看一下attr文件

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

    <declare-styleable name="TitleBar">
        <attr name="titleBarBackgroundColor" format="color" />

        <attr name="leftText" format="string" />
        <attr name="leftTextSize" format="dimension" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="reference|color" />

        <attr name="centerText" format="string" />
        <attr name="centerTextSize" format="dimension" />
        <attr name="centerTextColor" format="color" />
        <attr name="centerBackground" format="reference|color" />

        <attr name="rightText" format="string" />
        <attr name="rightTextSize" format="dimension" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackground" format="reference|color" />
    </declare-styleable>

</resources>

2.直接在代码中生成完成布局，没有用到布局文件，基本注释了一下，这里就不再多说了

public class TitleBar extends RelativeLayout {

    private TitleBarClickListener listener;
    private Button leftButton;
    private Button rightButton; 

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

    public TitleBar(Context context) {
        this(context, null, 0);
    }

    public TitleBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        //获取declare-styleable集合
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
        //从集合中取出相对应的值
        String leftText = typedArray.getString(R.styleable.TitleBar_leftText);
        float leftTextSize = typedArray.getDimension(R.styleable.TitleBar_leftTextSize, 0);
        int leftTextColor = typedArray.getColor(R.styleable.TitleBar_leftTextColor, 0);
        Drawable leftBackground = typedArray.getDrawable(R.styleable.TitleBar_leftBackground);
        //创建Button控件并设置相对应属性
        leftButton = new Button(context);
        leftButton.setText(leftText);
        leftButton.setTextSize(leftTextSize);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackgroundColor(Color.TRANSPARENT);//设置Button背景为透明
        if(leftBackground != null){
            leftBackground.setBounds(0, 0, 58, 58);//设置图片大小
            leftButton.setCompoundDrawables(null, leftBackground, null, null);//添加图片
        }
        LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);//设置位置在父控件左边
        this.addView(leftButton, leftParams);//添加Button
        //下面两个基本一样就不写注释了
        String rightText = typedArray.getString(R.styleable.TitleBar_rightText);
        float rightTextSize = typedArray.getDimension(R.styleable.TitleBar_rightTextSize, 0);
        int rightTextColor = typedArray.getColor(R.styleable.TitleBar_rightTextColor, 0);
        Drawable rightBackground = typedArray.getDrawable(R.styleable.TitleBar_rightBackground);
        rightButton = new Button(context);
        rightButton.setText(rightText);
        rightButton.setTextSize(rightTextSize);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackgroundColor(Color.TRANSPARENT);
        if(rightBackground != null){
            rightBackground.setBounds(0, 0, 58, 58);
            rightButton.setCompoundDrawables(null, rightBackground, null, null);
        }
        LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        this.addView(rightButton, rightParams);

        String centerText = typedArray.getString(R.styleable.TitleBar_centerText);
        float centerTextSize = typedArray.getDimension(R.styleable.TitleBar_centerTextSize, 0);
        int centerTextColor = typedArray.getColor(R.styleable.TitleBar_centerTextColor, 0);
        Drawable centerBackground = typedArray.getDrawable(R.styleable.TitleBar_centerBackground);
        Button centerButton = new Button(context);
        centerButton.setText(centerText);
        centerButton.setTextSize(centerTextSize);
        centerButton.setTextColor(centerTextColor);
        centerButton.setBackgroundColor(Color.TRANSPARENT);
        if(centerBackground != null){
            centerBackground.setBounds(0, 0, 374, 60);
            centerButton.setCompoundDrawables(null, centerBackground, null, null);
        }
        LayoutParams centerParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        centerParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        this.addView(centerButton, centerParams);

        int titleBarBackgroundColor = typedArray.getColor(R.styleable.TitleBar_titleBarBackgroundColor, 0);
        setBackgroundColor(titleBarBackgroundColor);
        //关闭资源
        typedArray.recycle();

        leftButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });
    }
    //自定义一个回调方法,左右两边点击事件
    public interface TitleBarClickListener{
        public void leftClick();
        public void rightClick();
    }
    //创建Set方法
    public void setTitleBarClickListener(TitleBarClickListener listener){
        this.listener = listener;
    }
    //显示或隐藏左右两边控件的方法
    public void setLeftVisible(boolean flag) {
        if (flag) {
            this.leftButton.setVisibility(View.VISIBLE);
        } else {
            this.leftButton.setVisibility(View.GONE);
        }
    }
    public void setRightVisible(boolean flag) {
        if (flag) {
            this.rightButton.setVisibility(View.VISIBLE);
        } else {
            this.rightButton.setVisibility(View.GONE);
        }
    }

}

3.控件引用
这个就比较简单了，不过只写了第一个的点击事件，其他的都一样
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:titleBar="http://schemas.android.com/apk/res/com.monster.titlebar"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.monster.titlebar.view.TitleBar
        android:id="@+id/titleBar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        titleBar:centerText="洋礼包"
        titleBar:centerTextColor="#000"
        titleBar:centerTextSize="12sp"
        titleBar:leftBackground="@drawable/back"
        titleBar:rightBackground="@drawable/share"
        titleBar:titleBarBackgroundColor="#fff" >
    </com.monster.titlebar.view.TitleBar>

    <com.monster.titlebar.view.TitleBar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        titleBar:centerBackground="@drawable/title"
        titleBar:rightBackground="@drawable/search"
        titleBar:titleBarBackgroundColor="#fff" >
    </com.monster.titlebar.view.TitleBar>

    <com.monster.titlebar.view.TitleBar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        titleBar:centerText="洋礼包"
        titleBar:centerTextColor="#000"
        titleBar:centerTextSize="12sp"
        titleBar:rightText="规则"
        titleBar:rightTextColor="#000"
        titleBar:rightTextSize="8sp"
        titleBar:titleBarBackgroundColor="#fff" >
    </com.monster.titlebar.view.TitleBar>

</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {
    private TitleBar titleBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        titleBar = (TitleBar) findViewById(R.id.titleBar);
        titleBar.setTitleBarClickListener(new TitleBarClickListener() {

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

OK!终于写完了！献上源码源码下载
最后吐槽一下，在帝都找一份Android实习工作真的好难……