ToolBar之自定义布局

最新推荐文章于 2024-05-16 17:00:54 发布
最新推荐文章于 2024-05-16 17:00:54 发布
阅读量2.4k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hair_/article/details/69095095
版权

       Google官方推荐使用它来代替ActionBar，ToolBar应该都是很熟悉了，随便一搜都能找到一大堆资料，现在之所以还写算是记录一下成长的足迹吧，也希望能够帮助到需要的人，在这里有两种使用方式，但从某一点上看算是一种，话不多说了

这里写图片描述

使用方式一：

1、从上图可以看出ToolBar继承自ViewGroup，所以可以直接把它当做一个ViewGroup来使用，
       一定要使用V7包中的ToolBar才可以，而不是V7包中的ToolBar只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。

        layout 布局文件：

?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_Main"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <TextView
            android:text="石头"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            />

        <ImageView
            android:src="@drawable/img_q"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="right" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

        效果图：
               这里写图片描述
       一开始也看到很多人写的使用这种方式，但是当自己用的时候才发现title不能居中，icon也不能显示在bar的左（右）侧，后来尝试使用gravity来控制子view的位置，但是在使用studio的时候，输入gravity并没有给出有关设置这个属性的提示，一开始还以为没有这个属性，后来从别的地方拷了一个这个属性发现这个属性可以使用，而且并没有报错，如果有碰到这个问题的赶紧试试吧。
（温馨提示：使用的时候不要忘了把manifest中application的theme设置为或继承Theme.AppCompat.Light.NoActionBar）

使用方式二：

自定义view继承ToolBar（这种方式忘了是从哪个视频上看到的了，就仿里面的就造了一个）

       先看一下效果：
          这里写图片描述

       使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.l.toolbardemo.CustomToolBar
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:minHeight="@dimen/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:rightButtonText="更多"
        app:isShowButton="true"
        app:tvToolBarTitle="标题"
        android:layout_alignParentTop="true"

        app:imgBackWidth="@dimen/dimen_25dp"
        app:imgBackHight="@dimen/dimen_25dp"
        />

</RelativeLayout>

       自定义ToolBar：

  • 在构造器中填充 layout：
/**
 * 填充 layout
 */
private void initView() {
    if (mView == null) {
        mInflater = LayoutInflater.from(getContext());
        mView = mInflater.inflate(R.layout.layout_custom_toolbar, null);

        imgToolBarBack = ((ImageView) mView.findViewById(R.id.img_custom_toolbar_back));
        tvToolBarTitle = ((TextView) mView.findViewById(R.id.tv_custom_toolbar_title));
        btnToolBarRight = ((Button) mView.findViewById(R.id.btn_custom_toolbar_right));
        //设置 params
        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
        addView(mView, lp);
    }
}
  • layout_custom_toolbar 布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/actionBarSize">

    <ImageView
        android:id="@+id/img_custom_toolbar_back"
        android:layout_width="@dimen/dimen_25dp"
        android:layout_height="@dimen/dimen_25dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/dimen_10dp"
        android:padding="@dimen/dimen_3dp"
        android:src="@mipmap/ic_action_back" />

    <TextView
        android:id="@+id/tv_custom_toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/color_white"
        android:textSize="@dimen/dimen_16sp" />

    <Button
        android:id="@+id/btn_custom_toolbar_right"
        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/color_white"
        android:visibility="gone" />
</RelativeLayout>
  • 获取自定义属性，并给layout的子view 设置属性
