自定义TopBarTest

自定义view的布局

public class WidgetTopBar extends RelativeLayout {

    private ImageButton ibLeft;
    private ImageButton ibRight;
    private Button btnLeft;
    private Button btnRight;
    private TextView tvTitle;
    private String title;
    private String leftText;
    private String rightText;
    private Drawable leftDrawable;
    private Drawable rightDrawable;

    public WidgetTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化属性
        initAttrs(context, attrs);
        //填充视图
        View.inflate(context, R.layout.widget_top_bar, this);
        btnLeft = (Button) findViewById(R.id.btn_left_top_bar);
        ibLeft = (ImageButton) findViewById(R.id.ib_left_top_bar);
        tvTitle = (TextView) findViewById(R.id.tv_title_top_bar);
        btnRight = (Button) findViewById(R.id.btn_right_top_bar);
        ibRight = (ImageButton) findViewById(R.id.ib_right_top_bar);

        //如果属性有值的话，那我们就需要给控件初始化数据了
        initData();
    }

    //初始化属性
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WidgetTopBar);
        // WidgetTopBar_m_left这个名字很奇怪，我们明明没有定义，
        // 这是因为系统自动把我们定义的m_title加到WidgetTopBar后面去了
        //标题
        title = typedArray.getString(R.styleable.WidgetTopBar_m_title);
        //左边按钮的文字
        leftText = typedArray.getString(R.styleable.WidgetTopBar_m_left_text);
        //左边按钮的图片
        rightText = typedArray.getString(R.styleable.WidgetTopBar_m_right_text);
        //右边按钮的文字
        leftDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_left_image);
        //右边按钮的图片
        rightDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_right_image);
    }

    // 初始化数据,因为每个按钮，我都在布局文件中将其显示状态设置为GONE 了
    // 所以在填充数据的时候，要显示一下
    private void initData() {
        if (title != null) {
            tvTitle.setText(title);
        }
        if (leftText != null) {
            btnLeft.setVisibility(VISIBLE);
            btnLeft.setText(leftText);
        }
        if (rightText != null) {
            btnRight.setVisibility(VISIBLE);
            btnRight.setText(rightText);
        }
        if (leftDrawable != null) {
            ibLeft.setVisibility(VISIBLE);
            ibLeft.setBackground(leftDrawable);
        }
        if (rightDrawable != null) {
            ibRight.setVisibility(VISIBLE);
            ibRight.setBackground(rightDrawable);
        }
    }

    //获取左边文字按钮
    public Button getLeftBtnText() {
        return btnLeft;
    }

    //获取右边文字按钮
    public Button getRightBtnText() {
        return btnRight;
    }

    //获取左边图片按钮
    public ImageButton getLeftBtnImage() {
        return ibLeft;
    }

    //获取右边图片按钮
    public ImageButton getRightBtnImage() {
        return ibRight;
    }
}

主Activity的代码

package com.bwie.test.topbartest;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Context mContext = MainActivity.this;

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

        //这是第一个标题
        WidgetTopBar wtbOne = (WidgetTopBar) findViewById(R.id.wtb_one);
        wtbOne.getLeftBtnText().setOnClickListener(this);
        wtbOne.getRightBtnImage().setOnClickListener(this);
        //这是第二个标题
        WidgetTopBar wtbTwo = (WidgetTopBar) findViewById(R.id.wtb_two);
        wtbTwo.getLeftBtnImage().setOnClickListener(this);
        wtbTwo.getRightBtnText().setOnClickListener(this);
        //这是第三个标题
        WidgetTopBar wtbThree = (WidgetTopBar) findViewById(R.id.wtb_three);
        wtbThree.getLeftBtnImage().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "第三个标题 左边按钮", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ib_left_top_bar: {
                Toast.makeText(mContext, "第二个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.ib_right_top_bar: {
                Toast.makeText(mContext, "第一个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_left_top_bar: {
                Toast.makeText(mContext, "第一个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_right_top_bar: {
                Toast.makeText(mContext, "第二个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
        }
    }
}

主布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.bwie.test.topbartest.WidgetTopBar
        android:id="@+id/wtb_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:m_left_text="返回"
        app:m_right_image="@mipmap/ic_launcher"
        app:m_title="这是标题1" />

    <com.bwie.test.topbartest.WidgetTopBar
        android:id="@+id/wtb_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:m_left_image="@mipmap/ic_launcher"
        app:m_right_text="分享"
        app:m_title="这是标题2" />

    <com.bwie.test.topbartest.WidgetTopBar
        android:id="@+id/wtb_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:m_left_image="@mipmap/ic_launcher"
        app:m_title="这是标题3" />
</LinearLayout>

自定义的view的布局格式

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#ff529bff"
    android:layout_height="44dp">

    <Button
        android:id="@+id/btn_left_top_bar"
        android:background="#0000"
        android:textColor="#fff"
        android:textSize="16sp"
        android:visibility="gone"
        android:layout_centerVertical="true"
        android:layout_marginStart="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageButton
        android:id="@+id/ib_left_top_bar"
        android:background="#0000"
        android:visibility="gone"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/tv_title_top_bar"
        android:textSize="18sp"
        android:textColor="#fff"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_right_top_bar"
        android:visibility="gone"
        android:background="#0000"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_marginEnd="10dp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="RelativeOverlap" />

    <ImageButton
        android:id="@+id/ib_right_top_bar"
        android:visibility="gone"
        android:background="#0000"
        android:layout_marginEnd="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_width="30dp"
        android:layout_height="30dp" />
</RelativeLayout>

一个需要的attrs,view的自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--WidgetTopBar是自定义控件的类名-->
    <declare-styleable name="WidgetTopBar">
        <attr name="m_title" format="string" />
        <attr name="m_left_text" format="string" />
        <attr name="m_right_text" format="string" />
        <attr name="m_left_image" format="reference" />
        <attr name="m_right_image" format="reference" />
    </declare-styleable>
</resources>

效果