前言
在Android开发过程中，我们经常会用到标题栏。Android系统也自带标题栏，但是由于其不够灵活，我们往往会隐藏系统标题栏，然后定义自己的标题栏。为了让标题栏的使用更加方便简洁，我自己封装了一个简易的自定义标题栏TitleBar，今天就来讲讲它的使用吧。
今天涉及的内容：
- TitleBar的引用及样式
- TitleBar在MainActivity中的使用
- 项目结构图
- TitleBar源码及相关类
一.TitleBar的引用及样式
1.1 要在MainActivity中使用TitleBar，则在activity_main.xml中引入TitleBar控件如下(控件包路径以实际为准)：
<com.example.function.TitleBar
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#ff0000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
在MainActivity中声明及初始化TitleBar：
//声明
private TitleBar mTitleBar;
//初始化(注意不能用butternikfe等方式初始化,只能使用原始方式初始化，否则获取的mTitleBar为null)
mTitleBar=findViewById(R.id.title_bar);
这里需要注意的是，不能使用第三方库进行初始化，要使用最原始的 “findViewById” 方式初始化，否则得到的 mTitleBar 会为 null。
1.2 TitleBar使用样式
TitleBar非为左边返回键，中间标题，右边返回键。默认情况下，TitleBar中三个子控件都不显示，就像下面这样(为了辨识，我给TitleBar加红色背景)：
image.png
获取左边返回键，中间标题，右边返回键控件，你可以类似下面这样：
//左边返回键
ImageTextView tvLeft = mTitleBar.getTvLeft();
//中间标题
TextView tvTitle = mTitleBar.getTvTitle();
//右边返回键
ImageTextView tvRight = mTitleBar.getTvRight();
显示三个控件
//左返回键显示
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
//中间标题显示
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
//右返回键显示
mTitleBar.getTvRight().setVisibility(View.VISIBLE);
效果如下：
image.png
给mTitleBar设置文字：
//设置文字
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setText("返回");
mTitleBar.getTvRight().setText("下一步");
效果如下：
image.png
ok,下面以左边返回键(tvLeft)及中间控件(tvTitle)进行讲解[右边返回键使用与左边返回键使用雷同]。
- 只显示标题
/**只显示标题**/
private void showTitle(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
}
效果如下：
image.png
- 显示返回键图标
/**显示左返回键图标**/
private void showLeftDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
}
效果如下：
image.png
- 显示返回键文字
/**显示左返回键文字**/
private void showLeftText(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
mTitleBar.getTvLeft().setNullDrawable();
}
效果如下：
image.png
- 显示返回键文字和图标
/**显示左返回键文字和图标**/
private void showLeftTextDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
}
效果如下：
image.png
- 设置左返回键图标
/**设置左返回键图标**/
private void setLeftDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
//设置左边图标
mTitleBar.getTvLeft().setDrawableLeft(R.mipmap.ic_launcher, MainActivity.this);
}
效果如下：
image.png
- 设置左返回键图标大小
/**设置左返回键图标大小**/
private void setLeftDrawableSize(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
//设置左边图标
mTitleBar.getTvLeft().setDrawableLeft(R.mipmap.ic_launcher, MainActivity.this);
//设置左边图标宽高
mTitleBar.getTvLeft().setDrawableWidth(40);
mTitleBar.getTvLeft().setDrawableHeight(40);
}
效果如下：
image.png
- 设置图标和文字间的padding
//设置左返回键drawable的padding
mTitleBar.setLeftDrawablePadding(5);
//设置右返回键drawable的padding
mTitleBar.setRightDrawablePadding(5);
- 设置整个控件(左返回键)的margin
//设置整个控件的margin
mTitleBar.setMargins(mTitleBar.getTvLeft(),2,2,2,2);
- 设置整个控件(左返回键)的padding
//设置整个控件的padding
mTitleBar.setPaddings(mTitleBar.getTvLeft(),2,2,2,2);
二.TitleBar在MainActivity中的使用
下面贴出MainActivity中使用代码：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private TextView mTv;
private Button mBtn;
private TitleBar mTitleBar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
setListener();
}
private void initData() {
mTv = findViewById(R.id.tv);
mBtn = findViewById(R.id.btn);
mTitleBar = findViewById(R.id.title);
initTitleBar();
}
private void initTitleBar(){
//初始化(注意不能用butternikfe等方式初始化,只能使用原始方式初始化，否则获取的mTitleBar为null)
mTitleBar=findViewById(R.id.title_bar);
//左边返回键
ImageTextView tvLeft = mTitleBar.getTvLeft();
//中间标题
TextView tvTitle = mTitleBar.getTvTitle();
//右边返回键
ImageTextView tvRight = mTitleBar.getTvRight();
//=========以左边返回键及标题讲解为例，右边返回键使用雷同======
// //只显示标题
// showTitle();
// //显示左返回键图标
// showLeftDrawable();
// //显示左返回键文字
// showLeftText();
// //显示左返回键文字和图标
// showLeftTextDrawable();
// //设置左返回键图标
// setLeftDrawable();
// //设置左返回键图标大小
// setLeftDrawableSize();
//设置左返回键drawable的padding
mTitleBar.setLeftDrawablePadding(5);
//设置右返回键drawable的padding
mTitleBar.setRightDrawablePadding(5);
//设置整个控件的margin
mTitleBar.setMargins(mTitleBar.getTvLeft(),2,2,2,2);
//设置整个控件的padding
mTitleBar.setPaddings(mTitleBar.getTvLeft(),2,2,2,2);
}
private void setListener() {
mBtn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn:
test();
break;
default:
break;
}
}
private void test() {
Intent intent=new Intent(MainActivity.this,TestActivity.class);
startActivity(intent);
}
/**只显示标题**/
private void showTitle(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
}
/**显示左返回键图标**/
private void showLeftDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
}
/**显示左返回键文字**/
private void showLeftText(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
mTitleBar.getTvLeft().setNullDrawable();
}
/**显示左返回键文字和图标**/
private void showLeftTextDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
}
/**设置左返回键图标**/
private void setLeftDrawable(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
//设置左边图标
mTitleBar.getTvLeft().setDrawableLeft(R.mipmap.ic_launcher, MainActivity.this);
}
/**设置左返回键图标大小**/
private void setLeftDrawableSize(){
mTitleBar.getTvTitle().setVisibility(View.VISIBLE);
mTitleBar.getTvTitle().setText("登录");
mTitleBar.getTvLeft().setVisibility(View.VISIBLE);
mTitleBar.getTvLeft().setText("返回");
//设置左边图标
mTitleBar.getTvLeft().setDrawableLeft(R.mipmap.ic_launcher, MainActivity.this);
//设置左边图标宽高
mTitleBar.getTvLeft().setDrawableWidth(40);
mTitleBar.getTvLeft().setDrawableHeight(40);
}
}
MainActivity对应布局文件activity_main.xml代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:ImageTextView="http://schemas.android.com/apk/res-auto"
android:id="@+id/container_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity">
<com.example.function.TitleBar
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#ff0000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingLeft="15dp"
android:paddingTop="7dp"
android:paddingBottom="7dp"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="登录aa"
android:textColor="@color/black"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/title_bar" />
<Button
android:id="@+id/btn"
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginTop="24dp"
android:text="登录测试"
android:textColor="#0000ff"
android:background="#ffff00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv" />
</androidx.constraintlayout.widget.ConstraintLayout>
三.项目结构图
image.png
四.TitleBar源码及相关类
TitleBar源码：
