android项目中自定义顶部标题栏,Android顶部标题栏--HeaderBarView

最新推荐文章于 2024-08-10 07:47:37 发布
最新推荐文章于 2024-08-10 07:47:37 发布
阅读量461 收藏 1
点赞数
文章标签： android项目中自定义顶部标题栏

cab3f3bcfd57

image.png

cab3f3bcfd57

image.png

cab3f3bcfd57

image.png

第一步：

在values下面新建attrs文件，设置属性

主要设置内容，颜色，图片等

第二步：

设置标题栏的布局文件

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/layout_title"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/layout_left"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="horizontal"

android:paddingLeft="@dimen/size_8"

android:paddingRight="@dimen/size_8"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:id="@+id/iv_left"

android:layout_width="23dp"

android:layout_height="23dp"

android:contentDescription="@null"

android:scaleType="centerInside"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/tv_left"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/tv_left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:maxLength="4"

android:maxLines="1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@+id/iv_left"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/layout_center"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical"

android:paddingLeft="@dimen/size_8"

android:paddingRight="@dimen/size_8"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:id="@+id/tv_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:maxLength="10"

android:maxLines="1" />

android:id="@+id/tv_title_2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:maxLength="10"

android:maxLines="1" />

android:id="@+id/layout_right"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:paddingLeft="@dimen/size_8"

android:paddingRight="@dimen/size_8"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent">

android:id="@+id/tv_right"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:maxLines="1"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toStartOf="@+id/iv_right"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/iv_right"

android:layout_width="23dp"

android:layout_height="23dp"

android:contentDescription="@null"

android:scaleType="centerInside"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@+id/tv_right"

app:layout_constraintTop_toTopOf="parent" />

这里的布局文件是通用的布局文件，需要对此布局根据自己的需求进行配置，这个就需要自定义View了

第三步：

自定义HeaderBarView，主要进行引用布局，初始化view，拿到自定义属性进行相应配置

public HeaderBarView(final Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

LayoutInflater.from(context).inflate(R.layout.zuji_header_bar_view, this);

initView();

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.HeaderBarView, defStyleAttr, 0);

int count = array.getIndexCount();

for (int i = 0; i < count; i++) {

int attr = array.getIndex(i);

switch (attr) {

case R.styleable.HeaderBarView_headerLeftTextColor:

tv_left.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerLeftDrawble:

iv_left.setImageResource(array.getResourceId(attr, 0));

break;

case R.styleable.HeaderBarView_headerLeftTextSize:

// tv_left.setTextSize(array.getDimension(attr,12f));

tv_left.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerLeftText:

tv_left.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterTextColor:

tv_title.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerCenterTitle:

tv_title.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterTextSize:

tv_title.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterText2Color:

tv_title2.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerCenterTitle2:

tv_title2.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterText2Size:

// tv_title2.setTextSize(array.getDimensionPixelSize(attr, 12));

// int size = array.getDimensionPixelSize(attr, 0);

tv_title2.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterTitle2Visibility:

String visible = array.getString(attr);

setVisibility(tv_title2,visible);

break;

case R.styleable.HeaderBarView_headerCenterTitle2DrawableLeft:

Drawable drawableLeft = null;

drawableLeft = array.getDrawable(attr);

/// 这一步必须要做,否则不会显示.

drawableLeft.setBounds(0, 0, drawableLeft.getMinimumWidth(), drawableLeft.getMinimumHeight());

tv_title2.setCompoundDrawables(drawableLeft, null, null, null);

break;

case R.styleable.HeaderBarView_headerRightDrawable:

iv_right.setImageResource(array.getResourceId(attr, 0));

break;

case R.styleable.HeaderBarView_headerRightText:

tv_right.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerRightTextColor:

tv_right.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerRightTextSize:

tv_right.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterLeftDrawbleVisibility:

String visible2 = array.getString(attr);

setVisibility(iv_left,visible2);

break;

case R.styleable.HeaderBarView_headerCenterRightDrawableVisibility:

String visible3 = array.getString(attr);

setVisibility(iv_right,visible3);

break;

}

}

array.recycle();

layout_left.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

if (mClick != null)

mClick.leftClick(view);

}

});

layout_right.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

if (mClick != null)

mClick.rightClick(view);

}

});

}

然后我们需要添加左侧，右侧的点击事件，由于一般反馈点击范围太小，导致点击灵敏性较差，所以这里全部设置对左侧，右侧布局进行监听，而不是单个控件

