ToolBar的使用

最新推荐文章于 2024-03-25 09:50:19 发布
最新推荐文章于 2024-03-25 09:50:19 发布
阅读量389 收藏
点赞数
分类专栏： 模拟淘宝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zuo_XP/article/details/52750130
版权


效果图：上面

实现步骤：

1.首先定义一个toolbar的layout布局，这个布局中含有editText 和TextView，Button，对应上面的效果图

2.

<?xml version="1.0" encoding="utf-8"?>
<!--这个布局是toolbar的子布局-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/toolbar_searchview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:drawableLeft="@mipmap/icon_search"
        style="@style/search_view"
        android:hint="请输入搜索内容"


        android:visibility="gone"></EditText>


    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:visibility="gone"
        />


    <Button
        android:id="@+id/toolbar_rightButton"
        android:layout_width="20sp"
        android:layout_height="20sp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        android:visibility="gone"
        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
         />


</RelativeLayout>


editText的样式文件：

1.style中的文件

  <!--editText的样式-->
    <style name="search_view">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorHint">@color/white</item>


        <item name="android:background">@drawable/selector_search_view</item>
        <item name="android:paddingTop">6dp</item>
        <item name="android:paddingBottom">6dp</item>
        <item name="android:paddingLeft">4dp</item>


        <item name="android:singleLine">true</item>
    </style>

2.drabable中的selector_search_view文件：

<?xml version="1.0" encoding="utf-8"?>


    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false" >
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#D82917" />
            </shape>
        </item>
    </selector>


2.在widget中新建ByToolBar文件，它就死自定义的ToolBar只不过是以类的形式，显示出来，代码后面上


3.在你需要显示这个toolbar的布局里面加上ByToolBar这个类，与此同时你先要在values中新建一个attrs的文件夹，在里面自定义几个需要使用的属性

attrs的代码;


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ByToolBar">
        <attr name="rightButtonIcon" format="reference"/>
        <attr name="isShowSearchView" format="boolean"/>
    </declare-styleable>
</resources>
<!--format="refreence"这个是来规定取值范围-->

<!--refrence这个是为了可以调用自定义的button的图片-->
    <!--boolran这个是为了空时editText和TextView，button的可见性切换-->


layout布局：

<!--backgrounf在style中修改背景颜色，minheight是最小高度-->

<!-- app:title=""这个设置toolbar上的textview的文字，        app:navigationIcon="@mipmap/icon_back_32px"这个是设置最左边的图案，可以不自定义-->

<!-- -    app:rightButtonIcon="@mipmap/icon_back_32px"

 app:isShowSearchView="true"

这两个就是在ByToolBar中自定义的设置控件的可见性切换，和右边button的可见性->
    <zuo.com.ui.widget.ByToolBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:title="@string/home"
        app:rightButtonIcon="@mipmap/icon_back_32px"
        app:navigationIcon="@mipmap/icon_back_32px"
        app:isShowSearchView="true"
   >



最后是ByToolBar的代码：

package zuo.com.ui.widget;


import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.StringRes;
import android.support.v7.widget.TintTypedArray;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;


import zuo.com.ui.R;


/**
 * Created by Administrator on 2016/10/7.
 */
public class ByToolBar extends Toolbar {


    private LayoutInflater layoutInflater;


    private TextView mTextTitle;
    private EditText mSearchView;
    private Button mRightButton;


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


    public ByToolBar(Context context, @Nullable AttributeSet attrs) {
        this(context,attrs,0);
    }
//第三个构造函数，调用第二个构造函数，第二个构造函数调用第一个构造函数
    public ByToolBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


        initView();
        //设置editText的左右边距
        setContentInsetsRelative(10,10);


        //这个实际上就是复制自定义的button的图案
        if (attrs != null) {
            final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                    R.styleable.ByToolBar, defStyleAttr, 0);




            final Drawable rightIcon = a.getDrawable(R.styleable.ByToolBar_rightButtonIcon);
            if (rightIcon != null) {
                //setNavigationIcon(navIcon);
                setRightButtonIcon(rightIcon);
            }


            /**
             * 这个是设置editText控件，他不能与textview和button同时出现，所以出现了就要调用下面的方法，设置textview的可见性
             */
            boolean isShowSearchView = a.getBoolean(R.styleable.ByToolBar_isShowSearchView,false);


