自定义Toolbar实现简洁标题栏

最新推荐文章于 2024-08-19 11:38:44 发布
最新推荐文章于 2024-08-19 11:38:44 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： android实战 文章标签： android 标题栏 自定义Toolbar
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iiccer/article/details/60470116
版权

项目中,我们会大量的使用到标题栏,使用google推荐的toolbar,可以创造出使用简便的简洁标题栏.方便我们使用.
由于我们使用的标题栏大多需要标题居中显示,而toolbar自带的标题不是居中显示,我们可以自定义toolbar布局,解决这一问题.

自定义toolbar布局

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    >
    <TextView
        android:id="@+id/toolbar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:singleLine="true"
        android:text="左侧文本"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="16dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:text="标题"
        android:textSize="20dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/toolbar_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:visibility="visible"
        android:text="右侧文本"
        android:textColor="@color/white"
        android:textSize="16dp" />
</android.support.v7.widget.Toolbar>

我们创建一个布局,里面包含三个textview,分别在左侧,右侧和中间.

然后,我们创建自定义toolbar类,继承自Toolbar.并将布局载入.

public class CustomToolbar extends Toolbar {

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    private Toolbar toolbar;

    public CustomToolbar(Context context) {
        this(context, null);
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.view_customtoolbar,this);
    }
  }

这时,最基本的标题栏就已经做好了.在里面的布局已经可以显示出来.我们需要根据自己的需求进去扩展.
比如:
可以自由设置背景色
可以只显示标题栏,不显示左右文本
可以将文本替换成图片
可以响应点击事件
…
前面两项都十分简单,就略过了.

关于图片文本自由更换,我的思路是需要设置图片时,将文本置为空,设置textview的drawableLeft或者drawableRight.

 /**
     * 设置左侧文本
     * @param text
     */
    public void setLeftText(String text) {

        lefttext.setVisibility(VISIBLE);
        lefttext.setText(text);

        //设置文本则不显示图片
        lefttext.setCompoundDrawables(null,null,null,null);

    }

    /**
     * 设置右边文本
     * @param text
     */
    public void setRightText(String text) {

        righttext.setVisibility(VISIBLE);
        righttext.setText(text);

        //设置文本则不显示图片
        righttext.setCompoundDrawables(null,null,null,null);

    }


    /**
     * 设置左侧图片
     * @param id
     */
    public void setLeftImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //设置图片则不显示文字
        lefttext.setText("");

        lefttext.setCompoundDrawables(drawable,null,null,null);


    }


    /**
     * 设置右侧图片
     * @param id
     */
    public void setRightIcon(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //设置图片则不显示文字
        righttext.setText("");
        righttext.setCompoundDrawables(null,null,drawable,null);

    }

关于响应点击事件,则使用接口和回调就可以解决.

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    OnLeftTextClickListener leftlistener;
    OnRightTextClickListener rightlistener;

 //左侧文本回调接口
    public interface OnLeftTextClickListener {
        void onLeftTextClick();
    }

    /**
     * 设置左侧文本回调
     * @param listener
     */
    public void setOnLeftTextClickListener(OnLeftTextClickListener listener) {
        this.leftlistener = listener;
    }

    //右侧文本回调接口
    public interface OnRightTextClickListener {
        void onRightTextClick();
    }

    /**
     * 设置右侧文本回调
     * @param litener
     */
    public void setOnRightTextClickListener(OnRightTextClickListener litener) {
        this.rightlistener = litener;
    }

.....

     @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        lefttext = (TextView) findViewById(R.id.toolbar_left);
        titletext = (TextView) findViewById(R.id.toolbar_title);
        righttext = (TextView) findViewById(R.id.toolbar_right);
        toolbar = (Toolbar) findViewById(R.id.toolbar_layout);

        lefttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                leftlistener.onLeftTextClick();
            }
        });

        righttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                rightlistener.onRightTextClick();
            }
        });
    }

使用自定义toolbar,以MainActivity为例,
首先将activity的theme设置为noactionbar,
在布局中直接加入.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.benhuan.mytoolbardemo.MainActivity">

    <com.benhuan.mytoolbardemo.CustomToolbar
        android:id="@+id/ctoolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

可以看到效果了:
这里写图片描述
我们想要改变颜色

 private void initToolbar() {


        customToolbar.setToolbarBackgroundColor(R.color.black);
        customToolbar.setToolbarTitle("标题一");

    }

效果:
这里写图片描述
设置只需要标题

private void initToolbar2() {


        customToolbar.setToolbarBackgroundColor(R.color.green);

        customToolbar.setOnlyTitle();

        customToolbar.setToolbarTitle("标题二");

    }

效果:
这里写图片描述
设置点击事件

private void initToolbar3() {


        customToolbar.setToolbarBackgroundColor(R.color.red);

        customToolbar.setToolbarTitle("标题三");

        customToolbar.setLeftText("返回");

        customToolbar.setRightText("添加");

        customToolbar.setOnLeftTextClickListener(new CustomToolbar.OnLeftTextClickListener() {
            @Override
            public void onLeftTextClick() {
                //响应左侧文本点击事件
            }
        });

        customToolbar.setOnRightTextClickListener(new CustomToolbar.OnRightTextClickListener() {
            @Override
            public void onRightTextClick() {
                //响应右侧文本点击事件
            }
        });

    }

