Android自定义标题栏

最新推荐文章于 2022-03-31 22:09:34 发布

yulin9207

最新推荐文章于 2022-03-31 22:09:34 发布

阅读量609

点赞数

分类专栏：安卓文章标签： android 自定义标题栏标题栏自定义控件

本文链接：https://blog.csdn.net/yan_Yu_Lin/article/details/70557536

版权

安卓专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天写的是Android中常用的自定义标题栏，先看效果图:

效果图中所有的文字和图片都可以在你需要的时候设置进去，不需要的时候不让它显示出来，还可以设置标题栏的背景颜色，相信这样的自定义标题栏的适用性应该很广了，基本上都可以套用了，我写的注释很是详细，保证小白都可以看懂哦·······

下面开始我们的代码编辑工作吧。

1.写标题栏的布局文件mytitlebar.xml，代码如下：

2.在res/values下创建attrs.xml资源文件，代码如下：

3.在包下创建MyTitleBar.java文件，代码如下：

public class MyTitleBar extends RelativeLayout implements View.OnClickListener {
private TitlebarOnClickListener mTitlebarOnClickListener;//监听自定义标题栏的对外接口
private RelativeLayout mRlRootLayout;//标题栏的根布局
private int titlebar_background;//标题栏的背景颜色

private TextView mTvBack;//标题栏最左侧的文本控件
private String tvBackText;//标题栏最左侧的文本内容
private int tvBackTextColor;//标题栏最左侧的文本字体颜色
private int tvBackTextSize;//标题栏最左侧的文本字体大小
private int ivBackId;//标题栏最左侧的图片资源
private boolean ivShowTvBack;//是否显示标题栏最左侧的文本图片

private TextView mTvFinish;//标题栏最右侧的文本控件
private String tvFinishText;//标题栏最右侧的文本内容
private int tvFinishTextColor;//标题栏最右侧的文本字体颜色
private int tvFinishTextSize;//标题栏最右侧的文本字体大小
private int ivFinishId;//标题栏最右侧的图片资源
private boolean ivShowTvFinish;//是否显示标题栏最右侧的文本图片

private TextView mTvTitleLeft;//标题栏中间的左标题的文本控件
private String tvTitleLeftText;//标题栏中间的左标题的文本内容
private int tvTitleLeftTextColor;//标题栏中间的左标题的文本字体颜色
private int tvTitleLeftTextSize;//标题栏中间的左标题的文本字体大小

private TextView mTvTitleCenter;//标题栏中间的中间标题的文本控件
private String tvTitleCenterText;//标题栏中间的中间标题的文本内容
private int tvTitleCenterTextColor;//标题栏中间的中间标题的文本字体颜色
private int tvTitleCenterTextSize;//标题栏中间的中间标题的文本字体大小

private TextView mTvTitleRight;//标题栏中间的右标题的文本控件
private String tvTitleRightText;//标题栏中间的右标题的文本内容
private int tvTitleRightTextColor;//标题栏中间的右标题的文本字体颜色
private int tvTitleRightTextSize;//标题栏中间的右标题的文本字体大小

public MyTitleBar(Context context) {
super(context, null);
}

public MyTitleBar(Context context, AttributeSet attrs) {
super(context, attrs);

initViews(context);//初始化控件
initAttrs(context, attrs);//初始化属性
setAttrs();//设置属性
}

/**
* 初始化控件
*/
private void initViews(Context context) {
View.inflate(context, R.layout.mytitlebar, this);//加载布局文件
mRlRootLayout = (RelativeLayout) findViewById(R.id.rl_root_layout);
mTvBack = (TextView) findViewById(R.id.tv_back);
mTvTitleLeft = (TextView) findViewById(R.id.tv_title_left);
mTvTitleCenter = (TextView) findViewById(R.id.tv_title_center);
mTvTitleRight = (TextView) findViewById(R.id.tv_title_right);
mTvFinish = (TextView) findViewById(R.id.tv_finish);
}

/**
* 初始化属性
*/
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTitleBar);//获取属性
titlebar_background = typedArray.getColor(R.styleable.MyTitleBar_titlebar_backgroundColor, 0);

