Android自定义View之TitleBar,通用标题栏

学过的东西把它记录下来,不仅加深印象,以后也会用的到........(相信以后的你一定会感激现在拼命的自己)

绪论:

最近小编在学徐大牛的群英传,学到的东西记下来。今天小编来说一下Android自定义View中的自定义标题栏,因为标题栏在我们开发过程中用到的特别多,可以说每一个Activity中都会有标题栏,我们不可能每个布局文件中都去写那么多的代码,为了优化,我们可以定义一个通用的titlebar适合我们每个Activity用。接下来小编将会介绍两种自定义TitleBar的方法.

方法一:

创建复合控件,自定义属性。

1.思路:

   1》自定义titlebar的属性
   2》组合控件
   3》实现接口
   4》引用自定义View

2.实现方法:

首先我们在values文件夹下新建一个attrs.xml,里面包含我们的titlebar中要用到的控件的一些属性,例如标题文本,颜色,字体大小等...
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Title_bar">
        <attr name="titleText" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleColor" format="color"/>
        <attr name="leftBtnText" format="string"/>
        <attr name="leftBtnTextSize" format="dimension"/>
        <attr name="leftBtnBackground" format="reference|color"/>
        <attr name="rightBtnText" format="string"/>
        <attr name="rightBtnTextSize" format="dimension"/>
        <attr name="rightBtnBackground" format="reference|color"/>
    </declare-styleable>
</resources></span>
定义好了属性时候,我们新建一个TitleBarView继承RelativeLayout,在构造方法中获取我们定义的属性值,通过TypeArray来获取自定义的属性值,并做一些初始化的工作
<span style="font-size:14px;">TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Title_bar);
 /**
     * 初始化参数,获取属性值
     * @param context 上下文
     * @param ta
     */
    private void init(Context context,TypedArray ta){
        title = ta.getString(R.styleable.Title_bar_titleText);
        leftBtnText = ta.getString(R.styleable.Title_bar_leftBtnText);
        leftBtnBackground = ta.getDrawable(R.styleable.Title_bar_leftBtnBackground);
        rightBtnText = ta.getString(R.styleable.Title_bar_rightBtnText);
        rightBtnBackground = ta.getDrawable(R.styleable.Title_bar_rightBtnBackground);
        titleTextSize = ta.getDimension(R.styleable.Title_bar_titleTextSize, 10);
        leftBtnTextSize = ta.getDimension(R.styleable.Title_bar_leftBtnTextSize, 8);
        rightBtnTextSize = ta.getDimension(R.styleable.Title_bar_rightBtnTextSize, 8);
        titleTextColor = ta.getColor(R.styleable.Title_bar_titleColor, 0);
        ta.recycle();

        titleTv = new TextView(context);
        leftBtn = new Button(context);
        rightBtn = new Button(context);
        /*设置标题文本*/
        titleTv.setTextSize(titleTextSize);
        titleTv.setText(title);
        titleTv.setTextColor(titleTextColor);
        /*设置左侧按钮*/
        leftBtn.setText(leftBtnText);
        leftBtn.setTextSize(leftBtnTextSize);
        leftBtn.setBackground(leftBtnBackground);
        /*设置右侧按钮*/
        rightBtn.setText(rightBtnText);
        rightBtn.setTextSize(rightBtnTextSize);
        rightBtn.setBackground(rightBtnBackground);
        /*设置控件参数*/
        leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        leftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
        addView(leftBtn, leftParams);
        rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        rightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
        addView(rightBtn, rightParams);
        titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(CENTER_IN_PARENT,TRUE);
        titleParams.addRule(CENTER_VERTICAL);
        addView(titleTv, titleParams);

        leftBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });
        rightBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });


    }</span>
接下来我们定义一个接口,并创建左右按钮的点击事件
<span style="font-size:14px;">/**
     * 定义按钮点击接口,实现回调机制,通过映射的接口对象调用接口中的方法
     * 而不用去考虑如何实现,具体实现由调用者去创建
     */
    public interface TitleBarClickListener{
        void leftClick();   //左侧按钮点击事件
        void rightClick();  //右侧按钮点击事件
    }</span>
实现接口回调,在MainActivity中调用我们的按钮点击接口
<span style="font-size:14px;">titleBarView = (TitleBarView) findViewById(R.id.title_bar);
        titleBarView.setOnTitleBarClickListener(new TitleBarView.TitleBarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
            }
        });</span>
