自定义标题栏TitleBar2

前言

在Android开发过程中，自定义标题栏的使用十分常见。在之前的文章，我已经讲过一篇自定义标题栏的文章，有兴趣的可以参考
自定义标题栏TitleBar
可以说这篇文章已经将自定义标题栏的使用讲解得十分清楚了，无奈我当时的设计为了让控件中的控件数目少些，于是使用了自定义控件ImageTextView,事实证明在这个控件的嵌套下有利有弊，最大的弊端就是对于图片显示的支持不是很到位，会导致图片拉伸啊之类的导致显示失真，这是我不能忍的，也是当初为了贪图控件少留下的后患吧。这也就是今天这篇文章的由来，新写一个自定义标题栏类TitleBar2,完美实现TitleBar的功能，虽然实现和调用稍微麻烦一点点，但是功能及显示效果上比TitleBar好很多。那么今天就来讲讲自定义标题栏类TitleBar2的使用吧。

今天涉及的内容：

  1. TitleBar2简介
  2. TitleBar2使用介绍
    2.1 在xml文件中引入TitleBar2控件
    2.2 在MainActivity中初始化TitleBar2及获取其子控件对象
    2.3 TitleBar2显示样式
    2.4 TitleBar2设置图标
    2.5 TitleBar2设置文字
    2.6 TitleBar2设置子控件的padding和margin
    2.7 TitleBar2设置点击事件
  3. TitleBar2在MainActivity中使用
  4. 效果图和项目结构图
  5. TitleBar2源码

先来波效果图


1.gif

一.TitleBar2简介

TitleBar2是一个自定义标题栏，其中包含5个子控件，分别是左返回键图标，左返回键文字,中间标题文字,右返回键文字,右返回键图标五个控件。可以满足开发基本样式使用需求。

二.TitleBar2使用介绍

2.1 在xml文件中引入TitleBar2控件

在你的xml文件中，引入TitleBar2控件，你可以类似下面这样：

    <com.testdemo.other.TitleBar2
        android:id="@+id/title_bar2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
2.2 在MainActivity中初始化TitleBar2及获取其子控件对象

初始化TitleBar2如下：

    //声明控件
    private TitleBar2 mTitleBar2;

    //初始化
    mTitleBar2=findViewById(R.id.title_bar2);

获取TitleBar2子控件如下：

        //获取控件对象
        ImageView imvLeft=mTitleBar2.getImvLeft();//左侧返回键图片对象
        TextView tvLeft=mTitleBar2.getTvLeft();//左侧返回键文字对象
        TextView tvTitle=mTitleBar2.getTvTitle();//标题栏中间文字对象
        TextView tvRight=mTitleBar2.getTvRight();//右侧返回键文字对象
        ImageView imvRight=mTitleBar2.getImvRight();//右侧返回键图片对象
2.3 TitleBar2显示样式

默认情况下，TitleBar2所有子控件均不显示，需要啥样式自己显示出来。
例如我只要显示中间标题的样式，我可以这样(为方便看效果，标题栏背景使用红色)：

mTitleBar2.getTvTitle().setVisibility(View.VISIBLE);

显示效果如下


image.png

下面以左返回键为例(右返回键雷同，此处不表)，显示左返回键图标+标题：

        mTitleBar2.getImvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvTitle().setVisibility(View.VISIBLE);
        //显示左侧图标
        mTitleBar2.getImvLeft().setImageResource(R.mipmap.ic_back_left);

效果如下


image.png

显示左返回键文字+标题

        mTitleBar2.getTvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvTitle().setVisibility(View.VISIBLE);
        //显示左返回键文字
        mTitleBar2.getTvLeft().setText("左返");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvLeft(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvLeft(), R.color.blue);//设置文字颜色
        //显示中间title
        mTitleBar2.getTvTitle().setText("标题栏");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvTitle(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvTitle(), R.color.green);//设置文字颜色

显示如下：


image.png

显示左返图标+左返文字+标题

        //显示控件
        mTitleBar2.getImvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvTitle().setVisibility(View.VISIBLE);
        //显示左侧图标
        mTitleBar2.getImvLeft().setImageResource(R.mipmap.ic_back_left);
        //显示左返回键文字
        mTitleBar2.getTvLeft().setText("左返");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvLeft(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvLeft(), R.color.blue);//设置文字颜色
        //显示中间title
        mTitleBar2.getTvTitle().setText("标题栏");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvTitle(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvTitle(), R.color.green);//设置文字颜色

效果如下


image.png
2.4 TitleBar2设置图标

以设置左侧返回键图标为例，你可以这样设置

        //显示左侧图标和右侧图标
        mTitleBar2.getImvLeft().setImageResource(R.mipmap.ic_back_left);
2.5 TitleBar2设置文字

以标题文字的设置为例,你可以这样：

        //显示中间title
        mTitleBar2.getTvTitle().setText("标题栏");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvTitle(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvTitle(), R.color.green);//设置文字颜色
