Android學習之自定義view——TopBar

每個軟件都有屬於自的TopBar，比如QQ，微信。。。。。
今天我們就來簡單講解一下自定義的TopBar的做法。
首先先來一張效果圖：

一般的TopBar都有三個屬性，一個左Button、右Button，還有就是中間的標題。
然後每個文字都會有各自的屬性，字體大小，字體顏色，背景等等。。。
所以這次，我們先把最基礎的屬性將他配置上
先在value文件下新建attrs.xml文件

<declare-styleable name="TopBar">
        <!-- 標題屬性 -->
        <attr name="titleText" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="titleBackground" format="reference|color"/>
        <!-- 左按鈕屬性 -->
        <attr name="leftText" format="string"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftTextCloor" format="color"/>
        <!-- 右按鈕屬性 -->
        <attr name="rightText" format="string"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightTextColor" format="color"/>


    </declare-styleable>

format是值該屬性的取值類型,一共有：
string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
基礎的屬性弄好之後，想想一般的button還是需要點擊事件的處理，所以下面的代碼已經做了處理，對外暴露出左右按鈕的點擊事件：

package com.jp.view;

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

import com.jp.activity.R;

/**
 * Created by Administrator on 2015/9/3.
 */
public class TopBar extends RelativeLayout
{
    /**
     * torbar的左右兩個按鈕
     */
    private Button leftButton;
    private Button rightButton;
    /**
     * torbar的標題
     */
    private TextView title;

    /**
     * torbar的左按鈕的字體顏色
     */
    private int leftTextColor;
    /**
     * torbar的左按鈕的背景
     */
    private Drawable leftDrawable;
    /**
     * torbar的左按鈕的標題
     */
    private String leftText;

    /**
     * torbar的右按鈕的字體顏色
     */
    private int rightTextColor;
    /**
     * torbar的右按鈕的背景
     */
    private Drawable rightDrawable;
    /**
     * torbar的右按鈕的標題
     */
    private String rightText;

    /**
     * torbar的標題字體大小
     */
    private float titleTextSize;
    /**
     * torbar的標題字體貪色
     */
    private int titleTextColor;
    /**
     * torbar的標題
     */
    private String titleText;

    private Drawable titleBrackgroud;

    private RelativeLayout.LayoutParams leftParams, rightParams, titleParams;

    private TopBarClickListener listener;

    //點擊事件監聽器接口
    public interface TopBarClickListener
    {

        public void leftclick();

        public void rightclick();
    }

    public TopBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        //獲取自定義屬性和值的映射集合
        TypedArray td = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        //取出自定義屬性 - 左側
        leftTextColor = td.getColor(R.styleable.TopBar_leftTextCloor, Color.WHITE);
        leftDrawable = td.getDrawable(R.styleable.TopBar_leftBackground);
        leftText = td.getString(R.styleable.TopBar_leftText);
        //取出自定義屬性 - 右側
        rightTextColor = td.getColor(R.styleable.TopBar_rightTextColor, Color.BLACK);
        rightDrawable = td.getDrawable(R.styleable.TopBar_rightBackground);
        rightText = td.getString(R.styleable.TopBar_rightText);
        //取出自定義屬性 - 標題
        titleTextSize = td.getDimension(R.styleable.TopBar_titleTextSize, 12);
        titleText = td.getString(R.styleable.TopBar_titleText);
        titleTextColor = td.getColor(R.styleable.TopBar_titleTextColor, Color.BLACK);
        titleBrackgroud = td.getDrawable(R.styleable.TopBar_titleBackground);

        //回收TypedArray（避免浪費資源，避免因爲緩存導致的錯誤）
        td.recycle();

        leftButton = new Button(context);
        rightButton = new Button(context);
        title = new Button(context);
        //設置屬性 - 左側
        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftDrawable);
//設置屬性 - 右側
        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightDrawable);
//設置屬性 - 標題
        title.setText(titleText);
        title.setTextColor(titleTextColor);
        title.setTextSize(titleTextSize);
        title.setBackground(titleBrackgroud);
        title.setGravity(Gravity.CENTER);
//設置整體背景顏色
        setBackgroundColor(0xffeb933e);
//設置佈局 - 左
        leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(leftButton, leftParams);
        //設置佈局 - 右
        rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(rightButton, rightParams);
        //設置佈局 - 標題
        titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(title, titleParams);

//設置監聽器
        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 void setLeftIsVisible(boolean visible)
    {
        if (visible) {
            leftButton.setVisibility(View.VISIBLE);
        } else {
            leftButton.setVisibility(View.GONE);
        }
    }

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

接下來看佈局文件，這裏有一點是要提一下
android studio一定要引入
xmlns:custom=”http://schemas.android.com/apk/res-auto”
而ecplice一定要引入
xmlns:custom=”http://schemas.android.com/apk/res/com.example.customview01”我們的命名空間，後面的包路徑指的是項目的package

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

    <com.jp.view.TopBar
        android:background="#eb933e"
        android:id="@+id/topbar_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftText="左菜單"
        custom:leftBackground="#eb933e"
        custom:rightBackground="#00eb933e"
        custom:leftTextCloor="#ffffff"
        custom:rightText="右菜單"
        custom:rightTextColor="#ffffff"
        custom:titleText="我是自定義的"
        custom:titleTextColor="#000000"
        custom:titleTextSize="10sp"
        />
        </RelativeLayout>

最後在MainActivity中使用的方法：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState){

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TopBar topBar = (TopBar) findViewById(R.id.topbar);
/*      topBar.setLeftIsVisible(false);
        topBar.setRightIsVisible(false);*/
        topBar.setOnTopBarClickListener(new TopBarClickListener() {

            @Override
            public void rightclick(){
                Toast.makeText(MainActivity.this, "Right Clicked", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void leftclick(){
                Toast.makeText(MainActivity.this, "Left Clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

}