当然我们还可以设置按钮的显示隐藏以及文字和其他的一些事件,随便定义好了,然后在调用者的地方进行调用
<span style="font-size:18px;">/</span><span style="font-size:14px;">**
     * 设置左侧按钮是否可见
     * @param flag  是否可见
     */
    public void setLeftBtnVisable(boolean flag){
        if (flag){
            leftBtn.setVisibility(VISIBLE);
        }else {
            leftBtn.setVisibility(GONE);
        }
    }

    /**
     * 设置右侧按钮是否可见
     * @param flag 是否可见
     */
    public void setRightBtnVisable(boolean flag){
        if (flag){
            rightBtn.setVisibility(VISIBLE);
        }else {
            rightBtn.setVisibility(GONE);
        }</span>
<pre name="code" class="java"><span style="font-size:14px;">btnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                titleBarView.setLeftBtnVisable(false);
            }
        });
        btnRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                titleBarView.setRightBtnVisable(false);
            }
        });</span>
 
  
最后是怎样引用我们的自定义的view了,在我们的布局中添加如下代码:
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<com.hankkin.textviewdemo.view.TitleBarView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="55dp"

    android:id="@+id/title_bar"
    custom:titleText="标题1"
    custom:titleTextSize="15sp"
    custom:titleColor="#000"
    custom:leftBtnText="返回"
    custom:leftBtnTextSize="10sp"
    custom:leftBtnBackground="#f8f8ff"
    custom:rightBtnText="下一步"
    custom:rightBtnTextSize="10sp"
    custom:rightBtnBackground="#f8f8ff"
    >

</com.hankkin.textviewdemo.view.TitleBarView></span>

自定标题栏就OK了

3.总结:

个人在用的时候总觉得这种定义方式不是很方便,因为我们不好把控组件的样式和大小,而且还需要定义那么多的属性感觉有点麻烦,不要着急,下面介绍另一种方法:

方法二:

上一种是我们自定义属性来自定义我们的TitleBar,下面我们直接用LayoutInflate来直接引用我们的布局,然后在里面去修改我们的控件的样式属性

实现方法:

同样我们在构造方法中初始化一些组件属性,并把布局文件引用过来
<span style="font-size:14px;">public TitleBarView1(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    /**
     * 初始化组件
     * @param context
     */
    private void init(Context context){
        LayoutInflater.from(context).inflate(R.layout.titlebar1,this);
        btnLeft = (Button) findViewById(R.id.btn_titlebar_left);
        btnRight = (Button) findViewById(R.id.btn_titlebar_right);
        tvTitle = (TextView) findViewById(R.id.tv_titlebar_name);
        btnLeft.setOnClickListener(this);
        btnRight.setOnClickListener(this);
    }</span>
其他的思路基本都差不多这里就不给大家多介绍了,把代码粘贴过来,小伙伴应该都可以看懂
<span style="font-size:18px;"> </span><span style="font-size:14px;">public void setTitleBarListener(BtnClickListener listener){
        this.listener = listener;
    }

    /**
     * 按钮点击接口
     */
    public interface BtnClickListener{
        void leftClick();
        void rightClick();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_titlebar_left:
                listener.leftClick();
                break;
            case R.id.btn_titlebar_right:
                listener.rightClick();
                break;
            default:
                break;
        }
    }

    /**
     * 设置左侧按钮是否可见
     * @param flag  是否可见
     */
    public void setLeftBtnVisable(boolean flag){
        if (flag){
            btnLeft.setVisibility(VISIBLE);
        }
        else {
            btnLeft.setVisibility(GONE);
        }
    }

    /**
     * 设置右侧按钮是否可见
     * @param flag  是否可见
     */
    public void setRightBtnVisable(boolean flag){
        if (flag){
            btnRight.setVisibility(VISIBLE);
        }
        else {
            btnRight.setVisibility(GONE);
        }
    }</span>
在MainActivity中调用
<span style="font-size:14px;">titleBarView1 = (TitleBarView1) findViewById(R.id.tbv_titlebar);
        titleBarView1.setTitleBarListener(this);
 @Override
    public void leftClick() {
        Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
    }

    @Override
    public void rightClick() {
        Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
    }</span>
最后看一下效果,样式不好看大家多包含,为了方便我把两个TitleBarView放在了一个布局文件中
Android自定义View之TitleBar,通用标题栏_第1张图片
好了代码放到了github上,小伙伴们求star
https://github.com/Hankkin/TitleBarViewDemo.git

在书上我们自定义的属性title、和titleTex跟最新的SDK冲突了,所以这两个属性值修改了,找到了徐哥也给徐哥提了issuse
推荐大家可以看看徐哥的Android群英传比较不错。




你可能感兴趣的:(android,标题栏,自定义view)