private void initAttrs(AttributeSet attrs, int defStyleAttr) {
    if (attrs != null) {
        final TintTypedArray typedArray = TintTypedArray.obtainStyledAttributes(getContext(), attrs, R.styleable.CustomToolBar, defStyleAttr, 0);

        //# 设置返回图片 img 宽高属性
        int imgBackWidth = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackWidth, imgBackWidthDefault);
        int imgBackHight = (int) typedArray.getDimension(R.styleable.CustomToolBar_imgBackHight, imgBackHightDefault);
        if (imgToolBarBack != null) {
            ViewGroup.LayoutParams layoutParams = imgToolBarBack.getLayoutParams();
            layoutParams.width = imgBackWidth;
            layoutParams.height = imgBackHight;
            imgToolBarBack.setLayoutParams(layoutParams);
        }

        //# 设置标题 tv 属性
        String strTitle = typedArray.getString(R.styleable.CustomToolBar_tvToolBarTitle);
        float strTitleSize = typedArray.getDimension(R.styleable.CustomToolBar_tvToolBarTitleSize, strTitleSizeDefault);
        if (tvToolBarTitle != null) {
            tvToolBarTitle.setText("".equals(strTitle) ? strTitleDefault : strTitle);
            tvToolBarTitle.setTextSize(strTitleSize);
        }

        //# 设置右侧 btn 属性
        final Drawable rightIcon = typedArray.getDrawable(R.styleable.CustomToolBar_rightButtonIcon);
        if (rightIcon != null) {
            setRightButtonIcon(rightIcon);
        }

        boolean isShowButton = typedArray.getBoolean(R.styleable.CustomToolBar_isShowButton, false);
        if (isShowButton) {
            showBhtton();
        }

        CharSequence rightButtonText = typedArray.getText(R.styleable.CustomToolBar_rightButtonText);
        if (rightButtonText != null)
            setRightButtonText(rightButtonText);

        typedArray.recycle();
    }
}
  • 方法的定义：
private void setRightButtonText(CharSequence text) {
    btnToolBarRight.setText(text);
    btnToolBarRight.setVisibility(View.VISIBLE);
}

/**
 * 是否显示右侧 btn
 */
private void showBhtton() {
    if (btnToolBarRight != null)
        btnToolBarRight.setVisibility(VISIBLE);
}

@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void setRightButtonIcon(Drawable icon) {
    if (btnToolBarRight != null) {
        btnToolBarRight.setBackground(icon);
        btnToolBarRight.setVisibility(VISIBLE);
    }
}

public void setRightButtonIcon(int icon) {
    setRightButtonIcon(getResources().getDrawable(icon));
}
  • 自定义属性：
<declare-styleable name="CustomToolBar">

    <attr name="imgBack" format="reference" />
    <attr name="imgBackWidth" format="dimension|reference"/>
    <attr name="imgBackHight" format="dimension|reference"/>

    <attr name="tvToolBarTitle" format="dimension|string" />
    <attr name="tvToolBarTitleSize" format="dimension|reference" />

    <attr name="rightButtonIcon" format="reference" />
    <attr name="isShowButton" format="boolean" />
    <attr name="rightButtonText" format="dimension|string" />

</declare-styleable>

       写到这感觉和第一种方法差不多，就是看起来比前一种高大上一些，但是要复杂不少，具体使用哪一个，还要看自己了。写第二种就是因为可以熟悉一下自定义View，如果能帮助到你~

       Demo地址