设置回调接口

private onViewClick mClick;

public void setOnViewClick(onViewClick click) {

this.mClick = click;

}

public interface onViewClick {

void leftClick();

void rightClick();

}

在调用的时候拿到自定义view对象setOnViewClick即可

全部代码如下：

package com.zuji.entrance.widget;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.support.constraint.ConstraintLayout;

import android.text.TextUtils;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.TextView;

import com.zuji.library.R;

/**

* Created by fangyc on 2018/7/19.

*/

public class HeaderBarView extends ConstraintLayout {

private ConstraintLayout layout_left, layout_right;

private TextView tv_left, tv_title, tv_title2, tv_right;

private ImageView iv_left, iv_right;

private onViewClick mClick;

public HeaderBarView(Context context) {

this(context, null);

}

public HeaderBarView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public HeaderBarView(final Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

LayoutInflater.from(context).inflate(R.layout.zuji_header_bar_view, this);

initView();

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.HeaderBarView, defStyleAttr, 0);

int count = array.getIndexCount();

for (int i = 0; i < count; i++) {

int attr = array.getIndex(i);

switch (attr) {

case R.styleable.HeaderBarView_headerLeftTextColor:

tv_left.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerLeftDrawble:

iv_left.setImageResource(array.getResourceId(attr, 0));

break;

case R.styleable.HeaderBarView_headerLeftTextSize:

// tv_left.setTextSize(array.getDimension(attr,12f));

tv_left.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerLeftText:

tv_left.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterTextColor:

tv_title.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerCenterTitle:

tv_title.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterTextSize:

tv_title.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterText2Color:

tv_title2.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerCenterTitle2:

tv_title2.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerCenterText2Size:

// tv_title2.setTextSize(array.getDimensionPixelSize(attr, 12));

// int size = array.getDimensionPixelSize(attr, 0);

tv_title2.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterTitle2Visibility:

String visible = array.getString(attr);

setVisibility(tv_title2,visible);

break;

case R.styleable.HeaderBarView_headerCenterTitle2DrawableLeft:

Drawable drawableLeft = null;

drawableLeft = array.getDrawable(attr);

/// 这一步必须要做,否则不会显示.

drawableLeft.setBounds(0, 0, drawableLeft.getMinimumWidth(), drawableLeft.getMinimumHeight());

tv_title2.setCompoundDrawables(drawableLeft, null, null, null);

break;

case R.styleable.HeaderBarView_headerRightDrawable:

iv_right.setImageResource(array.getResourceId(attr, 0));

break;

case R.styleable.HeaderBarView_headerRightText:

tv_right.setText(array.getString(attr));

break;

case R.styleable.HeaderBarView_headerRightTextColor:

tv_right.setTextColor(array.getColor(attr, Color.BLACK));

break;

case R.styleable.HeaderBarView_headerRightTextSize:

tv_right.setTextSize(TypedValue.COMPLEX_UNIT_PX, array.getDimensionPixelSize(attr, 0));

break;

case R.styleable.HeaderBarView_headerCenterLeftDrawbleVisibility:

String visible2 = array.getString(attr);

setVisibility(iv_left,visible2);

break;

case R.styleable.HeaderBarView_headerCenterRightDrawableVisibility:

String visible3 = array.getString(attr);

setVisibility(iv_right,visible3);

break;

}

}

array.recycle();

layout_left.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

if (mClick != null)

mClick.leftClick(view);

}

});

layout_right.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

if (mClick != null)

mClick.rightClick(view);

}

});

}

private void setVisibility(View view,String visible){

visible = TextUtils.isEmpty(visible) ? "visible" : visible;

switch (visible) {

case "gone":

view.setVisibility(View.GONE);

break;

case "visible":

view.setVisibility(View.VISIBLE);

break;

case "invisible":

view.setVisibility(View.INVISIBLE);

break;

default:

view.setVisibility(View.VISIBLE);

break;

}

}

private void initView() {

tv_left = findViewById(R.id.tv_left);

tv_title = findViewById(R.id.tv_title);

tv_title2 = findViewById(R.id.tv_title_2);

tv_right = findViewById(R.id.tv_right);

iv_left = findViewById(R.id.iv_left);

iv_right = findViewById(R.id.iv_right);

layout_left = findViewById(R.id.layout_left);

layout_right = findViewById(R.id.layout_right);

}

public void setOnViewClick(onViewClick click) {

this.mClick = click;

}

//设置标题

