Android——自定义TopBar（ActionBar）

很多时候，我们不止一个Activity用到同样的布局，例如QQ的软件，上面的topbar

动态，更多，联系人，添加，还有头像的图片。 这个没必要每次都要做布局中再写一

遍，可以把这些做成一个控件，也就是自定义View。

我们来看一下接下来要做的效果：

点击后Button的效果：

点击事件触发的事件：

这些都是可以自己控制的。废话不多说，直接上手。

需要这么几步：

1、先要做values下面创建属性的xml。

这里命名成attrs了，看自己。

然后将需要用到的属性都添加到里面。

<resources>

    <declare-styleable name="TopBar">
        <attr name="titleText" format="string" />
        <attr name="titleTextColor" format="color" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="leftText" format="string" />
        <attr name="leftTextColor" format="color"/>
        <attr name="leftTextbackgroung" format="color|reference"/>
        <attr name="leftTextSize" format="dimension"/>
        <attr name="rightText" format="string" />
        <attr name="rightTextColor" format="color"/>
        <attr name="rightTextbackgroung" format="color|reference"/>
        <attr name="rightTextSize" format="dimension"/>
    declare-styleable>

resources>

很可能没有declare-styleable，里面代码不能自动补全，需要自己手动敲出来，

Android会自动识别。declare-styleable 后面的name是该控件的名字。

attr是里面的属性，起一个name，format是类型。这里background可

以是color，也可以是其他引用（例如图片背景），所有是color或者reference。

2、创建TobBar类，继承RelativeLayout（这里RelativeLayout又方便操作点，可以

自己定。） 选择里面带两个参数的构造方法。

！！注意：要创建的类名必须要和declare-styleable中的name相同，否则将无法获得

里面自定义的属性。

package com.example.topbartest;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TopBar extends RelativeLayout {
    //获得里面的控件
    private Button left,right;
    private TextView title;
    //给每个控件定义要用的属性

    //leftbutton

    private String leftText;
    private int leftTextColor;
    private float leftTextSize;
    private Drawable leftBackground;

    //rightbutton
    private String rightText;
    private int rightTextColor;
    private float rightTextSize;
    private Drawable rightBackground;

    //titleTextView
    private String titleText;
    private int titleColor;
    private float titleTextSize;

    //LayoutParams用来对控件进行操作，位置等。
    private LayoutParams leftparams,rightparams,titleparams;

    //类似Button的监听事件 自己定义接口，在setOnTopBarListener（自己定义的）方法中调用接口，new出listener之后需要重写leftonclick和rightonclick。
    private TopBarListener listener;

    public interface TopBarListener{
        void leftOnClick();
        void rightOnClick();
    }
    public void setOnTopBarListener(TopBarListener listener)
    {
        this.listener=listener;
    }

    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        //通过TypedArray获得自己xml定义的属性并赋值给上面定义的属性。
        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        titleText=ta.getString(R.styleable.TopBar_titleText);

    // 0是默认
    titleColor=ta.getColor(R.styleable.TopBar_titleTextColor, 0);
        titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize, 0   );

        leftText=ta.getString(R.styleable.TopBar_leftText);
        leftTextColor=ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        leftBackground=ta.getDrawable(R.styleable.TopBar_leftTextbackgroung);
        leftTextSize=ta.getDimension(R.styleable.TopBar_leftTextSize, 0);

        rightText=ta.getString(R.styleable.TopBar_rightText);
        rightTextColor=ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        rightBackground=ta.getDrawable(R.styleable.TopBar_rightTextbackgroung);
        rightTextSize=ta.getDimension(R.styleable.TopBar_rightTextSize, 0);

        //不要忘记给TypedArray回收一下。
        ta.recycle();

        //创建出3个控件
        left=new Button(context);
        right=new Button(context);
        title=new TextView(context);

        //给控件赋予属性
        left.setText(leftText);
        left.setTextColor(leftTextColor);
        left.setTextSize(leftTextSize);
        left.setBackground(leftBackground);

        right.setText(rightText);
        right.setTextColor(rightTextColor);
        right.setTextSize(rightTextSize);
        right.setBackground(rightBackground);

        title.setText(titleText);
        title.setTextColor(titleColor);
        title.setTextSize(titleTextSize);

        //好比xml的width和height的属性
        leftparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

    //添加位置属性        
    leftparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //将空间和添加的规则绑定
        addView(left,leftparams);

        rightparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        rightparams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(right,rightparams);

        titleparams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        titleparams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(title,titleparams);

        left.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                listener.leftOnClick();
            }
        });

        right.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                listener.rightOnClick();
            }
        });

    }

    //设置左右控件的隐藏
    public void setLeftVisibility(boolean is)
    {
        if(is)
        {
        left.setVisibility(View.VISIBLE);
        }else{
            left.setVisibility(View.INVISIBLE);
        }
    }

    public void setrightVisibility(boolean is)
    {
        if(is)
        {
        right.setVisibility(View.VISIBLE);
        }else{
            right.setVisibility(View.INVISIBLE);
        }
    }

}

TopBar创建好了，然后看看怎么使用。

MainActivity的xml布局中：

"http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res/com.example.topbartest"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.topbartest.MainActivity" >

   <com.example.topbartest.TopBar 
       android:id="@+id/topbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
        app:titleTextSize="15sp"
        app:titleText="中心标题"
        app:titleTextColor="#ff0"
        app:leftText="返回"
        app:leftTextSize="10sp"
        app:leftTextColor="#000"
        app:leftTextbackgroung="@drawable/button_select"
        app:rightText="更多"
        app:rightTextSize="10sp"
        app:rightTextColor="#000"
        app:rightTextbackgroung="@drawable/button_select"
        android:background="#00f"
       >com.example.topbartest.TopBar>

既然是自定义属性，android：是系统的属性， app是自己定义的，必须要加上xmlns:app=”http://schemas.android.com/apk/res/com.example.topbartest”

，或者说有些是xmlns:app=”http://schemas.android.com/apk/res-auto”

接下来效果就达到了。