日常android项目开发中,各种Activity的界面通常都会有一套TitleBar样式,但是各个界面又可能具有差异性。很显然,我们不可能每一个界面都去写一套TitleBar.因此封装一个通用的TitleBar是很有必要的。
1.通用的自定义TitleBar的布局文件
title_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#1F5EF3">
<TextView
android:id="@+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Title"
android:textColor="#FFFFFF"
android:textSize="12dp" />
<LinearLayout
android:id="@+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:orientation="horizontal"
android:paddingEnd="10dp"
android:paddingRight="10dp">
<ImageView
android:id="@+id/left_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:src="@mipmap/backk" />
<TextView
android:id="@+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:gravity="center_vertical"
android:text="返回"
android:textColor="#ffffff"
android:textSize="12dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="12dp"
android:orientation="horizontal"
android:paddingLeft="30dp">
<TextView
android:id="@+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:text="Confirm"
android:textColor="#FFFFFF"
android:textSize="12dp" />
<ImageView
android:id="@+id/right_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:src="@mipmap/setting" />
</LinearLayout>
</FrameLayout>
布局效果如下图,可以自定义。
2.通用的自定义TitleBar 文件
TitleBar .java
package com.example.qunzhang.commontitledemo.view;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.util.TypedValue;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.example.qunzhang.commontitledemo.R;
/**
* 方便灵活进行TitleBar中相关控件的定制
*/
public class TitleBar {
private View mRoot;
private TextView mTitleView;
private ImageView mLeftImageView;
private TextView mLeftTextView;
private LinearLayout mLeftLayout;
private TextView mRightTextView;
private ImageView mRightImageView;
private LinearLayout mRightLayout;
public TitleBar(View root) {
mRoot = root;
mTitleView = mRoot.findViewById(R.id.title_text);
mLeftImageView = mRoot.findViewById(R.id.left_image);
mLeftTextView = mRoot.findViewById(R.id.left_text);
mLeftLayout = mRoot.findViewById(R.id.left_layout);
mRightImageView = mRoot.findViewById(R.id.right_image);
mRightTextView = mRoot.findViewById(R.id.right_text);
mRightLayout = mRoot.findViewById(R.id.right_layout);
mTitleView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
reset();
}
public void reset() {
mLeftImageView.setVisibility(View.GONE);
mLeftTextView.setVisibility(View.GONE);
mRightImageView.setVisibility(View.GONE);
mRightTextView.setVisibility(View.GONE);
mRightLayout.setOnClickListener(null);
mLeftLayout.setOnClickListener(null);
}
/**
* set center title
*
* @param text
*/
public void setTitleText(String text) {
mTitleView.setText(text);
}
/**
* set the show and gone of the right image
*
* @param show
*/
public void showRightImageView(boolean show) {
mRightImageView.setVisibility(show ? View.VISIBLE : View.GONE);
}
/**
* set show or gone of the right text
*
* @param show
*/
public void showRightTextView(boolean show) {
mRightTextView.setVisibility(show ? View.VISIBLE : View.GONE);
}
/**
* set the size of right text
*
* @param size
*/
public void setRightTextSize(float size) {
mRightTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
}
/**
* set the res id of the right image
*
* @param res
*/
public void setRightImageResource(int res) {
mRightImageView.setImageResource(res);
}
/**
* set the right text
*
* @param text
*/
public void setRightText(String text) {
mRightTextView.setText(text);
}
/**
* set the right click event
*
* @param l
*/
public void setRightClickListener(View.OnClickListener l) {
mRightLayout.setOnClickListener(l);
}
/**
* set res id of left image
*
* @param res
*/
public void setLeftImageResource(int res) {
mLeftImageView.setImageResource(res);
}
/**
* set show or gone og left text
*
* @param show
*/
public void showLeftTextView(boolean show) {
mLeftTextView.setVisibility(show ? View.VISIBLE : View.GONE);
}
public void setLeftCompoundDrawablesRelativeWithIntrinsicBounds(int left, int top, int right, int bottom) {
mLeftTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(left, top, right, bottom);
}
public void setLeftCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) {
mLeftTextView.setCompoundDrawables(left, top, right, bottom);
}
public void setLeftCompoundDrawablePadding(int padding) {
mLeftTextView.setCompoundDrawablePadding(padding);
}
public void setRightCompoundDrawablesRelativeWithIntrinsicBounds(int left, int top, int right, int bottom) {
mRightTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(left, top, right, bottom);
}
public void setRightCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) {
mRightTextView.setCompoundDrawables(left, top, right, bottom);
}
public void setRightCompoundDrawablePadding(int padding) {
mRightTextView.setCompoundDrawablePadding(padding);
}
public void setLeftText(String text) {
mLeftTextView.setText(text);
}
public void showLeftImageView(boolean show) {
mLeftImageView.setVisibility(show ? View.VISIBLE : View.GONE);
}
public void setLeftClickListener(View.OnClickListener l) {
mLeftLayout.setOnClickListener(l);
}
public void setTitleCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom) {
mTitleView.setCompoundDrawables(left, top, right, bottom);
}
public void setTitleCompoundDrawablePadding(int padding) {
mTitleView.setCompoundDrawablePadding(padding);
}
public void setTitleClickListener(View.OnClickListener l) {
mTitleView.setOnClickListener(l);
}
}
上述自定义的TitleBar 类中封装了各种各样可供调节的 api,主要包括以下几块:
(1).可控制各个控件的显示与隐藏
(2).可控制left_layout和right_layout中TextView和ImageView的相对位置和间距
(3).设置字体的大小以及图标res id等等
3.使用方法
TitleBar titleBar = new TitleBar(findViewById(R.id.title_bar));
//todo 只要拿到了TitleBar 的对象,那么下面要做什么样的设置,就随心所欲了
//比如隐藏右侧图标
titleBar.showRightImageView(true);
其中new TitleBar()的入参findViewById(R.id.title_bar)中的R.id.title_bar来源如下:
<?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="match_parent"
tools:context=".MainActivity">
<include
android:id="@+id/title_bar"
layout="@layout/title_bar_layout" />
</RelativeLayout>
好了,完了,一步步来。今天先写通用的自定义TitleBar,后续会写BaseActivity和BaseFragment的搭建等等,等到这后续些点都搞定了,基本上android项目框架基本就成形了。