Android自定义View-TitleBar（标题栏）详细说明

最新推荐文章于 2024-09-22 06:58:35 发布
最新推荐文章于 2024-09-22 06:58:35 发布
阅读量2.3k 收藏 4
点赞数 4
分类专栏： Android实践与思索 文章标签： 布局 android View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010228448/article/details/52486326
版权

我们在开发Android界面时常常要在许多页面中共用风格相似的标题栏，为了减少重复性工作我们可以将标题栏做成一个通用的自定义控件。

我将通过两种形式的自定义方式介绍自定义TitleBar


第一种方式（不涉及自定义属性）

首先通过在Layout中建一个布局文件先确定Title的主要子控件titlebar.xml 如下包含2个Button 一个TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:background="@color/bg_title_bar"
    android:orientation="horizontal" >
        <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" />
      <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       />
</LinearLayout>

当然如果我们之后不需要频繁改变上述布局中各个子控件的样式和内容，就可以直接在JAVA代码中获取并绑定监控器如下;

package com.example.briefvideo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定义的TitleBar控件
 * 
 * @author baron 提供监听器接口，调用者可以实现监听器接口包含左右两个按钮的点击事件方法 然后绑定监听器
 */
public class TitleBarView extends LinearLayout {
	// 右侧按钮属性
	Button btnRight;
	// 左侧按钮属性
	Button btnLeft;
	// 标题
	TextView tvTitle;
	BtnClickListener listener;

	public TitleBarView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}
	/**
	 * 初始化组件
	 * 
	 * @param context
	 */
	private void init(Context context) {
		LayoutInflater.from(context).inflate(R.layout.titlebar, this);
		btnLeft = (Button) findViewById(R.id.btn_left);
		btnRight = (Button) findViewById(R.id.btn_right);
		tvTitle = (TextView) findViewById(R.id.title);
	
		btnLeft.setText(leftTxt);
		if(leftable==false){
			btnLeft.setVisibility(View.GONE);	
		}
		btnRight.setText(rightTxt);
		if(rightable==false){
			btnRight.setVisibility(View.GONE);	
		}
		btnLeft.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				listener.leftClick();
			}
		});
		btnRight.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				listener.rightClick();
			}
		});
	}

	/**
	 * 提供加载自定义监听器方法
	 * 
	 * @param listener
	 */
	public void setTitleBarListener(BtnClickListener listener) {
		this.listener = listener;
	}

	/**
	 * 按钮点击接口,调用者实现
	 */
	public interface BtnClickListener {
		void leftClick();

		void rightClick();
	}

	/**
	 * 设置Titlebar内容（Java代码中设置）
	 * 
	 * @param leftDrabable
	 *            左侧背景
	 * @param leftTxt
	 *            左侧文字
	 * @param titleTxt
	 *            中间标题
	 * @param rightDrawable
	 * @param rightleftTxt
	 *            右侧文字
	 */
	public void setTitleBarView(int leftDrabable, String leftTxt,
			String titleTxt, int rightDrawable, String rightTxt) {
		tvTitle.setText(titleTxt);
		btnLeft.setText(leftTxt);
	}

}
至此我们可以直接在代码中引用TitleBarView 

    <com.example.briefvideo.TitleBarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </com.example.briefvideo.TitleBarView>
可以直接在java中利用TitleBar中提供的点击事件监听器给左右两个Button设置点击事件，同时可以通过setTitleBarView方法修改一些属性（buttong可见或不可见等）


第二种方式（利用自定义属性）

首先依旧是通过在Layout中建一个布局文件先确定Title的主要子控件titlebar.xml 如下包含2个Button 一个TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp"
    android:background="@color/bg_title_bar"
    android:orientation="horizontal" >
        <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center" />
      <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       />
</LinearLayout>

然后我们在attrs.xml(如果values文件夹中没有attrs.xml则新建一个)添加自定义的属性

<resources>
    <declare-styleable name="TitleBarView">  
        <attr name="titleText" format="string"/>  
        <attr name="titleSize" format="dimension"/>  
        <attr name="titleColor" format="color"/>  
        <attr name="leftText" format="string"/> 
        <attr name="leftDrawable" format="reference"/>  
        <attr name="leftTextColor" format="color"/>  
        <attr name="leftBackground" format="reference|color"/>  
        <attr name="leftable" format="boolean"/>  
        <attr name="rightText" format="string"/>  
        <attr name="rightTextColor" format="color"/>
        <attr name="rightDrawable" format="reference"/>   
         <attr name="rightable" format="boolean"/>  
        <attr name="rightBackground" format="reference|color"/>  
    </declare-styleable>
      <!-- between the icon and text. -->
     <attr name="leftText">
        <enum name="maintitle"     value="极致影音" />  
    </attr>
</resources>

然后我们就可以在TitleBarView代码中获取到这些属性，并将属性与titlebar.xml布局中的3个子控件相绑定设置 

/**
 * 自定义的TitleBar控件
 * 
 * @author baron 提供监听器接口，调用者可以实现监听器接口包含左右两个按钮的点击事件方法 然后绑定监听器
 */
