安卓自訂控制項——標題列的複用

標籤：relativelayout   繼承   布局   控制項   android   

一貫作風，先看，再實現

編寫自訂屬性檔案atts.xml，自訂屬性中涉及到的屬性有左右兩邊的button的背景圖，中間標題的內容，字型大小，字型顏色。

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="TopBar">        <attr name="leftBackground" format="reference"/>        <attr name="rightBackground" format="reference"/>        <attr name="titleText" format="string"/>        <attr name="titleTextSize" format="dimension"/>        <attr name="titleTextColor" format="color|reference"/>    </declare-styleable></resources>

編寫布局檔案layout_topbar.xml，使用相對布局，左邊一個button，跟父控制項靠左對齊後外邊距為5dp，右邊的button也是一樣，中間的標題置中顯示

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    tools:context=".TopBar">    <Button        android:id="@+id/leftButton"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_marginLeft="5dp" />    <TextView        android:id="@+id/titleTextView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_centerHorizontal="true"        android:gravity="center" />    <Button        android:id="@+id/rightButton"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_marginRight="5dp" /></RelativeLayout>

編寫自訂控制項，繼承RelativeLayout，擷取自訂屬性並給對應的控制項賦值

package cn.edu.zafu.view.topbar;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.TextView;/** * Created by lizhangqu on 2015/1/18. */public class TopBar extends RelativeLayout {    private Button leftButton, rightButton;    private TextView titleTextView;    private OnLeftAndRightClickListener listener;//監聽點擊事件    //設定監聽器    public void setOnLeftAndRightClickListener(OnLeftAndRightClickListener listener) {        this.listener = listener;    }    //設定左邊按鈕的可見度    public void setLeftButtonVisibility(boolean flag){        if(flag)            leftButton.setVisibility(VISIBLE);        else            leftButton.setVisibility(INVISIBLE);    }    //設定右邊按鈕的可見度    public void setRightButtonVisibility(boolean flag){        if(flag)            rightButton.setVisibility(VISIBLE);        else            rightButton.setVisibility(INVISIBLE);    }    //按鈕點擊介面    public interface OnLeftAndRightClickListener {        public void onLeftButtonClick();        public void onRightButtonClick();    }    public TopBar(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater.from(context).inflate(R.layout.layout_topbar, this);        leftButton = (Button) findViewById(R.id.leftButton);        rightButton = (Button) findViewById(R.id.rightButton);        titleTextView = (TextView) findViewById(R.id.titleTextView);        leftButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                if (listener != null)                    listener.onLeftButtonClick();//點擊回調            }        });        rightButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                if (listener != null)                    listener.onRightButtonClick();//點擊回調            }        });        //獲得自訂屬性並賦值        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);        int leftBtnBackground = typedArray.getResourceId(R.styleable.TopBar_leftBackground, 0);        int rightBtnBackground = typedArray.getResourceId(R.styleable.TopBar_rightBackground, 0);        String titleText = typedArray.getString(R.styleable.TopBar_titleText);        float titleTextSize = typedArray.getDimension(R.styleable.TopBar_titleTextSize, 0);        int titleTextColor = typedArray.getColor(R.styleable.TopBar_titleTextColor, 0x38ad5a);        typedArray.recycle();//釋放資源        leftButton.setBackgroundResource(leftBtnBackground);        rightButton.setBackgroundResource(rightBtnBackground);        titleTextView.setText(titleText);        titleTextView.setTextSize(titleTextSize);        titleTextView.setTextColor(titleTextColor);    }}

調用自訂控制項

<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"    tools:context=".MainActivity">    <cn.edu.zafu.view.topbar.TopBar        android:id="@+id/topbar"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="#38ad5a"        custom:leftBackground="@drawable/left_button_selector"        custom:rightBackground="@drawable/right_button_selector"        custom:titleText="標題內容"        custom:titleTextColor="#000"        custom:titleTextSize="6sp" /></RelativeLayout>

package cn.edu.zafu.view.topbar;import android.os.Bundle;import android.support.v7.app.ActionBarActivity;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.topbar);        topBar.setOnLeftAndRightClickListener(new TopBar.OnLeftAndRightClickListener() {            @Override            public void onLeftButtonClick() {                Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();            }            @Override            public void onRightButtonClick() {                Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();            }        });        topBar.setLeftButtonVisibility(false);    }}

前面布局中用到的兩個selector如下
編寫left_button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/left_pressed" android:state_pressed="true"/>    <item android:drawable="@drawable/left_normal" /></selector>

編寫right_button_selector.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/right_pressed" android:state_pressed="true"/>    <item android:drawable="@drawable/right_normal" /></selector>

安卓自訂控制項——標題列的複用