自定义组合控件——自定义标题TopBar

来源：互联网发布：第一行代码java 编辑：程序博客网时间：2024/06/10 11:18

在android开发工程中，不勉会自己定义一些控件。今天，整理下自定义标题的View，以后要是布局中使用标题，就直接使用这个自定义的view就可以了。

先看效果图:

自定义View的时候，肯定避免不了使用自定义属性，因此，我们写看如何自定义属性。

attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="TopBar">        <attr name="title" 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>

自定义View

TopBar.java

package com.csii.btt.chapter3;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;public class TopBar extends RelativeLayout {    // 包含topbar上的元素：左按钮、右按钮、标题    private Button mLeftButton, mRightButton;    private TextView mTitleView;    // 布局属性，用来控制组件元素在ViewGroup中的位置    private LayoutParams mLeftParams, mTitlepParams, mRightParams;    // 左按钮的属性值，即我们在atts.xml文件中定义的属性    private int mLeftTextColor;    private Drawable mLeftBackground;    private String mLeftText;    // 右按钮的属性值，即我们在atts.xml文件中定义的属性    private int mRightTextColor;    private Drawable mRightBackground;    private String mRightText;    // 标题的属性值，即我们在atts.xml文件中定义的属性    private float mTitleTextSize;    private int mTitleTextColor;    private String mTitle;    // 映射传入的接口对象    private topbarClickListener mListener;    public TopBar(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public TopBar(Context context) {        super(context);    }    public TopBar(Context context, AttributeSet attrs) {        super(context, attrs);        // 设置topbar的背景        setBackgroundColor(0xFFF59563);        // 通过这个方法，将你在attrs.xml中定义的declare-styleable        // 的所有属性的值存储到TypedArray中        TypedArray ta = context.obtainStyledAttributes(attrs,                R.styleable.TopBar);        // 从TypedArray中取出对应的值来为要设置的属性赋值        mLeftTextColor = ta.getColor(                R.styleable.TopBar_leftTextColor, 0);        mLeftBackground = ta.getDrawable(                R.styleable.TopBar_leftBackground);        mLeftText = ta.getString(R.styleable.TopBar_leftText);        mRightTextColor = ta.getColor(                R.styleable.TopBar_rightTextColor, 0);        mRightBackground = ta.getDrawable(                R.styleable.TopBar_rightBackground);        mRightText = ta.getString(R.styleable.TopBar_rightText);        mTitleTextSize = ta.getDimension(                R.styleable.TopBar_titleTextSize, 10);        mTitleTextColor = ta.getColor(                R.styleable.TopBar_titleTextColor, 0);        mTitle = ta.getString(R.styleable.TopBar_title);        // 获取完TypedArray的值后，一般要调用        // recyle方法来避免重新创建的时候的错误        ta.recycle();        mLeftButton = new Button(context);        mRightButton = new Button(context);        mTitleView = new TextView(context);        // 为创建的组件元素赋值        // 值就来源于我们在引用的xml文件中给对应属性的赋值        mLeftButton.setTextColor(mLeftTextColor);        mLeftButton.setBackground(mLeftBackground);        mLeftButton.setText(mLeftText);        mRightButton.setTextColor(mRightTextColor);        mRightButton.setBackground(mRightBackground);        mRightButton.setText(mRightText);        mTitleView.setText(mTitle);        mTitleView.setTextColor(mTitleTextColor);        mTitleView.setTextSize(mTitleTextSize);        mTitleView.setGravity(Gravity.CENTER);        // 为组件元素设置相应的布局元素        mLeftParams = new LayoutParams(                LayoutParams.WRAP_CONTENT,                LayoutParams.MATCH_PARENT);        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);        // 添加到ViewGroup        addView(mLeftButton, mLeftParams);        mRightParams = new LayoutParams(                LayoutParams.WRAP_CONTENT,                LayoutParams.MATCH_PARENT);        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);        addView(mRightButton, mRightParams);        mTitlepParams = new LayoutParams(                LayoutParams.WRAP_CONTENT,                LayoutParams.MATCH_PARENT);        mTitlepParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);        addView(mTitleView, mTitlepParams);        // 按钮的点击事件，不需要具体的实现，        // 只需调用接口的方法，回调的时候，会有具体的实现        mRightButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                mListener.rightClick();            }        });        mLeftButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                mListener.leftClick();            }        });    }    // 暴露一个方法给调用者来注册接口回调    // 通过接口来获得回调者对接口方法的实现    public void setOnTopbarClickListener(topbarClickListener mListener) {        this.mListener = mListener;    }    /**     * 设置按钮的显示与否 通过id区分按钮，flag区分是否显示     *     * @param id   id     * @param flag 是否显示     */    public void setButtonVisable(int id, boolean flag) {        if (flag) {            if (id == 0) {                mLeftButton.setVisibility(View.VISIBLE);            } else {                mRightButton.setVisibility(View.VISIBLE);            }        } else {            if (id == 0) {                mLeftButton.setVisibility(View.GONE);            } else {                mRightButton.setVisibility(View.GONE);            }        }    }    // 接口对象，实现回调机制，在回调方法中    // 通过映射的接口对象调用接口中的方法    // 而不用去考虑如何实现，具体的实现由调用者去创建    public interface topbarClickListener {        // 左按钮点击事件        void leftClick();        // 右按钮点击事件        void rightClick();    }}

blue_button.xml

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape android:shape="rectangle">            <!-- 填充的颜色 -->            <solid android:color="#33444444" />        </shape>    </item>    <item>        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">            <!-- 填充的颜色 -->            <solid android:color="#3EC5FF" />        </shape>    </item></selector>

在MainActivity.java中使用

activity_main.xml

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

MainActivity.java

package com.csii.btt.chapter3;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.Window;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private TopBar mTopBar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        mTopBar = (TopBar)findViewById(R.id.id_topBar);        mTopBar.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();            }        });        //显示左侧按钮        mTopBar.setButtonVisable(0,true);        //不显示右侧按钮        mTopBar.setButtonVisable(1,false);    }}

0 0