构建安卓项目通用TitleBar

简介: 构建安卓项目通用TitleBar

前言

每个项目的每个页面基本都会写头布局,但如果每个布局都写一遍头布局的话未免太过于麻烦,所以想着直接写一个吧。

第一种 include

一般这种情况首先想到的肯定是写好布局,然后直接用到的地方include即可。那就来吧!

一般布局的头部可以分为三个模块,左中右,中间一般都是标题,所以直接放上TextView即可,左右有可能是文字也有可能是图片,所以两种都写上,上代码:


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_70"
    android:background="@color/colorAccent"
    android:orientation="vertical"
    android:paddingTop="@dimen/dp_20">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="UselessParent">
        <ImageView
            android:id="@+id/imgBack"
            android:layout_width="@dimen/dp_40"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:paddingTop="@dimen/dp_14"
            android:paddingBottom="@dimen/dp_14"
            android:src="@drawable/img_back" />
        <ImageView
            android:id="@+id/imgRight"
            android:layout_width="@dimen/dp_40"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:paddingTop="@dimen/dp_14"
            android:paddingBottom="@dimen/dp_14"
            android:visibility="gone" />
        <TextView
            android:id="@+id/txtTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="玩安卓"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_18" />
        <TextView
            android:id="@+id/txtRight"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:paddingEnd="@dimen/dp_7"
            android:paddingStart="@dimen/dp_7"
            android:paddingTop="@dimen/dp_14"
            android:paddingBottom="@dimen/dp_14"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_16"
            android:visibility="gone"
            tools:ignore="RtlSymmetry" />
    </RelativeLayout>
</FrameLayout>

写好头布局之后,直接在需要的地方进行include即可:

<include
        layout="@layout/layout_title"/>

如果需要进行修改标题名称或者添加点击事件的话直接进行添加即可。

第二种 自定义View

其实直接include也是可以的,但是千万要记住,程序猿这个物种是非常懒的,能坐着绝对不站着、能躺着绝对不坐着。。。。

所以。。。就连那几行代码都不想写,那就自定义个View吧,因为标题栏的操作一般只有设置标题、返回按钮和确定按钮,所以咱们还可以把设置标题和返回操作直接做好,就不需要每个页面再去写了。

第一步

好了,说干就干,自定义View的第一步是干啥啊?对,创建View 啊!