            if(isShowSearchView){


                showSearchView();
                 hideTitleView();
                hideRightButton();

         //设置最左边控件的可见性
         setNavigationIcon(null);





            }
            a.recycle();//关闭a
        }
    }


    /**
     *设置右边button 的值
     */
    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public void  setRightButtonIcon(Drawable icon){


        if(mRightButton !=null){


            mRightButton.setBackground(icon);
            mRightButton.setVisibility(VISIBLE);
        }
    }


    /**
     *右边button的点击事件
     */
    public  void setRightButtonOnClickListener(OnClickListener li){


        mRightButton.setOnClickListener(li);
    }


    /**
     * 这个函数实际上就是初始化tool_bar中三个控件的实例对象，然后将他们放在一个LinearLayout不居中，实现ToolBar的布局
     */
    private void initView() {
        if(mTextTitle==null) {
            layoutInflater = LayoutInflater.from(getContext());
            View view = layoutInflater.inflate(R.layout.tool_bar, null);


            mTextTitle = (TextView) view.findViewById(R.id.toolbar_title);
            mSearchView = (EditText) view.findViewById(R.id.toolbar_searchview);
            mRightButton = (Button) view.findViewById(R.id.toolbar_rightButton);


            LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
            addView(view, lp);
        }


    }


    /**
     *下面的几个getset函数实际上就是设置tool_bar中三个控件的可见性
     */
    @Override
    public void setTitle(@StringRes int resId) {
        super.setTitle(resId);
        setTitle(getContext().getText(resId));
    }


    @Override
    public void setTitle(CharSequence title) {
        initView();
       if(mTextTitle!=null){
           mTextTitle.setText(title);
           showTitleView();


       }
    }
    public  void showSearchView(){


        if(mSearchView !=null)
            mSearchView.setVisibility(VISIBLE);


    }




    public void hideSearchView(){
        if(mSearchView !=null)
            mSearchView.setVisibility(GONE);
    }


    public void showTitleView(){
        if(mTextTitle !=null)
            mTextTitle.setVisibility(VISIBLE);
    }




    public void hideTitleView() {
        if (mTextTitle != null)
            mTextTitle.setVisibility(GONE);


    }


    public void hideRightButton(){
        if(mRightButton!=null){
            mRightButton.setVisibility(GONE);
        }
    }


    }