tvBackText = typedArray.getString(R.styleable.MyTitleBar_tv_back);
tvBackTextColor = typedArray.getColor(R.styleable.MyTitleBar_tv_back_textColor, 0);
tvBackTextSize = typedArray.getDimensionPixelSize(R.styleable.MyTitleBar_tv_back_textSize, sp2px(context, 10));
ivShowTvBack = typedArray.getBoolean(R.styleable.MyTitleBar_iv_show_tv_back, false);
ivBackId = typedArray.getResourceId(R.styleable.MyTitleBar_iv_back, 0);

tvFinishText = typedArray.getString(R.styleable.MyTitleBar_tv_finish);
tvFinishTextColor = typedArray.getColor(R.styleable.MyTitleBar_tv_finish_textColor, 0);
tvFinishTextSize = typedArray.getDimensionPixelSize(R.styleable.MyTitleBar_tv_finishtextSize, sp2px(context, 10));
ivShowTvFinish = typedArray.getBoolean(R.styleable.MyTitleBar_iv_show_tv_finish, false);
ivFinishId = typedArray.getResourceId(R.styleable.MyTitleBar_iv_finish, 0);

tvTitleLeftText = typedArray.getString(R.styleable.MyTitleBar_tv_title_left);
tvTitleLeftTextColor = typedArray.getColor(R.styleable.MyTitleBar_tv_title_left_textColor, 0);
tvTitleLeftTextSize = typedArray.getDimensionPixelSize(R.styleable.MyTitleBar_tv_title_left_textSize, sp2px(context, 10));

tvTitleCenterText = typedArray.getString(R.styleable.MyTitleBar_tv_title_center);
tvTitleCenterTextColor = typedArray.getColor(R.styleable.MyTitleBar_tv_title_center_textColor, 0);
tvTitleCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.MyTitleBar_tv_title_center_textSize, sp2px(context, 10));

tvTitleRightText = typedArray.getString(R.styleable.MyTitleBar_tv_title_right);
tvTitleRightTextColor = typedArray.getColor(R.styleable.MyTitleBar_tv_title_right_textColor, 0);
tvTitleRightTextSize = typedArray.getDimensionPixelSize(R.styleable.MyTitleBar_tv_title_right_textSize, sp2px(context, 10));

typedArray.recycle();
}

/**
* 设置属性
*/
private void setAttrs() {
setTitlebarBackgroundColor(titlebar_background);//设置标题栏根布局的颜色,默认白色

setTvBackText(tvBackText);//设置标题栏最左侧的文本内容
setTvBackTextColor(tvBackTextColor);//设置标题栏最左侧的文本字体颜色
setTvBackTextSize(tvBackTextSize);//设置标题栏最左侧的文本字体大小
setIvShowTvBack(ivShowTvBack);//设置标题栏最左侧的文本图片

setTvFinishText(tvFinishText);//设置标题栏最右侧的文本内容
setTvFinishTextColor(tvFinishTextColor);//设置标题栏最右侧的文本字体颜色
setTvFinishTextSize(tvFinishTextSize);//设置标题栏最右侧的文本字体大小
setIvShowTvFinish(ivShowTvFinish);//设置标题栏最右侧的文本图片

setTvTitleLeftText(tvTitleLeftText);//设置标题栏中间的左标题的文本内容
setTvTitleLeftTextColor(tvTitleLeftTextColor);//设置标题栏中间的左标题的文本字体颜色
setTvTitleLeftTextSize(tvTitleLeftTextSize);//设置标题栏中间的左标题的文本字体大小

setTvTitleCenterText(tvTitleCenterText);//设置标题栏中间的中间标题的文本内容
setTvTitleCenterTextColor(tvTitleCenterTextColor);//设置标题栏中间的中间标题的文本字体颜色
setTvTitleCenterTextSize(tvTitleCenterTextSize);//设置标题栏中间的中间标题的文本字体大小

setTvTitleRightText(tvTitleRightText);//设置标题栏中间的右标题的文本内容
setTvTitleRightTextColor(tvTitleRightTextColor);//设置标题栏中间的右标题的文本字体颜色
setTvTitleRightTextSize(tvTitleRightTextSize);//设置标题栏中间的右标题的文本字体大小
}

public static int sp2px(Context context, float spValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spValue, context.getResources().getDisplayMetrics());
}

/**
* 外部调用时需要用到的接口
*/
public interface TitlebarOnClickListener {
void titlebarOnClickListener(View view);
}

