Android學習（十七）自定義View控件 TopBar

一、創建自定義TopBar頭部菜單條

　　實現步驟：

　　1、在values中添加attrs.xml文件，設置自定義屬性。

　　2、添加Topbar類，繼承RelativeLayout，實現具體功能。

　　3、添加到頁面上，並設置添加事件。

 

參考代碼：

　　values\attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Topbar">
    <attr name="toptitle" format="string" />                           <!--中間文字，類型字符串-->
    <attr name="titleTextSize" format="dimension" />                   <!--字體大小，類型為數字-->
    <attr name="titleTextColor" format="color"/>                       <!--字體顏色，類型為顏色-->
    <attr name="leftTextColor" format="color"/>                        <!--左側字體顏色，類型為顏色-->
    <attr name="leftBackground" format="reference|color" />            <!--左側背景顏色，類型為圖片和顏色-->
    <attr name="leftText" format="string" />                           <!--左側文字-->
    <attr name="rightTextColor" format="color"/>                       <!--右側文字顏色-->
    <attr name="rightBackground" format="reference|color" />           <!--右側背景-->
    <attr name="rightText" format="string" />                          <!--右側文字-->
</declare-styleable>
</resources>

 

　　TopBar.java，自定義View實現類。

package com.example.zhengcheng.myapplication;

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;

/**
 * Created by zhengcheng on 2015/4/11.
 */
public class TopBar extends RelativeLayout {
    private Button btn_left, btn_right;
    private TextView tv_title;

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

    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;

    private float titleTextSize;
    private int titleTextColor;
    private String toptitle;

    //定義三個布局參數
    private LayoutParams leftParams, rightParams, titleParams;

    //定義一個事件接口
    public interface topbarClickListener{
        public void leftClick();
        public void rightClick();
    }

    //創建接口對象
    public topbarClickListener listener;

    //創建為事件接口賦值的方法
    public void setOnTopBarClickListener(topbarClickListener listener){
        this.listener = listener;
    }

    //構造方法，初始化成員
    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);

        //將XML中定義的自定義屬性映射到attrs中。
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Topbar);

        //從ta結構中獲取數據，類似一種key,value結構，通過R.styleable.Topbar_屬性名獲取
        leftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
        leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackground);
        leftText = ta.getString(R.styleable.Topbar_leftText);

        rightTextColor = ta.getColor(R.styleable.Topbar_rightTextColor, 0);
        rightBackground = ta.getDrawable(R.styleable.Topbar_rightBackground);
        rightText = ta.getString(R.styleable.Topbar_rightText);

        titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
        titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor, 0);
        toptitle = ta.getString(R.styleable.Topbar_toptitle);

        //進行垃圾回收
        ta.recycle();

        //初始化控件
        btn_left = new Button(context);
        btn_right = new Button(context);
        tv_title = new TextView(context);

        //設置控件的值
        btn_left.setTextColor(leftTextColor);          //設置文字顏色
        btn_left.setBackground(leftBackground);        //設置背景
        btn_left.setText(leftText);                    //設置文本

        btn_right.setTextColor(rightTextColor);        //設置文字顏色
        btn_right.setBackground(rightBackground);      //設置背景
        btn_right.setText(rightText);                  //設置文本

        tv_title.setTextColor(titleTextColor);         //設置字體顏色
        tv_title.setTextSize(titleTextSize);           //設置字體大小
        tv_title.setText(toptitle);                    //設置文本
        tv_title.setGravity(Gravity.CENTER);           //居中顯示

        setBackgroundColor(0xfff59563);               //設置View的背景顏色

        //設置布局屬性的width和height
        leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        //設置對齊方式為父容器的左側
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //將左邊按鈕添加到視圖中，並設置布局屬性
        addView(btn_left, leftParams);

        //設置布局屬性的width和height
        rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        //設置對齊方式為父容器的右側
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        //將右邊按鈕添加到視圖中，並設置布局屬性
        addView(btn_right, rightParams);

        //設置布局屬性的width和height
        titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        //設置對齊方式為居中對齊
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        //將中間TextView添加到視圖中，並設置布局屬性
        addView(tv_title, titleParams);

        //添加左側按鈕的Click事件
        btn_left.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });

        //添加右側按鈕的Click事件
        btn_right.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });
    }

    /**
     * 設置左邊按鈕是否隱藏，true隱藏， false消失
     * @param flag
     */
    public void setLeftButtonIsVisiable(boolean flag){
        if(flag){
            btn_left.setVisibility(View.VISIBLE);
        }else{
            btn_left.setVisibility(View.GONE);
        }
    }

    /**
     * 設置右邊按鈕是否隱藏，true隱藏， false消失
     * @param flag
     */
    public void setRightButtonIsVisiable(boolean flag){
        if(flag){
            btn_right.setVisibility(View.VISIBLE);
        }else{
            btn_right.setVisibility(View.GONE);
        }
    }
}

 

　　main.xml，主頁面文件

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <com.example.zhengcheng.myapplication.TopBar
        android:id="@+id/MyTopbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftTextColor="#FFFFFF"
        custom:leftText="Back"
        custom:leftBackground="#ffa4c161"
        custom:rightTextColor="#FFFFFF"
        custom:rightText="More"
        custom:rightBackground="#ffa4c161"
        custom:titleTextSize="8dp"
        custom:titleTextColor="#000000"
        custom:toptitle="自定義模版">
    </com.example.zhengcheng.myapplication.TopBar>
</RelativeLayout>

 

　　main.java 后台代碼文件

package com.example.zhengcheng.myapplication;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TopBar topbar = (TopBar) findViewById(R.id.MyTopbar);

        //設置左右按鈕為隱藏
        topbar.setLeftButtonIsVisiable(false);
        topbar.setRightButtonIsVisiable(false);

        //添加topbar的事件
        topbar.setOnTopBarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"點擊了左邊的按鈕",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"點擊了右邊的按鈕",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

　　全部功能實現，可以使某個功能模塊重復利用。大大提高代碼的福永率，有點類似.net中的用戶控件！