自定义ViewGroup之Topbar----布局代码的缩减，实现app风格的高度一致

关注

原创最新推荐文章于 2026-02-18 00:41:57 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Android view手势拖动和缩放在实际开发中很多地方都要用自定义的手势缩放和可移动的view，在下在开发不久的时候就遇到啦，当时还不懂手势拖动，经过了各种摸索和查阅终于是自己写出来了，感觉收获颇多，这里我是用的矩阵来对自定义的ImageView进行手势缩放和移动的，感觉matrix真是强大的，稍后我定要详细研究一下Matrix, 之后也会写一片博客大家一起讨论啊，学好数学还真是有用，这里我用的OntouchEvent来做的，下面看阅读详情

最近写项目，有二三十个布局，都具有相同风格的标题栏，如果每一个界面都反复写一个布局，重复的工作太多，代码重复也多，于是自定义一个ViewGroup作为通用的Topbar，通过设置标签属性达到风格一致，细节不同的效果，大量缩减代码量和布局的复杂度，切能让app风格高度一致；

主要实现功能：

1、可自由设置布局背景、图标

2、自由控制Topbar中button的显示和隐藏

3、可为不同的Button添加点击监听事件

先上效果图：

实现步骤

1、在values文件夹中新建一个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="leftButtonTextColor" format="color"/>
        <attr name="leftButtonBackground" format="reference|color"/>
        <attr name="leftButtonText" format="string"/>

        <attr name="rightButtonTextColor" format="color"/>
        <attr name="rightButtonBackground" format="reference|color"/>
        <attr name="rightButtonText" format="string"/>

    </declare-styleable>
    
</resources>

布局左侧一个Button 中间一个显示标题的TextView 右侧一个Button

2、新建一个类，继承自RelativeLayout，在此类中实现资源属性的获取和赋值，和内部控件的布局，自定义监听接口，实现不同按钮的点击效果，添加方法，实现控件的显示和隐藏，代码如下：

package com.dz.qiangwan.view;

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.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.dz.qiangwan.qwtest.R;

/**
 * Created by Administrator on 2016/11/9.
 */

public class Topbar extends RelativeLayout {
    private Button leftButton,rightButton;//左侧和右侧按钮
    private TextView titleTextView;   //标题TV

    private int leftTextColor; //左侧按钮的属性
    private String leftText;
    private Drawable leftBackground;

    private int rightTextColor;//右侧按钮的属性
    private String rightText;
    private Drawable rightBackground;

    private String titleText;    //标题相关的属性
    private float titleTextSize;
    private int titleTextColor;

    LayoutParams leftParams,rightParams,titleParams;
    
    private OnTopbarClickListener mTopbarClickListener;
    
    //定义点击Topbar监听接口
    public interface OnTopbarClickListener{
        void onLeftClick();
        void onRightClick();
    }

    public void setOnTopbarClickListener(OnTopbarClickListener onTopbarClickListener){
        this.mTopbarClickListener = onTopbarClickListener;
    }


    public Topbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
        //获取左侧button定义的属性
        leftTextColor=typedArray.getColor(R.styleable.Topbar_leftButtonTextColor,0);
        leftText=typedArray.getString(R.styleable.Topbar_leftButtonText);
        leftBackground=typedArray.getDrawable(R.styleable.Topbar_leftButtonBackground);
        //获取右侧button定义的属性
        rightTextColor=typedArray.getColor(R.styleable.Topbar_rightButtonTextColor,0);
        rightText=typedArray.getString(R.styleable.Topbar_rightButtonText);
        rightBackground=typedArray.getDrawable(R.styleable.Topbar_rightButtonBackground);
        //获取标题定义的属性
        titleText=typedArray.getString(R.styleable.Topbar_title);
        titleTextSize = typedArray.getDimension(R.styleable.Topbar_titleTextSize,12);
        titleTextColor = typedArray.getColor(R.styleable.Topbar_titleTextColor,0);

        //释放资源
        typedArray.recycle();
        //为按钮和标题设置属性
        leftButton = new Button(context);
        rightButton = new Button(context);
        titleTextView = new TextView(context);

        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);
        
        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);

        titleTextView.setText(titleText);
        titleTextView.setTextColor(titleTextColor);
        titleTextView.setTextSize(titleTextSize);
        titleTextView.setGravity(Gravity.CENTER);

        this.setBackgroundColor(getResources().getColor(R.color.colorTheme));

        //将控件以对应的参数添加到RelativeLayout中
        leftParams = new LayoutParams(65,65);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(leftButton,leftParams);

        rightParams = new LayoutParams(65,65);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(rightButton,rightParams);

        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(titleTextView,titleParams);

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mTopbarClickListener!=null){
                    mTopbarClickListener.onLeftClick();
                }
            }
        });

        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mTopbarClickListener!=null){
                    mTopbarClickListener.onRightClick();
                }
            }
        });
    }

    public void setLeftButtonInvisible(){
            leftButton.setVisibility(View.INVISIBLE);
    }

    public void setRightButtonInVisible(){
            rightButton.setVisibility(View.INVISIBLE);
    }


}

3、自定义布局的使用：

    <com.dz.qiangwan.view.Topbar
        android:paddingLeft="5dp"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        custom:rightButtonBackground="@mipmap/setting"
        custom:title="个人中心"
        custom:titleTextSize="6dp"
        custom:titleTextColor="#ffffff"
        android:paddingRight="5dp"
        />

注意根布局中要声明此行代码：

xmlns:custom="http://schemas.android.com/apk/res-auto"

4、控件在代码中的使用

    private void initView() {
        topbar = (Topbar) findViewById(R.id.topbar);
    }

    private void setListener(){
        topbar.setOnTopbarClickListener(new Topbar.OnTopbarClickListener() {
            @Override
            public void onLeftClick() {
                Toast.makeText(MainActivity.this, "左侧按钮被点击了", Toast.LENGTH_SHORT).show();
            }

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

使用起来简单方便，最重要的是复用度高，大大减少布局代码和布局复杂度，使app风格完全统一。以上供各位参考指教。