public void setTitle(String title) {

if (!TextUtils.isEmpty(title)) {

tv_title.setText(title);

}

}

//设置左标题

public void setLeftText(String title) {

if (!TextUtils.isEmpty(title)) {

tv_left.setText(title);

}

}

//设置右标题

public void setRightText(String title) {

if (!TextUtils.isEmpty(title)) {

tv_right.setText(title);

}

}

//设置标题大小

public void setTitleSize(int size) {

if (tv_title != null) {

tv_title.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);

}

}

//设置左标题大小

public void setLeftTextSize(int size) {

if (tv_left != null) {

tv_left.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);

}

}

//设置右标题大小

public void setRightTextSize(int size) {

if (tv_right != null) {

tv_right.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);

}

}

//设置左图标

public void setLeftDrawable(int res) {

if (iv_left != null) {

iv_left.setImageResource(res);

}

}

//设置右图标

public void setRightDrawable(int res) {

if (iv_right != null) {

iv_right.setImageResource(res);

}

}

public interface onViewClick {

void leftClick(View view);

void rightClick(View view);

}

}

引用如下：

android:id="@+id/title_bar"

android:layout_width="match_parent"

android:layout_height="@dimen/zuji_title_bar_height"

android:background="#4588f5"

app:headerCenterTextColor="#FFF"

app:headerCenterTextSize="14dp"

app:headerCenterTitle="旅行足迹"

app:headerCenterTitle2Visibility="gone"

app:headerLeftDrawble="@drawable/zuji_title_bar_back"

app:headerRightDrawable="@drawable/zuji_title_bar_more"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/title_bar"

android:layout_width="match_parent"

android:layout_height="62dp"

android:background="#ffffff"

app:headerCenterText2Color="#999999"

app:headerCenterText2Size="10dp"

app:headerCenterTextColor="#222222"

app:headerCenterTextSize="16dp"

app:headerCenterTitle="广州市"

app:headerCenterTitle2=" 仅自己可见"

app:headerCenterTitle2DrawableLeft="@drawable/zuji_privacy_icon"

app:headerLeftDrawble="@drawable/zuji_header_black_back_default"

app:headerRightDrawable="@drawable/zuji_black_share_icon_default" />

android:id="@+id/title_bar"

android:layout_width="match_parent"

android:layout_height="62dp"

android:background="#ffffff"

app:headerCenterTextColor="#222222"

app:headerCenterTextSize="16dp"

app:headerCenterTitle="点评"

app:headerCenterTitle2Visibility="gone"

app:headerLeftText="取消"

app:headerCenterLeftDrawbleVisibility="gone"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

