Android自定义标题栏TitleBar

释放双眼,带上耳机,听听看~!

前言

在Android开发过程中,我们经常会用到标题栏。Android系统也自带标题栏,但是由于其不够灵活,我们往往会隐藏系统标题栏,然后定义自己的标题栏。为了让标题栏的使用更加方便简洁,我自己封装了一个简易的自定义标题栏TitleBar,今天就来讲讲它的使用吧。

今天涉及的内容:

  1. TitleBar的引用及样式
  2. TitleBar在MainActivity中的使用
  3. 项目结构图
  4. 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源码:

人已赞赏
Android文章

Android MotionLayout 运动布局入门

2020-2-23 23:44:20

Android文章

Android开发Apk 签名的那些事

2020-2-24 10:01:56

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索