public class TitleBarView extends LinearLayout {
// 右侧按钮属性
Button btnRight;
Drawable rightDrawable;
String rightTxt;
boolean rightable;
// 左侧按钮属性
Button btnLeft;
Drawable leftDrawable; 
String leftTxt;
boolean leftable;
// 标题
TextView tvTitle;
tring titleTxt;
BtnClickListener listener;

public TitleBarView(Context context, AttributeSet attrs) {
super(context, attrs);
getStyle(context, attrs);
init(context);
}


public void getStyle(Context context, AttributeSet attrs) {
// 获取在attrs中设置的属性组
TypedArray array = context.obtainStyledAttributes(attrs,
R.styleable.TitleBarView);
// 右侧按钮属性
rightTxt = array.getString(R.styleable.TitleBarView_rightText);
rightDrawable = array
.getDrawable(R.styleable.TitleBarView_rightDrawable);
rightable= array.getBoolean(R.styleable.TitleBarView_rightable, true);
// 左侧按钮属性
leftTxt = array.getString(R.styleable.TitleBarView_leftText);
leftDrawable = array.getDrawable(R.styleable.TitleBarView_leftDrawable);
leftable= array.getBoolean(R.styleable.TitleBarView_rightable, true);
// 标题
titleTxt = array.getString(R.styleable.TitleBarView_titleText);
}


/**
* 初始化组件
* 
* @param context
*/
private void init(Context context) {
LayoutInflater.from(context).inflate(R.layout.titlebar, this);
btnLeft = (Button) findViewById(R.id.btn_left);
btnRight = (Button) findViewById(R.id.btn_right);
tvTitle = (TextView) findViewById(R.id.title);

btnLeft.setText(leftTxt);
if(leftable==false){
btnLeft.setVisibility(View.GONE);<span style="white-space:pre">	</span>
}
btnRight.setText(rightTxt);
if(rightable==false){
btnRight.setVisibility(View.GONE);<span style="white-space:pre">	</span>
}
btnLeft.setOnClickListener(new OnClickListener() {
@Override
		public void onClick(View v) {
			listener.leftClick();
			}
		});
btnRight.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
listener.rightClick();
}
});
}
/**
* 提供加载自定义监听器方法
* 
* @param listener
*/
public void setTitleBarListener(BtnClickListener listener) {
this.listener = listener;
}

/**
* 按钮点击接口,调用者实现
*/
public interface BtnClickListener {
void leftClick();
void rightClick();
}

/**
* 设置Titlebar内容（Java代码中设置）
* 
 * @param leftDrabable
 *            左侧背景
* @param leftTxt
*            左侧文字
* @param titleTxt
*            中间标题
* @param rightDrawable
* @param rightleftTxt
*            右侧文字
*/
public void setTitleBarView(int leftDrabable, String leftTxt,
String titleTxt, int rightDrawable, String rightTxt) {
tvTitle.setText(titleTxt);
btnLeft.setText(leftTxt);
}


}
至此我们可以直接在代码中引用TitleBarView，并且可以给我们自定义的属性设值 

       <com.example.briefvideo.TitleBarView
        xmlns:titlebarview="http://schemas.android.com/apk/res/com.example.briefvideo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        titlebarview:titleText="极致影音">
    </com.example.briefvideo.TitleBarView>

其中注意，一般我们在使用空间的属性时前面都会有  android: 这个是命名空间的指定

我们在XML布局中使用空间时都必须有<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

其实这里就是指定一个命名空间，意思就是android：这个命名的控件指向哪里。

显然我们要用自己定义的属性，也要指定命名空间，否则是无法识别的

如

            xmlns:titlebarview="http://schemas.android.com/apk/res/com.example.briefvideo"
        android:layout_width="match_parent"
        titlebarview:titleText="极致影音"

