Android 功能最强的自定义标题栏控件
Android 功能最强的自定义标题栏控件
做Android开发一年多了,工作期间遇到各种问题都会问度娘,CSDN,工作这么长时间了也没什么成就,总想做些什么;最近闲着无事做了一个自定义标题栏控件,和同学们共享一下,如有不完善,或者错误,还烦请各位指点;
先上图片
1.
左右导航提示都是使用文字
2.
右边使用文字
3.
左右为空，只用标题
4.
左右都是使用图标作为导航提示
5.
只有一个导航图标
6.
既有图标又有文字的导航
以上都app开发过程中经常用的导航样式，当然还有其他很多这只是常见的几种
现在只要自定义一个控件就可以搞定这么多标题，是不是很激动
上代码
1.首先是要写自定义属性
编写自定义属性文件atts.xml，自定义属性中主要是文字和图片；
atts.xml是放在values文件下。
<attr name="tvLifeText" format="string" />
<attr name="titleText" format="string" />
<attr name="tvRightText" format="string" />
<attr name="imRightSrc" format="reference" />
<attr name="imCenterSrc" format="reference" />
<attr name="imLifeSrc" format="reference" />
declare-styleable>2.自定义控件的布局文件title_bar.xml
这里主要注意LinearLayout也要有id，因为自定义控件的监听事件就是在LinearLayout上
<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="45dp"
android:background="#FFFFFF"
tools:context="com.blog.pengding.ui.TitleBar">
<LinearLayout
android:id="@+id/li_life"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_life_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="@+id/tv_life_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:textSize="15sp" />
LinearLayout>
<LinearLayout
android:id="@+id/li_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_center_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp" />
<ImageView
android:id="@+id/iv_center_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_weight="1" />
LinearLayout>
<LinearLayout
android:id="@+id/li_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="15sp" />
<ImageView
android:id="@+id/iv_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1" />
LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:layout_alignParentBottom="true"
android:background="#fff000" />
RelativeLayout>
3.自定义控件继承自RelativeLayout 要注意属性的获取和监听事件接口的编写
package com.blog.pengding.ui;
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.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.blog.pengding.jijianblog.R;
public class TitleBar extends RelativeLayout {
private OnTitleAndLeftAndRightClickListener listener;//监听点击事件
private LinearLayout li_life, li_right, li_title;//布局控件，设置响应监听事件用
private TextView tv_life, tv_right, tv_title;//左边文字，右边文字，标题；文本控件，设置标题，文字用
private ImageView iv_life, iv_title, iv_right;//图片控件，设置图标用
public TitleBar(Context context) {
super(context);
}
/**
* 注意这个构造方法是Context context, AttributeSet attrs两个参数
*
* @param context
* @param attrs
*/
public TitleBar(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title_bar, this);//获取布局xml
//初始化LinearLayout控件
li_life = (LinearLayout) findViewById(R.id.li_life);
li_right = (LinearLayout) findViewById(R.id.li_right);
li_title = (LinearLayout) findViewById(R.id.li_title);
li_life.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (listener != null)
listener.onLeftLinearLayoutClick();
}
});
li_right.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (listener != null)
listener.onRightLinearLayoutClick();
}
});
li_title.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (listener != null)
listener.onTitleLinearLayoutClick();
}
});
//通过context.obtainStyledAttributes方法，将AttributeSet和属性的类型传递过来
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);
//初始化TextView控件
tv_life = (TextView) findViewById(R.id.tv_life_text);
tv_right = (TextView) findViewById(R.id.tv_right_text);
tv_title = (TextView) findViewById(R.id.tv_center_text);
String title = typedArray.getString(R.styleable.TitleBar_titleText);//获得自定义属性并赋值
tv_title.setText(title);
tv_life.setText(typedArray.getString(R.styleable.TitleBar_tvLifeText));
tv_right.setText(typedArray.getString(R.styleable.TitleBar_tvRightText));
//初始化ImageView控件
iv_right = (ImageView) findViewById(R.id.iv_right_image);
iv_title = (ImageView) findViewById(R.id.iv_center_image);
iv_life = (ImageView) findViewById(R.id.iv_life_image);
Drawable drawable = typedArray.getDrawable(R.styleable.TitleBar_imRightSrc);//获得自定义属性并赋值
iv_right.setImageDrawable(drawable);
iv_life.setImageDrawable(typedArray.getDrawable(R.styleable.TitleBar_imLifeSrc));
iv_title.setImageDrawable(typedArray.getDrawable(R.styleable.TitleBar_imCenterSrc));
}
//设置监听器
public void setOnTitleAndLeftAndRightClickListener(OnTitleAndLeftAndRightClickListener listener) {
this.listener = listener;
}
/**
* 使用java代码设置标题
*
* @param titleString
*/
public void setTitle(String titleString) {
this.tv_title.setText(titleString);
}
/**
* 使用java代码左面标题，中间标题，右边标题
*
* @param leftString
* @param titleString
* @param rightString
*/
public void setLeftAndTitleAndRight(String leftString, String titleString, String rightString) {
this.tv_life.setText(leftString);
this.tv_title.setText(titleString);
this.tv_right.setText(rightString);
}
/**
* 回调接口
*/
public interface OnTitleAndLeftAndRightClickListener {
public void onLeftLinearLayoutClick();
public void onRightLinearLayoutClick();
public void onTitleLinearLayoutClick();
}
}
4，好了自定义标题写好了下面看看如何使用这个新UI控件：
这里要在LinearLayout 布局中添加新的命名空间xmlns:app=”http://schemas.android.com/apk/res-auto”
命名空间，“app”可以替换成任意字母组合
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.blog.pengding.activity.UniversalInterfaceActivity">
<com.blog.pengding.ui.TitleBar
android:id="@id/title_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:imLifeSrc="@mipmap/discover_back_icon_pressed"
app:imRightSrc="@mipmap/hotweibo_slide_add"
app:titleText="好友动态"
app:tvLifeText="动态" />
<FrameLayout
android:id="@+id/fl_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
LinearLayout>5.布局中已经有了自定义标题栏，现在看看java文件中怎么设置吧！
package com.blog.pengding.activity;
import android.content.Intent;
import android.os.Bundle;
import com.blog.pengding.jijianblog.BaseActivity;
import com.blog.pengding.jijianblog.R;
import com.blog.pengding.ui.TitleBar;
/*
* 通用界面
* */
public class UniversalInterfaceActivity extends BaseActivity {
private TitleBar titleBar;
private String titleString;
private Intent intent;
/***
* 初始化变量，包括Intent带的数据和Activity内变量
*/
@Override
protected void initVariables() {
}
/***
* 加载layout布局文件，初始化控件，绑定事件
*/
@SuppressWarnings("ResourceAsColor")
@Override
protected void initViews(Bundle savedInstanceState) {
setContentView(R.layout.activity_universal_interface);
titleBar = (TitleBar) findViewById(R.id.title_bar);
titleBar.setTitle("这里是标题");//可以在java中设置标题
//titleBar.setLeftAndTitleAndRight("左面导航文字","标题","右面导航文字");
titleBar.setOnTitleAndLeftAndRightClickListener(new TitleBar.OnTitleAndLeftAndRightClickListener() {
@Override
public void onLeftLinearLayoutClick() {
//设置左面导航事件
finish();
}
@Override
public void onRightLinearLayoutClick() {
//设置右面导航事件
}
@Override
public void onTitleLinearLayoutClick() {
//设置标题导航事件
}
});
}
/***
* 调用MobileAPI获取数据
*/
@Override
protected void loadData() {
}
}
这样这个自定义的标题栏就做完了，是不是很简单。
6现在总结下自定义控件的一般步骤吧：
1.根据需求设计控件UI
2.根据UI，设置自定义控件的属性
3.根据UI，编写自定义控件布局文件
4.编写java代码，根据情况选择父类
5.使用自定义控件
我这个没有写更改字体颜色，字体大小，等属性，请各位同学自行扩能改造吧。
第一次写blog写的不好请谅解啊！