自定义View之顶部导航栏

很多应用都用到了顶部导航栏，且形式极度相似，如果为每个Activity都配置一次不仅费时费力，而且统一性还得不到很好的保证，因此如果能够通过自定义View来将我们做好的一个可自定义的顶部导航栏控件做成像系统提供的TextView等控件那样可以直接在xml文件中引用的话，刚才提到的问题就能够很好的解决。

·首先需要在res目录下的values文件下创建一个atts.xml文件，该文件用于定义自定义控件的属性。

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

    <declare-styleable name="TopBar">
        <attr name="titleText" format="string" />
        <attr name="tilteTextSize" format="dimension" />
        <attr name="tilteTextColor" format="color" />

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

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

</resources>

通过设置declare-styleable标签下的attr标签的name属性和format属性来设置我们自定义控件的属性和相应类型，format属性点可以理解为我们要自定义的控件的属性的类型。比如titleText(标题文字)属性的类型显然是String类型,而当给属性赋值时若需要@+id或者@drawable则要用到reference类型，例如leftBackground的类型应为reference或者color类型。

·定义好自定义控件的属性值及类型后，需要新建一个继承RelativeLayout的类，由这个类完成我们自定义的属性的调用并生成自定义控件，填充到Activity中。

package com.example.topbardemo;

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

@SuppressLint({ "Recycle", "NewApi" })
public class TopBar extends RelativeLayout {

    //控件
    private Button leftButton,rightButton;
    private TextView tvTitle;

    //属性
    private String titleText;
    private int titleTextColor;
    private float titleTextSize;

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

    private String rightText;
    private int rightTextColor;
    private float rightTextSize;
    private Drawable rightBacakaground;

    private LayoutParams leftParams,rightParams,titleParams;


    @SuppressLint("NewApi")
    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        titleText = ta.getString(R.styleable.TopBar_titleText);
        titleTextColor = ta.getColor(R.styleable.TopBar_tilteTextColor, 0);
        titleTextSize = ta.getDimension(R.styleable.TopBar_tilteTextSize, 0);

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

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


        //回收
        ta.recycle();

        tvTitle = new TextView(context);
        leftButton = new Button(context);
        rightButton = new Button(context);

        tvTitle.setText(titleText);
        tvTitle.setTextSize(titleTextSize);
        tvTitle.setTextColor(titleTextColor);
        tvTitle.setGravity(Gravity.CENTER);

        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBacakaground);
        leftButton.setTextSize(leftTextSize);

        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBacakaground);
        rightButton.setTextSize(rightTextSize);

        setBackgroundColor(0xff59563);

        leftParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        leftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
        addView(leftButton, leftParams);

        rightParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        rightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);
        addView(rightButton, rightParams);

        titleParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(CENTER_IN_PARENT, TRUE);
        addView(tvTitle, titleParams);

        leftButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                barBtnClick.leftBtnClick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {

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

    private OnTopBarBtnClick barBtnClick;

    public interface OnTopBarBtnClick{
        public void leftBtnClick();
        public void rightBtnClick();
    }

    public void SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick){
        this.barBtnClick = barBtnClick;
    }

    //设置左右按钮是否可见

    public void setLeftBtnVisibled(boolean flag){
        if (flag) {
            leftButton.setVisibility(View.VISIBLE);
        }else {
            leftButton.setVisibility(View.GONE);
        }
    }

    public void setRightBtnVisibled(boolean flag){
        if (flag) {
            rightButton.setVisibility(View.VISIBLE);
        }else {
            rightButton.setVisibility(View.GONE);
        }
    }

}

这个类中先是利用了context的obtainStyledAttributes (AttributeSet set, int[] attrs) 方法，取出了我们先前在atts.xml文件中定义的自定义控件的属性（注意是一个typedArray），然后利用了typedArray的getString，getDimension等方法将我呢边定义的属性按类型取出（注意取出时的名字命名规则为自定义控件的名称_属性名称，例如getString(R.styleable.TopBar_titleText)）。
然后就是声明了Button,TextView等原生控件，并将自定义的属性赋予给他们。又用到了LayoutParams，利用其addRule，addView等方法将控件添加到Activity界面中去。至此，自定义的TopBar已经有了初步的样子。但是还缺少Button的相应的点击事件的处理，因此我们模仿系统的setOnclickListener（new OnClickListener{}）方法（即接口回调的原则）设计了相应的接口，即

public interface OnTopBarBtnClick{
        public void leftBtnClick();
        public void rightBtnClick();
    }

    public void SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick){
        this.barBtnClick = barBtnClick;
    }

这样，只需要在用到了这个空间的Activity中调用topBar的SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick)方法，并实现相应的leftBtnClick()，rightBtnClick()即可。

package com.example.topbardemo;

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

import com.example.topbardemo.TopBar.OnTopBarBtnClick;

public class MainActivity extends Activity {

    private TopBar topBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        topBar = (TopBar) findViewById(R.id.topBar);
        topBar.SetOnTopBarBtnClick(new OnTopBarBtnClick() {

            @Override
            public void rightBtnClick() {
                // TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(), "确认", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void leftBtnClick() {
                // TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(), "取消", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

·接下来我们说一下如何在xml文件中调用自定义的控件，先贴代码。

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

    <com.example.topbardemo.TopBar
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:leftBackground="#555555"
        app:leftText="返回"
        app:leftTextColor="#000000"
        app:leftTextSize="12sp"

        app:rightBackground="#555555"
        app:rightText="确认"
        app:rightTextColor="#000000"
        app:rightTextSize="12sp"

        app:tilteTextColor="#000000"
        app:tilteTextSize="12sp"
        app:titleText="标题" >
    </com.example.topbardemo.TopBar>

</RelativeLayout>

可以看出只要调用名称为：包名加类型的标签即可调用我们自定义的控件，那如何调用我们自定义的属性呢，同样先看看系统是 如何调用的，不难发现调用系统的原声控件时都会有android：开头，而xml文件开始的时候也有xmlns:android=”http://schemas.android.com/apk/res/android”，其实这类似于java代码中要使用一个类，必须要先进行声明，而这句话就相当于声明了，那如果我们要声明自定义的控件，eclipse中只需将res/后面的android换成控件的包名+类名即可，然后在使用定义的名称（这里是app）引用相应的属性就行了。

---

此为相应视频教程的学习笔记，若有不妥之处，欢迎提出，以做到及时改正。
完整代码下载：http://download.csdn.net/detail/u012483425/8515197
该视频教程地址为：http://www.imooc.com/learn/247