写剧本的
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android项目中自定义顶部标题栏,Android自定义顶部标题栏
weixin_33267354的博客
05-25 836
Android自定义顶部标题栏发布时间：2020-08-25 07:51:07来源：脚本之家阅读：105作者：习惯了沉默012本文实例为大家分享了Android自定义顶部标题栏展示的具体代码，供大家参考，具体内容如下思路及实现步骤1.定义标题栏布局2.自定义TitleActivity控制标题栏按钮监听3.在TitleActivity中实现标题栏以下内容切换首先定义标题栏android:id="@+...
android项目中自定义顶部标题栏,Android项目中自定义顶部标题栏
weixin_42378094的博客
05-25 1769
Android项目中自定义顶部标题栏下面给大家详细介绍android中自定义顶部标题栏的思路及实现方式先来图： 思路及实现步骤1.定义标题栏布局2.自定义TitleActivity控制标题栏按钮监听3.在TitleActivity中实现标题栏以下内容切换首先定义标题栏定义控制标题栏按钮和标题栏以下内容的布局注：此处使用 标签引入标题栏，且下方有定义一个空的FrameLayout的布...
Android项目中利用组合控件自定义全局的顶部标题栏
热门推荐
java后台, 安卓App, 微信小程序都会, 有需要的可以联系!
12-01 2万+
实现功能： 1）自定义View标题栏布局； 2）灵活的可以自己传入类型,选择所需要的控件来显示隐藏 3）相对于我之前写过的一篇,免继承,可直接在布局里使用 4）直接可以在布局控件里设置属性 老规矩,上几张效果图： 由效果图可见,这个是可以根据传入type来控制,比较灵活的 下面就来实现以下步骤,最后我会贴上源码 1.创建一个布局文件,命名,layout...
Android标题栏框架(TitleBar)全面指南
最新发布
gitblog_00808的博客
08-10 368
Android标题栏框架(TitleBar)全面指南 TitleBarAndroid 标题栏框架，从此布局属性不用记项目地址:https://gitcode.com/gh_mirrors/ti/TitleBar 项目介绍 TitleBar 是一款专为Android设计的标题栏框架，它简化了开发者对于各种屏幕尺寸及方向自适应的需求处理，使得布局属性配置变得简单明快。该项目由getActivity维...
Android项目中自定义顶部标题栏
04-25
1.定义标题栏布局 2.自定义TitleActivity控制标题栏按钮监听 3.在TitleActivity中实现标题栏以下内容切换
Android自定义顶部标题栏
08-31
Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏Android自定义顶部标题栏
Android项目中自定义顶部标题栏，android物联网开发李天祥
m0_66070605的博客
01-07 3302
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.widget.Button; import android.widget.FrameLayout; import android.widget.Te
Android 灵活的自定义顶部标题栏
09-19
本文将详细讲解如何实现一个灵活的自定义顶部标题栏，支持通过传入不同`type`值来控制标题栏上的控件显示与隐藏。我们将以“CustomTitleBar”为例，探讨其设计思路和实现方法。 首先，我们需要创建一个自定义的标题...
Android自定义简单的顶部标题栏
01-04
本文实例为大家分享了Android实现简单顶部标题栏的具体代码，供大家参考，具体内容如下 实现功能： 1）自定义View标题栏布局； 2）灵活的可以自己传入类型,选择所需要的控件来显示隐藏 3）相对于我之前写过的一篇,免继承,可直接在布局里使用 4）直接可以在布局控件里设置属性 老规矩,上几张效果图： 由效果图可见,这个是可以根据传入type来控制,比较灵活的 下面就来实现以下步骤,最后我会贴上源码 1.创建一个布局文件,命名,layout_titlebar,来部署我们的标题栏样式,可以自定义更改,图片文件可暂时用自己的替代 <?xml version=1.0 encoding=u
android自定义系列（六）--打造属于自己的头部栏
12-20
博客代码，想仔细了解可以访问我的博客：http://blog.sina.com.cn/s/blog_9c4f0e790102vzih.html
Android实现ActionBar顶部标题栏的简单示例
06-06
用ActionBar取代Android3.0之前的顶部标题栏，效果更炫，功能更丰富。项目中包含：源码+效果图+项目结构图 效果见博客地址：http://blog.csdn.net/yangyu20121224/article/details/9042387
Android自定义控件——Android项目中自定义顶部标题栏
Tomasyb的博客
07-24 557
标题栏每个App都会使用到，为了简化代码结构不必要每个activity都去写大量的代码我们封装了一个类专门来自定义Title，使用方便简单。容易复用。一、创建TitleBar类package com.android.daqsoft.emergent.view;import android.content.Context; import android.content.res.Resources; i
Android自定义标题栏
2401_84121627的博客
04-17 752
*一个零基础的新人，我认为坚持是最最重要的。**我的很多朋友都找我来学习过，我也很用心的教他们，可是不到一个月就坚持不下来了。我认为他们坚持不下来有两点主要原因：他们打算入行不是因为兴趣，而是因为所谓的IT行业工资高，或者说完全对未来没有任何规划。刚开始学的时候确实很枯燥，这确实对你是个考验，所以说坚持下来也很不容易，但是如果你有兴趣就不会认为这是累，不会认为这很枯燥，总之还是贵在坚持。技术提升遇到瓶颈了？缺高级Android进阶视频学习提升自己吗？还有大量大厂面试题为你面试做准备！
Android 使用 ToolBar 实现顶部标题栏
girls的博客
12-15 829
MainActivity_toolbar package com.example.myapplication_one; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.ContextMenu; import android.view.Menu; import android.view
Android自定义view----顶部标题栏1
yk2fxy的博客
10-25 535
Android自定义view----顶部标题栏1  1.效果图                  2.思路        自定义标题栏一共有两种思路：        1）将标题栏定义成一个item，然后在使用的地方用标签“include”引入                标题栏item代码： <android.support.constraint.ConstraintLayo
Android自定义顶部标题栏实战教程
"这篇文章主要介绍了如何在Android应用中自定义顶部标题栏，通过定义布局、创建自定义TitleActivity以及实现在标题栏下内容的切换来实现这一功能。" 在Android开发中，自定义顶部标题栏是一项常见的任务，它能够使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值