/**
* 外部调用时通过此方法为标题栏的各控件设置监听
*
* @param listener 监听器
*/
public void setOnClickListener(TitlebarOnClickListener listener) {
mTvBack.setOnClickListener(this);
mTvFinish.setOnClickListener(this);
mTvTitleLeft.setOnClickListener(this);
mTvTitleCenter.setOnClickListener(this);
mTvTitleRight.setOnClickListener(this);

mTitlebarOnClickListener = listener;
}

@Override
public void onClick(View view) {
mTitlebarOnClickListener.titlebarOnClickListener(view);
}

/**
* 设置标题栏根布局的颜色,默认白色
*
* @param titlebar_background 背景色,默认白色
*/
private void setTitlebarBackgroundColor(int titlebar_background) {
if (titlebar_background == 0) {
mRlRootLayout.setBackgroundColor(Color.WHITE);//默认白色
} else {
mRlRootLayout.setBackgroundColor(titlebar_background);
}
}

/**
* 设置标题栏最左侧的文本内容
*
* @param tvBackText 文本内容
*/
private void setTvBackText(String tvBackText) {
mTvBack.setText(tvBackText);
}

/**
* 设置标题栏最左侧的文本字体颜色
*
* @param tvBackTextColor 字体颜色,默认黑色
*/
private void setTvBackTextColor(int tvBackTextColor) {
if (tvBackTextColor == 0) {
mTvBack.setTextColor(Color.BLACK);//默认黑色
} else {
mTvBack.setTextColor(tvBackTextColor);
}
}

/**
* 设置标题栏最左侧的文本字体大小
*
* @param tvBackTextSize 字体大小
*/
private void setTvBackTextSize(int tvBackTextSize) {
mTvBack.setTextSize(tvBackTextSize);
}

/**
* 设置标题栏最左侧的文本图片
*
* @param ivShowTvBack 是否显示,默认不显示
*/
private void setIvShowTvBack(boolean ivShowTvBack) {
if (ivShowTvBack && ivBackId != 0) {
Drawable drawable = ContextCompat.getDrawable(getContext(), ivBackId);
drawable.setBounds(0, 0, 40, 40);//这一步必须要做,否则不会显示
mTvBack.setCompoundDrawables(drawable, null, null, null);
}
}

/**
* 设置标题栏最右侧的文本内容
*
* @param tvFinishText 文本内容
*/
private void setTvFinishText(String tvFinishText) {
mTvFinish.setText(tvFinishText);
}

/**
* 设置标题栏最右侧的文本字体颜色
*
* @param tvFinishTextColor 字体颜色,默认黑色
*/
private void setTvFinishTextColor(int tvFinishTextColor) {
if (tvFinishTextColor == 0) {
mTvFinish.setTextColor(Color.BLACK);//默认黑色
} else {
mTvFinish.setTextColor(tvFinishTextColor);
}
}

/**
* 设置标题栏最右侧的文本字体大小
*
* @param tvFinishTextSize 字体大小
*/
private void setTvFinishTextSize(int tvFinishTextSize) {
mTvFinish.setTextSize(tvFinishTextSize);
}

/**
* 设置标题栏最右侧的文本图片
*
* @param ivShowTvFinish 是否显示,默认不显示
*/
private void setIvShowTvFinish(boolean ivShowTvFinish) {
if (ivShowTvFinish && ivFinishId != 0) {
Drawable drawable = ContextCompat.getDrawable(getContext(), ivFinishId);
drawable.setBounds(0, 0, 40, 40);//这一步必须要做,否则不会显示
mTvFinish.setCompoundDrawables(null, null, drawable, null);
}
}

/**
* 设置标题栏中间的左标题的文本内容
*
* @param tvTitleLeftText 文本内容
*/
private void setTvTitleLeftText(String tvTitleLeftText) {
mTvTitleLeft.setText(tvTitleLeftText);
}

/**
* 设置标题栏中间的左标题的文本字体颜色
*
* @param tvTitleLeftTextColor 字体颜色,默认黑色
*/
private void setTvTitleLeftTextColor(int tvTitleLeftTextColor) {
if (tvTitleLeftTextColor == 0) {
mTvTitleLeft.setTextColor(Color.BLACK);//默认黑色
} else {
mTvTitleLeft.setTextColor(tvTitleLeftTextColor);
}
}