class TitleBar @JvmOverloads constructor(
    private val mContext: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : RelativeLayout(mContext, attrs, defStyleAttr), View.OnClickListener {}

第二步

上面咱们已经定义好了布局,这里就可以直接进行使用了,直接将布局加载进来进行使用就行:

init {
        initView()
    }
    /**
     * 初始化布局
     */
    private fun initView() {
        //加载布局
        View.inflate(mContext, R.layout.layout_title, this)
        //控制头布局,返回关闭页面
        mImgBack = findViewById(R.id.imgBack)
        //控制标题
        mTitleTv = findViewById(R.id.txtTitle)
        //右边图片
        mImgRight = findViewById(R.id.imgRight)
        //右边文字
        mTxtRight = findViewById(R.id.txtRight)
        mImgBack.setOnClickListener(this)
    }

第三步

好了,这基本已经完成了。很简单吧?但是需要的操作咱们还没干呢,上面说过,咱们需要给一个设置标题的接口:

标题已经设置好了,接下来就是关闭页面:

override fun onClick(v: View) {
        if (v.id == R.id.imgBack) {
            //关闭页面
            if (KeyboardUtils.isSoftInputVisible(mContext as Activity)) KeyboardUtils.hideSoftInput(this)
            mContext.finish()
        }
    }

这里除了关闭页面之外还加了一个操作:关闭输入法弹出框。

第四步

除了这些还要再预留一些接口,比如右边文字的设置以及点击操作、右边按钮的设置以及点击操作等等:

/**
     * 设置返回按钮图片
     *
     * @param imageId 图片id
     */
    fun setBackImage(imageId: Int) {
        if (imageId != 0) {
            mImgBack.setImageResource(imageId)
        }
    }
    /**
     * 设置返回按钮图片是否显示
     *
     * @param imageVisiable 是否显示
     */
    fun setBackImageVisiable(imageVisiable: Boolean) {
        if (imageVisiable) {
            mImgBack.visibility = View.VISIBLE
        } else {
            mImgBack.visibility = View.GONE
        }
    }
    /**
     * 设置右边图片
     *
     * @param imageId 图片id
     */
    fun setRightImage(imageId: Int) {
        if (imageId != 0) {
            require(mTxtRight.visibility != View.VISIBLE) { "文字和图片不可同时设置" }
            mImgRight.visibility = View.VISIBLE
            mImgRight.setImageResource(imageId)
        }
    }
    /**
     * 设置右边文字
     *
     * @param text 文字
     */
    fun setRightText(text: String?) {
        if (text != null) {
            require(mImgRight.visibility != View.VISIBLE) { "文字和图片不可同时设置" }
            mTxtRight.visibility = View.VISIBLE
            mTxtRight.text = text
        }
    }
    /**
     * 设置右边文字背景
     *
     * @param color 颜色
     */
    fun setRightBackColor(color: Int) {
        mTxtRight.setBackgroundColor(color)
    }
    /**
     * 设置右边文字禁止点击
     *
     * @param click 是否可以点击
     */
    fun setRightTextClick(click: Boolean) {
        mTxtRight.isClickable = click
    }
    fun setRightTextOnClickListener(onClickListener: OnClickListener) {
        mTxtRight.setOnClickListener(onClickListener)
    }
    fun setRightImgOnClickListener(onClickListener: OnClickListener) {
        mImgRight.setOnClickListener(onClickListener)
    }
1

使用

好了,写的差不多了,看看如何使用吧?

在需要使用的地方写上布局:

<com.zj.core.util.TitleBar
        android:id="@+id/articleListTitleBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

然后在页面中直接进行需要的操作即可,例如重新设置下标题,并且需要展示返回按钮:

articleListTitleBar.setTitle(keyword)
articleListTitleBar.setBackImageVisiable(true)

是不是很简单呢?

继续优化

刚才说了,程序猿都非常懒,即使封装成这样也是不行的,每个类都需要去代码中设置,直接在布局中写好不得了。。。

好,那就在布局中写好吧。。。。

首先需要在res->values中创建一个attrs.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
</resources>

创建完成之后大概是这样的,然后加入咱们需要设置的操作:标题和返回按钮是否显示:

<declare-styleable name="TitleBar">
        <attr name="titleName" format="string" />
        <attr name="backImageVisiable" format="boolean" />
    </declare-styleable>

好了,这就完事了,下面在自定义View中找到进行使用即可:

private var titleName: String? = null
    private var backImageVisiable: Boolean? = null
    init {
        val attr = context.obtainStyledAttributes(attrs, R.styleable.TitleBar)
        titleName = attr.getString(R.styleable.TitleBar_titleName)
        backImageVisiable = attr.getBoolean(R.styleable.TitleBar_backImageVisiable,true)
    }

上面代码很简单,找到标题的文字和是否显示返回按钮的参数,因为有可能为空,所以初始值定为了null。下面在initView方法中进行判断使用:

if (titleName != null) {
            mTitleTv.text = titleName
        }
        if (backImageVisiable !=null){
            setBackImageVisiable(backImageVisiable!!)
        }

ok了,来试一下吧:

<com.zj.core.util.TitleBar
        android:id="@+id/userTitleBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleName="关于我"
        app:backImageVisiable="true"/>

好嘞,已经实现了咱们需要的基本功能了。

总结

本篇文章很简单,只是一个基本工具,大家可以在此之上多添加一些attrs中的值,多添加一些功能。

本文所有代码都在我写的一个MVVM的玩安卓的工具包中:https://github.com/zhujiang521/PlayAndroid/blob/master/core/src/main/java/com/zj/core/util/TitleBar.kt



相关文章
ArkUI-X添加到现有Android项目中
本教程介绍如何使用ArkUI-X SDK开发Android AAR,实现ArkTS声明式开发在Android平台的显示。主要内容包括:1) 跨平台Library工程开发;2) AAR在Android应用中的集成方式。通过ACE Tools或DevEco Studio完成AAR构建,初始化ArkUI-X,并通过Activity或Fragment加载页面。具体步骤涵盖工程创建、构建AAR包、配置Manifest及使用Intent或Fragment打开页面等。
130 57
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
308 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
415 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
113 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
288 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
132 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
200 6
安卓应用程序开发的新手指南:从零开始构建你的第一个应用
【10月更文挑战第20天】在这个数字技术不断进步的时代,掌握移动应用开发技能无疑打开了一扇通往创新世界的大门。对于初学者来说,了解并学习如何从无到有构建一个安卓应用是至关重要的第一步。本文将为你提供一份详尽的入门指南,帮助你理解安卓开发的基础知识,并通过实际示例引导你完成第一个简单的应用项目。无论你是编程新手还是希望扩展你的技能集,这份指南都将是你宝贵的资源。
365 5
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!
142 0
Android适合构建中大型项目的架构模式全面对比
Android适合构建中大型项目的架构模式全面对比
124 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问