煎饼加蛋
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Adnroid Toolbar 自定义Toolbar布局
guoyuguang0的专栏
01-27 1万+
默认调用系统的toolbar，分以下几个步骤： 在布局文件中添加toolbar 描述toolbar中menu的布局 在代码中调用 主布局文件：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
Android自定义toolbar布局
01-17
android一种简单的toolbar布局实例
全网最详细的-动态Toolbar-开发实践总结，99％的程序员都在看！
最新发布
2401_84149765的博客
05-16 268
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Toolbar自定义布局
weixin_33826609的博客
01-16 418
Toolbar如何使用想必大家清楚地很，实际开发中标题栏的样式各色各样，因此其基本样式便不能满足我们的需求，这就需要我们自定义布局。打开ToolBar源码我们发现它继承ViewGroup,这就表示我们可以把它当做一个存放控件的容器。 &lt;android.support.v7.widget.Toolbar android:layout_width="match_pare...
Android自定义ToolBar布局
ywl5320的专栏
01-17 5121
我的视频课程：《FFmpeg打造Android万能音频播放器》        在项目中，我们经常使用toolbar作为标题栏，并为之添加菜单选项。但是会出现这用情况：在主界面要实现类似于tab的切换功能，和IOS那种一样，左右切换，对于用toolbar布局来说，这就有点麻烦了。此时我们就需要来自定义toolbar的布局了，其实还是挺简单的，这里我们需要用到getLayoutInflater().i...
自定义toolbar
Blog_SJT
05-11 427
首先看下效果图：        梳理下类和布局文件： CustomActivity.java(主界面类)      对应的布局文件：activity_custome.xml OtherActivity (另一个Activity界面)   对应的布局文件：activity_other.xml ToolbarLayout(自定义toolbar类)   对应的布局文件为toolbar_la
自定义Toolbar布局+SegmentedGroup
11-23
本实例重点讲解如何自定义`Toolbar`布局，并结合`SegmentedGroup`控件实现一个多选项卡的界面效果。 `Toolbar`作为Android支持库的一部分，可以被用在任何Activity或者Fragment中，它通过设置`setSupportActionBar...
ActionBar自定义布局源码工程
02-14
3. **设置自定义布局**：在Activity的`onCreate`方法中，通过`setSupportActionBar()`方法设置自定义的Toolbar作为ActionBar。然后，调用`getSupportActionBar().setCustomView()`方法，传入自定义布局的ID。 4. **...
自定义ToolBar
03-22
`custom_toolbar_view.xml`是自定义布局文件，可以包含任何你想要的视图元素。记得在添加自定义视图后，可能需要调整`ToolBar`的高度以适应新的内容。 此外，`ToolBar`还支持菜单项的动态添加和操作。通过`...
Android自定义Toolbar
06-27
在Android开发中，`Toolbar`是Google推荐用来替代传统`ActionBar`的新组件，它提供了更大的灵活性和自定义性。这个例程将带你深入理解如何在Android应用中自定义`Toolbar`，并展示其实现过程。 首先，让我们了解`...
Android自定义Toolbar使用方法详解
08-31
主要为大家详细介绍了Android自定义Toolbar使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ToolBar居中添加控件
09-07
在ToolBar工具栏居中添加自定义控件。
android toolbar自定义布局,自定义toolbar布局不居中（已解决）
weixin_42515177的博客
05-25 376
在自定义toolbar的布局时，如果内部使用的布局继承自ViewGroup(比如LinearLayout、RelativeLayout等)，则会在左侧出现一块空白，导致整个toolabr布局右移。一行 代码搞定右移的问题app:contentInsetStart="0dp"代码如下：android:id="@+id/lcs_discover_toolbar"android:layout_width...
Toolbar自定义样式，别致的布局，可复用
Jekin Blog
08-20 6422
前言 昨天，偶然了解到官方提供在support.v7里面的Toolbar，带着好奇、兴奋的心态开始了一段“撸程”，下面就是填坑的节奏，说好的幸福呢 遇到的那些坑 1、自定义toolbar_layout布局的时候，没有提示layout_gravity属性（因为设置的Title要居中），在类里面也没有这个View id的提示； 2、action bar都是图片View，怎么去动态的改变它的ic
解决Toolbar中的困惑，随心所欲定制Toolbar
热门推荐
Android Engineer.
10-11 1万+
前言：本文的重头戏在第4部分，主要讲解新手接触Toolbar时遇到的困惑和如何随心所欲地定制Toolbar,例如， . 如何正确的使用Toolbar . xml中设置属性无效 . 导航按钮导致的间距问题 . 自定义标题文字的大小和颜色 . 自定义ActoinView的文字大小和颜色 . 自定义溢出菜单的弹出窗口的背景、弹出位置 . 标题居中 ...
Toolbar的完全自定义
elder_sword的专栏
06-25 3573
Toolbar是什么，不知道的可以去大神的博客瞻仰下 http://blog.csdn.net/lmj623565791/article/details/45303349 我当时也是看这篇学习的，但是怎么说，看完之后想在自己的项目中把Toolbar完全自定义的时候，博客中并没有讲解。这篇博客也只是一个记载，并没有很高深的技术，废话不多说。一般大家在写Toolbar的布局一般在menu.xml中，
appcompatactivity使用toolbar
05-31
1. 在布局文件中添加 Toolbar 控件，例如： ```xml <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值