/**
* 设置标题栏中间的左标题的文本字体大小
*
* @param tvTitleLeftTextSize 字体大小
*/
private void setTvTitleLeftTextSize(int tvTitleLeftTextSize) {
mTvTitleLeft.setTextSize(tvTitleLeftTextSize);
}

/**
* 设置标题栏中间的中间标题的文本内容
*
* @param tvTitleCenterText 文本内容
*/
private void setTvTitleCenterText(String tvTitleCenterText) {
mTvTitleCenter.setText(tvTitleCenterText);
}

/**
* 设置标题栏中间的中间标题的文本字体颜色
*
* @param tvTitleCenterTextColor 字体颜色,默认黑色
*/
private void setTvTitleCenterTextColor(int tvTitleCenterTextColor) {
if (tvTitleCenterTextColor == 0) {
mTvTitleCenter.setTextColor(Color.BLACK);//默认黑色
} else {
mTvTitleCenter.setTextColor(tvTitleCenterTextColor);
}
}

/**
* 设置标题栏中间的中间标题的文本字体大小
*
* @param tvTitleCenterTextSize 字体大小
*/
private void setTvTitleCenterTextSize(int tvTitleCenterTextSize) {
mTvTitleCenter.setTextSize(tvTitleCenterTextSize);
}

/**
* 设置标题栏中间的右标题的文本内容
*
* @param tvTitleRightText 文本内容
*/
private void setTvTitleRightText(String tvTitleRightText) {
mTvTitleRight.setText(tvTitleRightText);
}

/**
* 设置标题栏中间的右标题的文本字体颜色
*
* @param tvTitleRightTextColor 字体颜色,默认黑色
*/
private void setTvTitleRightTextColor(int tvTitleRightTextColor) {
if (tvTitleRightTextColor == 0) {
mTvTitleRight.setTextColor(Color.BLACK);//默认黑色
} else {
mTvTitleRight.setTextColor(tvTitleRightTextColor);
}
}

/**
* 设置标题栏中间的右标题的文本字体大小
*
* @param tvTitleRightTextSize 字体大小
*/
private void setTvTitleRightTextSize(int tvTitleRightTextSize) {
mTvTitleRight.setTextSize(tvTitleRightTextSize);
}

自定义标题栏到此就基本吹响结束的口号了，现在标题栏定义好了，那么该如何使用呢？

1.在你想要使用自定义标题栏的布局文件上引用即可，我这里就直接在activity_main.xml中使用了，代码如下：

<com.example.mytitlebar.MyTitleBar
android:id="@+id/mytitlebar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:iv_back="@drawable/icon_back"
app:iv_finish="@drawable/icon_finish"
app:iv_show_tv_back="true"
app:iv_show_tv_finish="true"
app:titlebar_backgroundColor="@color/colorAccent"
app:tv_back="返回"
app:tv_back_textColor="#005620"
app:tv_back_textSize="4sp"
app:tv_finish="完成"
app:tv_finish_textColor="#951201"
app:tv_finishtextSize="4sp"
app:tv_title_center="中间标题"
app:tv_title_center_textColor="#995120"
app:tv_title_center_textSize="8sp"
app:tv_title_left="左标题"
app:tv_title_left_textColor="#169900"
app:tv_title_left_textSize="6sp"
app:tv_title_right="右标题"
app:tv_title_right_textColor="#265891"
app:tv_title_right_textSize="6sp">
</com.example.mytitlebar.MyTitleBar>

运行这个项目之后，你就能在界面上看到刚才的效果图了····

别着急，还没完呢，标题栏没有点击事件怎么行，留意的人已经看到刚才我在MyTitleBar.java文件中定义了一个借口，这就是为了给外部调用的啦，如果调用，请看代码：

myTitleBar.setOnClickListener(new MyTitleBar.TitlebarOnClickListener() {
@Override
public void titlebarOnClickListener(View view) {
switch (view.getId()) {
case R.id.tv_back:
Log.d("MainActivity", "你点击了返回按钮");
break;
case R.id.tv_finish:
Log.d("MainActivity", "你点击了完成按钮");
break;
case R.id.tv_title_left:
Log.d("MainActivity", "你点击了左标题");
break;
case R.id.tv_title_center:
Log.d("MainActivity", "你点击了中间标题");
break;
case R.id.tv_title_right:
Log.d("MainActivity", "你点击了右标题");
break;
}
}
});