2.6 TitleBar2设置子控件的padding和margin
        //设置控件padding
        mTitleBar2.setPaddings(mTitleBar2.getImvLeft(),2,2,2,2);
        //设置控件margin
        mTitleBar2.setMargins(mTitleBar2.getImvLeft(),2,2,2,2);
2.7 TitleBar2设置点击事件
        //左侧返回键点击事件
        mTitleBar2.setOnClickLeft(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====左侧被点击了====");
                LogUtil.i("====左侧被点击了====");
            }
        });

        //中间点击事件
        mTitleBar2.setOnClickCenter(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====我是中间点击事件====");
                LogUtil.i("====我是中间点击事件====");
            }
        });

        //右侧点击事件
        mTitleBar2.setOnClickRight(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====点击右侧干啥====");
                LogUtil.i("====点击右侧干啥====");
            }
        });

三.TitleBar2在MainActivity中使用

下面贴出TitleBar2在MainActivity中使用代码:

public class MainActivity extends AppCompatActivity{

    private TextView mTextView;
    private Button mButton;

    //声明控件
    private TitleBar2 mTitleBar2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        mTextView=findViewById(R.id.tv);
        mButton=findViewById(R.id.btn);

        //初始化自定义标题栏
        initTitle();

        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LogUtil.i("=====ooooooo==1===");


            }
        });

    }

    private void initTitle(){
        //初始化
        mTitleBar2=findViewById(R.id.title_bar2);

        //获取控件对象
        ImageView imvLeft=mTitleBar2.getImvLeft();//左侧返回键图片对象
        TextView tvLeft=mTitleBar2.getTvLeft();//左侧返回键文字对象
        TextView tvTitle=mTitleBar2.getTvTitle();//标题栏中间文字对象
        TextView tvRight=mTitleBar2.getTvRight();//右侧返回键文字对象
        ImageView imvRight=mTitleBar2.getImvRight();//右侧返回键图片对象
        //显示控件
        mTitleBar2.getImvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvLeft().setVisibility(View.VISIBLE);
        mTitleBar2.getTvTitle().setVisibility(View.VISIBLE);
        mTitleBar2.getTvRight().setVisibility(View.VISIBLE);
        mTitleBar2.getImvRight().setVisibility(View.VISIBLE);

        //显示左侧图标和右侧图标
        mTitleBar2.getImvLeft().setImageResource(R.mipmap.ic_back_left);
        mTitleBar2.getImvRight().setImageResource(R.mipmap.ic_back_right);

        //显示左返回键文字
        mTitleBar2.getTvLeft().setText("左返");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvLeft(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvLeft(), R.color.blue);//设置文字颜色
        //显示中间title
        mTitleBar2.getTvTitle().setText("标题栏");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvTitle(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvTitle(), R.color.green);//设置文字颜色
        //显示右返回键文字
        mTitleBar2.getTvRight().setText("右返");//设置文字
        mTitleBar2.setTextSize(mTitleBar2.getTvRight(),5);//设置文字大小
        mTitleBar2.setTextColor(mTitleBar2.getTvRight(), R.color.blue);//设置文字颜色

        //设置控件padding
        mTitleBar2.setPaddings(mTitleBar2.getImvLeft(),2,2,2,2);
        //设置控件margin
        mTitleBar2.setMargins(mTitleBar2.getImvLeft(),2,2,2,2);

        //左侧返回键点击事件
        mTitleBar2.setOnClickLeft(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====左侧被点击了====");
                LogUtil.i("====左侧被点击了====");
            }
        });

        //中间点击事件
        mTitleBar2.setOnClickCenter(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====我是中间点击事件====");
                LogUtil.i("====我是中间点击事件====");
            }
        });

        //右侧点击事件
        mTitleBar2.setOnClickRight(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ToastUtil.shortShow("====点击右侧干啥====");
                LogUtil.i("====点击右侧干啥====");
            }
        });
    }

}

四.效果图和项目结构图

1.gif

image.png

五.TitleBar2源码

下面贴出TitleBar2源码：

还有 34% 的精彩内容
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
支付 ¥4.00 继续阅读

推荐阅读更多精彩内容

  • 自定义标题栏TitleBar
    前言 在Android开发过程中，我们经常会用到标题栏。Android系统也自带标题栏，但是由于其不够灵活，我们往...
    奔跑的佩恩阅读 7,475评论 0赞 6
  • C# 常用控件及单击事件
    1、窗体 1、常用属性 （1）Name属性：用来获取或设置窗体的名称，在应用程序中可通过Name属性来引用窗体。 ...
    Moment__格调阅读 10,055评论 0赞 11
  • UI设计基础
    1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则： 遵从，UI应该有助于人们理解内...
    Willry阅读 9,055评论 1赞 48
  • EOS区块链浏览器
    EOS作为一个全球参与的区块链公链，于6月10日21点上线后每时每刻都在记录用户的交易数据。根据scaneos.i...
    逆斗大学堂阅读 3,720评论 2赞 0
  • 合理安排
    总觉得要做些事情，也会提醒自己要记得做，可是有时候忙碌过后，就会把刚刚念道要做的事情忘记了。所以还是想起要做什么事...
    伊雨翎阅读 1,488评论 0赞 0