首页 > 代码库 > 安卓自定义控件——标题栏的复用

安卓自定义控件——标题栏的复用

一贯作风,先看效果图,再实现

技术分享

编写自定义属性文件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>



安卓自定义控件——标题栏的复用