效果:
这里写图片描述
将文本切换成图片

 private void initToolbar4() {


        customToolbar.setToolbarBackgroundColor(R.color.colorToolbar);

        customToolbar.setToolbarTitle("标题四");

        customToolbar.setLeftImg(R.drawable.arrow);

        customToolbar.setRightImg(R.drawable.add);

    }

效果:
这里写图片描述
可以看到,使用起来非常简单,以后遇到特殊情况可以继续进行扩展.
代码不多,直接贴出自定义view的源码.

package com.benhuan.mytoolbardemo;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;

/**
 * Created by XieMinFeng.
 * Date: 2017-03-05
 * Time: 10:14
 * Desc:
 */

public class CustomToolbar extends Toolbar {

    private TextView lefttext;
    private TextView titletext;
    private TextView righttext;

    private Toolbar toolbar;

    OnLeftTextClickListener leftlistener;
    OnRightTextClickListener rightlistener;

    public CustomToolbar(Context context) {
        this(context, null);
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.view_customtoolbar,this);
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        lefttext = (TextView) findViewById(R.id.toolbar_left);
        titletext = (TextView) findViewById(R.id.toolbar_title);
        righttext = (TextView) findViewById(R.id.toolbar_right);
        toolbar = (Toolbar) findViewById(R.id.toolbar_layout);

        lefttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                leftlistener.onLeftTextClick();
            }
        });

        righttext.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                rightlistener.onRightTextClick();
            }
        });
    }


    public void setToolbarBackgroundColor(int color) {

        toolbar.setBackgroundResource(color);

    }

    /**
     * 设置只显示标题
     */
    public void setOnlyTitle() {

        lefttext.setVisibility(INVISIBLE);
        righttext.setVisibility(INVISIBLE);
    }

    /**
     * 设置右侧不显示
     */
    public void setNoRightText() {

        righttext.setVisibility(INVISIBLE);
    }


    /**
     * 设置标题
     * @param text
     */
    public void setToolbarTitle(String text) {

        this.setTitle("");
        titletext.setVisibility(View.VISIBLE);
        titletext.setText(text);


    }

    /**
     * 设置左侧文本
     * @param text
     */
    public void setLeftText(String text) {

        lefttext.setVisibility(VISIBLE);
        lefttext.setText(text);

        //设置文本则不显示图片
        lefttext.setCompoundDrawables(null,null,null,null);

    }

    /**
     * 设置右边文本
     * @param text
     */
    public void setRightText(String text) {

        righttext.setVisibility(VISIBLE);
        righttext.setText(text);

        //设置文本则不显示图片
        righttext.setCompoundDrawables(null,null,null,null);

    }


    /**
     * 设置左侧图片
     * @param id
     */
    public void setLeftImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //设置图片则不显示文字
        lefttext.setText("");

        lefttext.setCompoundDrawables(drawable,null,null,null);


    }


    /**
     * 设置右侧图片
     * @param id
     */
    public void setRightImg(int id) {

        Drawable drawable = getResources().getDrawable(id);

        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //设置图片则不显示文字
        righttext.setText("");
        righttext.setCompoundDrawables(null,null,drawable,null);

    }

    //左侧文本回调接口
    public interface OnLeftTextClickListener {
        void onLeftTextClick();
    }

    /**
     * 设置左侧文本回调
     * @param listener
     */
    public void setOnLeftTextClickListener(OnLeftTextClickListener listener) {
        this.leftlistener = listener;
    }

    //右侧文本回调接口
    public interface OnRightTextClickListener {
        void onRightTextClick();
    }

    /**
     * 设置右侧文本回调
     * @param litener
     */
    public void setOnRightTextClickListener(OnRightTextClickListener litener) {
        this.rightlistener = litener;
    }

    /**
     * 设置返回图片
     * @param id 图片的id
     */
    public void setbackIcon(int id) {

        this.setNavigationIcon(id);

        lefttext.setVisibility(GONE);
        //左侧文本不设置draw
        lefttext.setCompoundDrawables(null,null,null,null);

        this.setNavigationOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

    }

}
iiccer
关注
专栏目录
Qt自定义标题栏
coologic
04-24 640
标题栏的最大化、最小化、关闭按钮图标 此类按钮建议使用QToolButton实现，图标可以自定义也可以用Qt自带的基础图标 QToolButton *toolButton_mini;//最小化 QToolButton *toolButton_max;//最大化 QToolButton *toolButton_close;//关闭 toolButton_mini->setIc...
Android标题栏ToolBar详解
mo_android的博客
09-14 1869
很多时候，Androdi应用程序的UI都一招iOS的设计标准实现。以至于Android应用程序失去了许多系统特性。但并无法掩饰许多Android自带的非常好用的系统级控件。 这篇文章简单介绍ToolBar的知识，实践ToolBar的使用。 记录我跟Android的邂逅。ToolBar简介从 Android 3.0（API 级别 11）开始，所有使用默认主题的 Activity 均使用 Actio
自定义toolbar标题栏
lovecyg123的博客
08-29 579
toolbar是什么我们在此也不详细介绍了，还不知道的同学请移步HongYang大神的博客我们来看下面这张图，这个是一个标准的toolbar所包含的全部内容，从左至右从上至下依次：为菜单（返回）按钮，app图标，主标题，子标题，标题，搜索按钮，自添加按钮，最后一个是啥我也叫不出来，暂且叫它三点按钮好了然而在实际开发过程中，我们想要的可能不会是这个样式，例如：或者这样：还有很多很多，然后我们要怎么实现
PyQt-自定义标题栏窗口-ElWindow
最新发布
yjfw_yysq的博客
08-19 547
在大佬的基础上二次开发qt版本：pyside6python测试版本：3.9.19。
自定义 ToolBar 实现标题栏
IT小蔡的博客
03-17 3436
一 、自定义ToolBar前 ，先贴一下style ，相信大家一定和我一样感到既陌生又熟悉 @color/colorAccent @color/colorAccent @color/colorAccent #fff @color/white f
如何自定义Toolbar 标题栏
da_caoyuan的博客
04-02 3799
本篇文章，接着 Toolbar的详细介绍和自定义Toolbar 文章而写。如果你对 Toolbar 的使用还太了解或只是简单的了解。那么你可以移步这里 Toolbar的详细介绍和自定义Toolbar。...
原来Toolbar还能这么用？Toolbar使用最全解析。网友：终于不用老是自定义标题栏啦！.zip
07-11
当你需要实现类似Google Maps那样的滑动折叠标题栏时，可以结合`CollapsingToolbarLayout`和`AppBarLayout`。当用户滚动内容时，Toolbar会逐渐隐藏或者显示部分内容。 7. **添加自定义视图** 如果需要在Toolbar上...
android标题栏自定义标签
09-11
"android标题栏自定义标签"这一主题，主要涉及如何在Android应用的标题栏中添加和定制各种元素，如文字、图片，以及实现沉浸式显示效果。下面将详细讲解这个知识点。 首先，Android的标题栏通常指的是`ActionBar`或...
Android 简化 自定义标题栏
08-21
下面将详细介绍如何在Android项目中实现一个简洁的自定义标题栏，并提供相关知识点。 首先，我们要理解Android系统的标题栏（ActionBar）是Android 3.0（API Level 11）引入的一个组件，主要用于显示应用的名称、...
Android自定义标题栏
05-07
为了实现自定义标题栏，我们通常会使用ToolBar作为基础组件。以下是一些关键步骤： 1. **添加ToolBar到布局**： 在XML布局文件中添加ToolBar，通常将其放在根布局的最上方。例如： ```xml ...
Android 开发隐藏标题栏的方法总结
01-20
然而，在某些情况下，我们可能希望隐藏标题栏以获得更简洁的用户界面或者实现特定的设计需求。以下是几种常见的在Android中隐藏标题栏的方法： 1. **通过修改`styles.xml`文件** 这是最推荐的方法，因为它可以在...
C# xamarin android自定义标题栏
11-16
xamarin android自定义标题栏，希望能够帮助到大家。。
qt自定义工具栏，类似word
08-18
qt自定义工具栏，类似word 详见博客：http://blog.csdn.net/caoshangpa/article/details/52239687
xamarin自定义按钮，隐藏标题栏
01-15
xamarin讲矩形按钮四个角设置为弧形，并且将标题栏隐藏。自己项目上用得，可以看一下，用得vs2017做的
QT代码创建界面(MenuBar,ToolBar)
03-28
qt5用代码实现界面创建，工具栏toolbar和菜单栏menubar。
自定义标题栏
09-25
自定义标题栏，随心所欲，非常漂亮，非常给力
Toolbar的使用(顶部标题栏)
xiyangyang8110的博客
07-07 184
package com.enjoy.mytoolbar; import androidx.annotation.RequiresApi; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.os.Build; import android.os.Bundle; import android.util.Log; import android.vie
xamarin android自定义标题栏（自定义属性、回调事件）
weixin_34234823的博客
07-19 198
自定义控件的基本要求 这篇文章就当是自定义控件入门，看了几篇android关于自定义控件的文章，了解了一下，android自定义控件主要有3种方式： 自绘控件：继承View类，所展示的内容在OnDraw方法中绘制出来 组合控件：不需要绘制视图显示的内容，只用系统原生的控件，将几个控件组合起来，（这就是这篇文章要写的自定义标...
自定义ToolBar与ToolBar的封装，使ToolBar的Title居中
传臣、的博客
03-01 496
如图：有关ToolBar的详细介绍： Frist Blood Double Kill接下来介绍我们的ToolBar：首先看attrs.xml文件，这里定义了几个属性：<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomToolBar"> <attr name="is
Origin软件教程：自定义工具栏与菜单
反之，浮动工具栏双击其标题栏可以变为固定。 这些定制功能使得Origin能够根据用户的需求进行个性化设置，提高工作效率。通过灵活调整工具栏的位置和内容，用户可以在处理数据和制作图表时更加得心应手。在学术研究...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值