stormbaron
关注
专栏目录
Android自定义标题栏TitleBar
卧龙跃马的博客
08-18 592
效果 xml <dimen name="title_bar_height">40dp</dimen> <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="htt
Android-TitleBar自定义标题居中的ToolBar
08-13
通过以上步骤，我们就成功地创建了一个自定义的TitleBar，它可以居中显示标题，并且允许在左右两侧添加自定义View。这样的TitleBar不仅提高了应用的可定制性，还能使UI设计更加符合用户的交互习惯。在实际项目中，...
Android-TopTitleView-自定义方便好用的标题栏可以添加标题右边标题
08-13
TopTitleView - 自定义方便好用的标题栏，可以添加标题，右边标题
android 自定义view——常用的标题栏
oneblue123的博客
12-11 309
android经常离不开常用的标题栏，分别左侧按钮 ，中间的标题栏，右侧的按钮组成 或者是 分别左侧文本 ，中间的标题栏，右侧的文本组成。在开发的实际过程中会右很多这种样式相同的页面，如果每一次都写，就会特别麻烦。如果通过自定义一个组合控件来设置就可以简化布局时的代码量    代码入下： import android.content.Context; import android.util
Android完美获取状态栏高度、标题栏高度、编辑区域高度的获取
最新发布
2401_87254990的博客
09-22 1514
简单说明一下（上图Activity采用默认Style，状态栏和标题栏都会显示）：最大的草绿色区域是屏幕界面，红色次大区域我们称之为“应用界面区域”，最小紫色的区域我们称之为“View绘制区域”；屏幕顶端、应用界面区之外的那部分显示手机电池网络运营商信息的为“状态栏”，应用区域顶端、View绘制区外部显示Activity名称的部分我们称为“标题栏”。二、状态高度的测量。
Android自定义View之TitleBar，通用标题栏
Hankkin的博客小园
10-24 8254
学过的东西把它记录下来，不仅加深印象，以后也会用的到........（相信以后的你一定会感激现在拼命的自己） 绪论： 最近小编在学徐大牛的群英传，学到的东西记下来。今天小编来说一下Android自定义View中的自定义标题栏，因为标题栏在我们开发过程中用到的特别多，可以说每一个Activity中都会有标题栏，我们不可能每个布局文件中都去写那么多的代码，为了优化，我们可以定义一个通用的title
[Android]自定义View标题栏TitleBar
代码一挖一麻袋
07-05 418
[Android]自定义标题栏TitleBar@Author GQ 2016年07月5日 现在虽然MD风格流行，但是大部分标题栏还是原来的模式：左边一个返回，中间一个标题，右边一个更多等等。效果图Android自定义标题栏TitleBar 效果图 AndroidStudio使用 使用 1. AndroidStudio使用dependencies { compile 'com.guoqi.w
Android打造通用的TitleBar
你全家都是博客
06-02 724
日常android项目开发中，各种Activity的界面通常都会有一套TitleBar样式，但是各个界面又可能具有差异性。很显然，我们不可能每一个界面都去写一套TitleBar.因此封装一个通用的TitleBar是很有必要的。 1.通用的自定义TitleBar的布局文件 title_bar_layout.xml ...
Android自定义简单的顶部标题栏
08-26
总结起来，Android自定义顶部标题栏涉及的关键知识点包括： 1. 创建XML布局文件来定义标题栏的结构。 2. 使用`ConstraintLayout`进行相对布局，使元素居中对齐。 3. 在Activity中加载并使用自定义标题栏布局。 4. ...
Android自定义通用标题栏CustomTitleBar
01-21
本文实例为大家分享了Android自定义通用标题栏的具体代码，供大家参考，具体内容如下/p> 1自定义一个public_titlebar.xml文件 <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=...
自定义View之TitleBar
茅屋
03-30 1412
自定义Titlebar –进阶在之前的自定义View中也曾写过自定义标题栏，但当时只是为了学习而写了一个简单的例子，功能比较简单，只是作为一个练习使用。这次搞了一个自定义能力比较强的TitleBar，满足了日常的需求。一般的app标题栏一般分为左，中，右三部分，左部分基本上都是返回按钮，特殊情况下为自定义菜单，而中，右侧菜单只是完成了基本功能。原理很简单，只是把一些布局进行封装成一个控件，并添加一些
Android自定义TitleView标题开发实例
09-01
主要介绍了Android自定义TitleView标题开发实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Android 通用标题栏 简单封装实现
03-20
Android 通用标题栏 简单封装实现 http://blog.csdn.net/RichieZhu/article/details/50935918
TitleBar（标题栏）的使用
weixin_30575309的博客
05-08 393
　　github地址：https://github.com/buhuiming/BHMAndroid 　　使用compile 'com.bhm.sdk.bhmlibrary:BHMLibrary:1.1.2' 一、TitleBar的使用 1.XML集成方式： 在layout文件中添加 <com.bhm.sdk.bhmlibrary.vie...
TitleBar 的那些设置
diaolapei9880的博客
09-24 151
设置状态栏透明： View decorView = activity.getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; decorView.setSystemU...
Android TitleBar标题栏
xiangxiongfly
07-04 1413
开发过程中会遇见很多app顶部的控制栏，封装一个通用TitleBar attrs.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;resources&gt; &lt;declare-styleable name="TitleBar"&gt; &lt;!--标题--&gt; &a
TitleBar中View的测量问题
sinat_27017647的博客
08-14 175
在TitleBar类中，对于View的加载有两种方式，一种是通过自定义属性的方式在布局中添加view，一种是动态的增加view。 现在对RightView分别用这两种方法进行测试，上图分别对应了这两种方式的最终显示结果。 当tittle过长时，应该是需要省略号代替多余字的，避免遮挡两侧view的显示，可以看到，由于添加view方式的不同，造成了不能接受的结果。 int rightCustomViewRes = typedArray.getResourceId(R.styleable.TitleBar_r..
Android 自定义标题栏 TitleBar
u010194271的博客
09-14 754
支持图片加文本、仅文本、仅图片、微博首页两种文本颜色的大小标题、资料设置进度的两种文本颜色的标题、动态切换文本和图片的显示、监听各按钮的点击事件
自定义View-TitleBar
m0_48440239的博客
06-07 187
title_bar.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="6
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值