Android自定义view（二），组合控件Titlebar的定制

最新推荐文章于 2023-03-30 23:50:00 发布

宿罪

最新推荐文章于 2023-03-30 23:50:00 发布

阅读量6.1k

点赞数 3

分类专栏： Android进阶 Android进阶文章标签： android 控件 android开发布局 titlebar

本文链接：https://blog.csdn.net/ydxlt/article/details/50805822

版权

Android进阶同时被 2 个专栏收录

23 篇文章 4 订阅

订阅专栏

Android进阶

22 篇文章 0 订阅

订阅专栏

前言：我相信”天生我才必有用”这句话，每个人都有他的作用，也许他的作用相对其他人来不是很明显，也许他的作用也就是取悦别人，但是请不要忘记，可以通过不断努力来发挥自己的作用，使自己的价值得到提升。

在平时的android开发中你是否遇到一个问题，那就是每次都要自己写一个布局，或者是引入一个布局但每次都要为了给布局中的控件初始化。对于这个问题，谷歌官方推出了ActionBar，以及随后的取代ActionBar的ToolBar来使我们的开发更加简单，如：使用ToolBar+DrawLayout就非常容易实现推酷app的那种菜单效果。这样的一个控件的出现极大地减少了程序员的负担，使得android开发越来越简单，相信以后将会有更多类似的好的控件的出现来简化我们app的开发，呵呵，满期待的~。

这篇文章将介绍一个自己组合的控件Titlebar来简化我们的开发，这个组合控件的实现是个体力活（无技术含量），所以先看一下要实现的效果，如果觉得闭着眼睛就能写出来的，可以直接跳到本篇文章结尾为我辛勤的劳动点个赞，哈哈。

效果图：

这里写图片描述

实现这个组合控件需要我们自定义属性，写一个类继承ViewGroup并在构造方法中用代码添加子View。所以，下面先自定义我们的属性。

1. 自定义属性

通过观察上面的效果图，我们发现我们共需要以下11个属性：

leftButtonText
leftButtonTextColor
leftButtonTextSize
leftButtonImage：左侧按钮的图片
titleText
titleColor
titleSize
rightButtonText
rightButtonTextColor
rightButtonTextSize
rightButtonImage：右侧按钮的图片

各个属性的意思根据名称就知道是什么意思，所以，我们就在资源文件attrs.xml来定义我们的属性：

<declare-styleable name="Titlebar">
    <attr name="leftButtonText" format="string|reference"></attr>
    <attr name="leftButtonTextColor" format="color|reference"></attr>
    <attr name="leftButtonTextSize" format="dimension|reference"></attr>
    <attr name="leftButtonImage" format="color|reference"></attr>

    <attr name="titleText" format="string|reference"></attr>
    <attr name="titleColor" format="color|reference"></attr>
    <attr name="titleSize" format="dimension|reference"></attr>

    <attr name="rightButtonText" format="string|reference"></attr>
    <attr name="rightButtonTextColor" format="color|reference"></attr>
    <attr name="rightButtonTextSize" format="dimension|reference"></attr>
    <attr name="rightButtonImage" format="color|reference"></attr>

</declare-styleable>

注意：

我们可以attrs.xml的<resources>节点下面直接定义我们的属性而不必在<declare-styleable>节点下面定义或引用，然后在布局文件中直接使用，但这种做法不推荐，因为将一些属性添加到一个属性集<declare-styleable>中便于管理和使用。
如果自定义属性和系统属性重名的时候，如果我们要定义属性的类型和系统定义的一样，那么我们可以直接在<declare-styleable>节点中引用系统的属性，即添加一个<attr>节点但不要format属性；

2. 继承ViewGroup，完成控件的组合

观察我们要实现的效果，发现使用ViewGroup的子类RelativeLayout可以很好和方便地完成。所以，新建一个类继承RelativeLayout，重写三个构造方法，在构造方法中先获取布局中自定义属性的值。