Zuo_XP
关注
专栏目录
Toolbar的简单介绍和如何简单自定义toolbar
wuyinlei的博客
11-29 1万+
通过本篇可以了解到： 1.什么是ToolBar 2.ToolBar 的一些重要属性 3.如何自定义ToolBar
Toolbar自定义及自定义控件类的三个构造函数解析
lhp15575865420的博客
07-11 418
Android中的toolbar自定义，通过自定义控件类的方法，并合理使用自定义类必须重写的三个构造函数
探秘创新交互：Yalantis的JellyToolbar项目详解
最新发布
gitblog_00059的博客
03-25 325
探秘创新交互：Yalantis的JellyToolbar项目详解 项目地址:https://gitcode.com/Yalantis/JellyToolbar 项目简介 JellyToolbar是由知名软件开发公司Yalantis开源的一个Android库，旨在为应用提供一种新颖、富有弹性的工具栏（Toolbar）效果。这种动态的效果使得用户界面更加生动有趣，可以提升用户的交互体验，并在众多应用中...
wangEditor扩展一个查看源码的功能
hutao1101175783的专栏
07-20 1411
css: .w-e-toolbar { flex-wrap: wrap; -webkit-box-lines: multiple; } .w-e-toolbar .w-e-menu:hover{ z-index: 10002!important; } .w-e-menu a { text-decoration: none; } js: var editor_lt={}; wangEditor.viewsource = { ...
vue-quill-editor 富文本编辑器禁用/不可编辑
julying的博客
08-15 2万+
最近需要用vue做一个富文本编辑器，我选择了vue-quill-editor，可是需要实现禁用的效果，Quill-editor官方网站上虽然说明了如何禁用，但我没有找到用vue如何实现的方法，在网上也没有找到解决方法后，我自己实现了一下。 vue： &amp;lt;el-form-item label=&quot;描述：&quot; :label-width=&quot;formLabelWidth&quot;&amp;gt; ...
toolbar示范_VB6.0的toolbar使用示范_
10-01
在本教程中，我们将深入探讨如何在VB6.0中使用`Toolbar`控件，并通过实践案例——“toolbar示范”来学习其基本用法。 首先，让我们了解`Toolbar`控件的基本属性： 1. **Buttons**：这是`Toolbar`控件的一个重要...
Android toolbar 使用详解
08-14
本教程将深入探讨如何在Android项目中有效地使用Toolbar，包括它的基本设置、右键菜单（Overflow Menu）的实现、弹出菜单（PopupMenu）的添加，以及自定义标题栏的细节。 首先，我们需要在项目的布局XML文件中引入...
ToolBar使用方法详解
08-29
ToolBar 使用方法详解 ToolBar 是 Android 中一个功能强大且灵活的控件，它可以取代传统的 ActionBar，提供了更灵活的使用方式。在这篇文章中，我们将详细介绍 ToolBar 的使用方法，并提供相关的配置和实现细节。 ...
Asp.Net从零开始18(Toolbar使用)
02-28
### Asp.Net从零开始18(Toolbar使用) 在ASP.NET Web Forms中，`Toolbar` 控件是一个非常实用的功能组件，它可以为用户界面提供一系列工具按钮，这些按钮可以帮助执行诸如编辑、保存、删除等常见操作。对于刚接触ASP...
JellyToolbar-果冻肉效果的Toolbar.zip
09-24
2017-04-07果冻肉效果的Toolbar支持Android SDK 16 集成：Add to your root build.gradle:allprojects { repositories {   ...   maven { url "https://jitpack.io" } } }Add the dependency:dependencies {   compile 'com.github.yalantis:jellytoolbar:v1.0'}使用<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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.yalantis.jellytoolbar.widget.JellyToolbar         android:id="@ id/toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@color/colorPrimary"         android:paddingLeft="@dimen/activity_horizontal_margin"         android:paddingStart="@dimen/activity_horizontal_margin"         app:cancelIcon="@drawable/ic_close"         app:endColor="@color/colorEnd"         app:icon="@drawable/ic_search"         app:startColor="@color/colorStart"         app:title="@string/str_news_feed"         app:titleTextColor="@android:color/white" /> </LinearLayout>public class MainActivity extends AppCompatActivity {     private JellyToolbar toolbar;     private AppCompatEditText editText;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         toolbar = (JellyToolbar) findViewById(R.id.toolbar);         toolbar.getToolbar().setNavigationIcon(R.drawable.ic_menu);         toolbar.setJellyListener(jellyListener);         editText = (AppCompatEditText) LayoutInflater.from(this).inflate(R.layout.edit_text, null);         editText.setBackgroundResource(R.color.colorTransparent);         toolbar.setContentView(editText);     }     private JellyListener jellyListener = new JellyListener() {         @Override         public void onCancelIconClicked() {             if (TextUtils.isEmpty(editText.getText())) {                 toolbar.collapse();             } else {                 editText.getText().clear();             }         }     }; }
Toolbar样式定制详解
yancychas的博客
08-14 1312
前言 Marterial Design出来也有一段时间了，为了紧跟Google的设计规范，决定在项目中使用Toolbar。使用了一段时间之后，发现很多时候原始的Toolbar并不能满足项目的要求。为了适应项目多样化的需求，对Toolbar进行了深入的研究。 Toolbar简介 Toolbar使应用的标准工具栏，可以说是Actionbar的升级版。和Actionbar相比，Tool
vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options
d649237053的博客
08-01 1730
链接地址 https://blog.csdn.net/div_ma/article/details/79536634
使用wangEditor富文本编辑器遇到的问题总结
热门推荐
冰雪为融的博客
12-01 3万+
怎么使用和安装我就不详细说了，文档写得很清楚，https://www.kancloud.cn/wangfupeng/wangeditor3/332599 1、当屏幕缩时，富文本编辑器的选项会被隐藏，如下图官网的demo：当屏幕变小时，菜单选项就超出了富文本编辑器的区域，撤回和恢复已经隐藏不见了 原因，如果我们检查代码就会发现，其实富文本编辑器使用了弹性盒模型（不懂的百度，推荐阮一峰大神的文...
聊天室效果
dxm809的博客
05-04 210
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:android="http:/...
最全面的toolbar自定义源码
Zuo_XP的博客
10-21 981
1.首先定义你要的toolbar的布局：toolbar.xml xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" andro
Toolbar用法详解:
showdy的博客
12-30 4365
Toolbar用法详解:Toolbar的组成:Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements: A navigation button. This m
toolbar使用
05-28
使用Toolbar的步骤如下： 1.在布局文件中定义Toolbar，例如： ``` <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> ``` 2.在Activity中找到Toolbar，并将其设置为ActionBar，例如： ``` Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); ``` 3.设置Toolbar的样式和功能，例如： ``` //设置标题 getSupportActionBar().setTitle("My Toolbar"); //设置导航图标 getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_back); //设置菜单 @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { //处理菜单点击事件 return true; } else if (id == android.R.id.home) { //处理导航图标点击事件 return true; } return super.onOptionsItemSelected(item); } ``` 这样就可以使用Toolbar来实现顶部导航栏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值