首页 > 程序开发 > 移动开发 > Android >

Android自定义标题栏

2017-04-24

今天写的是Android中常用的自定义标题栏。

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

\

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

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

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

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

android:id="@+id/rl_root_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true">

android:id="@+id/tv_back"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"/>

android:id="@+id/tv_title_center"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"/>

android:id="@+id/tv_title_left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_toLeftOf="@+id/tv_title_center"

tools:ignore="RelativeOverlap"/>

android:id="@+id/tv_title_right"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_toRightOf="@+id/tv_title_center"/>

android:id="@+id/tv_finish"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

tools:ignore="RelativeOverlap"/>

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中使用了,代码如下:

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">

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

别着急,还没完呢,标题栏没有点击事件怎么行,留意的人已经看到刚才我在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;

}

}

});

至此,就真的结束了,是不是可以很好的掌握了呢?

相关文章
最新文章
热点推荐