private void init(Context context,AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Titlebar);
    mLeftButtonText = typedArray.getString(R.styleable.Titlebar_leftButtonText);
    mLeftButtonTextColor = typedArray.getColor(R.styleable.Titlebar_leftButtonTextColor, Color.GRAY);
    mLeftButtonSize = typedArray.getDimension(R.styleable.Titlebar_leftButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
    mLeftButtonImage = typedArray.getDrawable(R.styleable.Titlebar_leftButtonImage);

    mTitleButtonText = typedArray.getString(R.styleable.Titlebar_titleText);
    mTitleButtonTextColor = typedArray.getColor(R.styleable.Titlebar_titleColor, Color.GRAY);
    mTitleButtonSize = typedArray.getDimension(R.styleable.Titlebar_titleSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

    mRightButtonText = typedArray.getString(R.styleable.Titlebar_rightButtonText);
    mRightButtonTextColor = typedArray.getColor(R.styleable.Titlebar_rightButtonTextColor, Color.GRAY);
    mRightButtonSize = typedArray.getDimension(R.styleable.Titlebar_rightButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
    mRightButtonImage = typedArray.getDrawable(R.styleable.Titlebar_rightButtonImage);

    typedArray.recycle();
}

这里使用完TypedArray这个资源后要记得回收资源，就像使用完数据库后要记得关闭连接和使用完IO流要记得关闭一样。

获取到了自定义属性的值，那么，我们还需要通过代码构建左侧按钮，中间标题，右侧按钮这三个控件：

private void initView(Context context) {
    if(mLeftButtonImage == null & mLeftButtonText != null){
        // 当用户没有设置左侧按钮图片并设置了左侧的按钮文本属性时--添加左侧文本按钮
        mLeftTextView = new TextView(context);
        mLeftTextView.setText(mLeftButtonText);
        mLeftTextView.setTextColor(mLeftButtonTextColor);
        mLeftTextView.setTextSize(mLeftButtonSize);
        RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(mLeftTextView, leftParams);
    }else if(mLeftButtonImage != null){
        // 添加左侧图片按钮
        RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
        mLeftButton = new ImageView(context);
        mLeftButton.setImageDrawable(mLeftButtonImage);
        addView(mLeftButton, leftParams);
    }

    if(mTitleButtonText!=null){
        // 添加中间标题
        TextView titleTextView = new TextView(context);
        titleTextView.setText(mTitleButtonText);
        titleTextView.setTextColor(mTitleButtonTextColor);
        titleTextView.setTextSize(mTitleButtonSize);
        RelativeLayout.LayoutParams titleTextViewParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        titleTextViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(titleTextView,titleTextViewParams);
    }

    if(mRightButtonImage == null & mRightButtonText != null){
        // 当用户没有设置右侧按钮图片并设置了左侧的按钮文本属性时--添加右侧文本按钮
        mRightTextView = new TextView(context);
        mRightTextView.setText(mRightButtonText);
        mRightTextView.setTextColor(mRightButtonTextColor);
        mRightTextView.setTextSize(mRightButtonSize);
        RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(mRightTextView,rightParams);
    }else if(mRightButtonImage != null){
        // 添加右侧图片按钮
        RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        mRightButton = new ImageView(context);
        mRightButton.setImageDrawable(mRightButtonImage);
        addView(mRightButton, rightParams);
    }
}

说明：由于左侧和右侧的按钮既可以使用文字也可以使用图片，所以，这里我使用了两个控件代表这两种情况，当用户设置了左侧按钮图片后就不会添加左侧按钮文本。

接下来我们还需要为左侧和右侧按钮添加事件监听，所以，我们先定义一个接口：

/**
 * 在button点击事件接口
 */
public interface OnButtonClickListener{
    void onLeftClick();
    void onRightClick();
}

设置按钮监听：

/**
 * 设置点击事件
 * @param onButtonClickListener
 */
public void setOnButtonClickListener(final OnButtonClickListener onButtonClickListener) {
    if(onButtonClickListener !=null){
        if(mLeftTextView != null){
            mLeftTextView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onLeftClick();
                }
            });
        }
        if(mLeftButton != null){
            mLeftButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onLeftClick();
                }
            });
        }
        if(mRightTextView != null){
            mRightTextView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onRightClick();
                }
            });
        }
        if(mRightButton != null){
            mRightButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onRightClick();
                }
            });
        }
    }
}

布局中使用我们的组合控件：

include_titlebar.xml

<?xml version="1.0" encoding="utf-8"?>
<com.lt.titlebar.Titlebar xmlns:android="http://schemas.android.com/apk/res/android"
                          xmlns:lt="http://schemas.android.com/apk/res-auto"
                          android:id="@+id/titlebar"
                          android:layout_width="match_parent"
                          android:layout_height="60dp"
                          lt:leftButtonText="返回"
                          lt:leftButtonTextColor="@android:color/white"
                          lt:leftButtonTextSize="8sp"
                          lt:titleText="标题"
                          lt:titleColor="@android:color/white"
                          lt:titleSize="8sp"
                          lt:rightButtonText="完成"
                          lt:rightButtonTextColor="@android:color/white"
                          lt:rightButtonTextSize="8sp"
                          android:background="#ea8010"
                          android:padding="10sp"
                          >

</com.lt.titlebar.Titlebar>

注意：

命名空间的引入;
使用我们自定义的属性可以使用4种情况的组合：
1. 左侧为文本按钮，右侧为文本按钮；
2. 左侧为文本按钮，右侧为图片按钮；
3. 左侧为图片按钮，右侧为文本按钮；
4. 左侧为图片按钮，右侧为图片按钮。
在需要上面类似的标题栏的时候，直接在布局中include引入这个布局文件即可，然后在activity或fragment或其他使用这个控件的地方在初始化这个控件并设置接口监听即可。

在activity中初始化并设置接口监听：

Titlebar titlebar = (Titlebar) findViewById(R.id.titlebar);
titlebar.setOnButtonClickListener(new Titlebar.OnButtonClickListener() {
    @Override
    public void onLeftClick() {
        Toast.makeText(MainActivity.this,"左侧按钮被点击了",0).show();
    }

    @Override
    public void onRightClick() {
        Toast.makeText(MainActivity.this,"右侧按钮被点击了",0).show();
    }
});

就是个体力活，锻炼使用代码创建并布局控件的能力，没什么可总结的~

demo下载：http://download.csdn.net/detail/ydxlt/9453262

宿罪

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
Android自定义view（二），组合控件Titlebar的定制

前言：我相信”天生我才必有用”这句话，每个人都有他的作用，也许他的作用相对其他人来不是很明显，也许他的作用也就是取悦别人，但是请不要忘记，可以通过不断努力来发挥自己的作用，使自己的价值得到提升。在平时的android开发中你是否遇到一个问题，那就是每次都要自己写一个布局，或者是引入一个布局但每次都要为了给布局中的控件初始化。对于这个问题，谷歌官方推出了ActionBar，以及随后的取代ActionB
复制链接

扫一扫