（三十二）ToolBar 与 SearchView

最新推荐文章于 2022-09-22 13:45:00 发布

孤独灬啸月

最新推荐文章于 2022-09-22 13:45:00 发布

阅读量336

点赞数

分类专栏：高级UI

本文链接：https://blog.csdn.net/qq_18983205/article/details/78596746

版权

高级UI 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。

一、ActionBar

ActionBar 是一种新増的导航栏功能，在 Android 3.0 之后加入到系统的 API 当中，它标识了用户当前操作界面的位置，并提供了额外的用户动作、界面导航等功能。

使用 ActionBar 的好处是，它可以给提供一种全局统一的UI界面，使得用户在使用任何一款软件时都懂得该如何操作，并且ActionBar还可以自动适应各种不同大小的屏幕。为了让安卓应用的界面更加统一同时降低用户的学习成本以及避免安卓用户在使用中逻辑混乱。

但是，ActionBar 不仅界面丑，而且有比较多的问题，扩展性差。

Toolbar 是 Android 5.0 的推出的，放在了v7包中作为控件，它是为了取代actionbar而产生的，意味着官方在某些程度上认为 ActionBar 限制了 Android app 的开发与设计的弹性。

二、Toolbar

Toolbar 相对比较简单，直接上源码。

1.Demo

效果：
这里写图片描述

MainActivity：

public class MainActivity extends AppCompatActivity {

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        //替换 ActionBar
        setSupportActionBar(toolbar);

        //监听 Navigatio
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //监听菜单点击
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "点击", Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.view_item, menu);
        return super.onCreateOptionsMenu(menu);
    }
}

菜单的配置是在 view_item.xml 中，需要重写 onCreateOptionsMenu 方法，并在 onCreateOptionsMenu 中进行加载。

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xiaoyue.toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:navigationIcon="@drawable/icon_back"
        app:logo="@mipmap/ic_launcher"
        android:background="@color/colorPrimary"
        app:title="首页"
        app:subtitle="副标题">

        <!--自己的样式-->
        <android.support.v7.widget.AppCompatTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自己的样式"/>
    </android.support.v7.widget.Toolbar>

</android.support.constraint.ConstraintLayout>

app:navigationIcon 配置 Toolbar 的图标；app:logo 配置图标后的 logo； android:background 配置 Toolbar 的背景颜色； app:title 配置 Toolbar 的标题； app:subtitle 配置 Toolbar 的副标题。

Toolbar 中是一个 ViewGroup，可以在里面添加自己定义的布局，效果图中间的“自己的样式”几个字就是在这边配置的。

view_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="查找"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="always"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="设置"
        android:icon="@android:drawable/ic_menu_set_as"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        android:title="分享"
        android:icon="@android:drawable/ic_menu_share"
        app:showAsAction="always"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="100"
        android:title="编辑"
        android:icon="@android:drawable/ic_menu_edit"
        app:showAsAction="ifRoom"/>
</menu>

app:showAsAction 是用来指定这个动作是放置在操作栏上，还是溢出菜单中。
1.设置为”ifRomom”，如果操作栏有空间放置，则放置在操作栏上，否则放置到溢出菜单中。
2.设置为”always”，这个动作将总是放置在操作栏上。
3.设置为”never”，这个动作将总是放置在溢出菜单中。

style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

这边要使用 NoActionBar，否则，系统有可能自动赠送一个。

2.步骤

第一步  引入v7包

第二步  修改Them主题，如果不修改，则会报异常android:theme="@style/Theme.AppCompat.NoActionBar" 异常 This Activity already has an action bar supplied by the window decor

第三步  在布局中写入ToolBar

第四步  把Activity替换成AppCampactActivity  

第五步  替换ToolBar

3.ToolBar API

collapseActionView()
折叠当前展开了行动视图。

showOverflowMenu()
从显示相关的菜单溢出项目。

dismissPopupMenus()
关闭所有当前显示弹出式菜单，包括溢出或子菜单。

isOverflowMenuShowing()
检查溢出菜单是否正在显示。

inflateMenu(int resId)
膨胀的菜单资源到这个工具栏。

hideOverflowMenu()
隐藏关联菜单溢出项目。

setContentInsetEndWithActions(int insetEndWithActions)
设置开始的内容插入时操作按钮都存在使用。

setContentInsetStartWithNavigation(int insetStartWithNavigation)
设置启动内容插入时，导航按钮存在使用。

setContentInsetsRelative(int contentInsetStart, int contentInsetEnd)
设置此相对布局方向工具栏的内容插图。

setLogo(Drawable drawable)
设置一个Log图片。

setLogoDescription(int resId)
设置Log的说明。

setNavigationContentDescription(CharSequence description)
如果存在设置导航按钮的内容。

setNavigationOnClickListener(View.OnClickListener listener)
设置一个侦听器来导航事件

setOverflowIcon(Drawable icon)
设置图标使用的溢出按钮。

setSubtitle(CharSequence subtitle)
设置此工具栏的字幕。

setSubtitleTextAppearance(Context context, int resId)
设置文本颜色，大小，样式，颜色提示，并突出显示颜色从指定TextAppearance资源。

setTitleMargin(int start, int top, int end, int bottom)
设置标题边距。

setTitleTextAppearance(Context context, int resId)
设置文本颜色，大小，样式，颜色提示，并突出显示颜色从指定TextAppearance资源。

setTitleTextColor(int color)
设置标题的文本颜色，如果存在的话

三、SearchView

SearchView 有 v4 包和 v7 包两个，这边使用 v7 包的。

view_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="查找"
        android:icon="@android:drawable/ic_menu_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>
</menu>

只需要为 item 添加 app:actionViewClass=”android.support.v7.widget.SearchView” 即可。

MainActivity：

public class MainActivity extends AppCompatActivity {

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //监听 Navigatio
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //监听菜单点击
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "点击", Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.view_item,menu);

        MenuItem menuItem = menu.findItem(R.id.action_search);
        //v14 之前版本
//        SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
        //v14 之后版本
        SearchView searchView= (SearchView) menuItem.getActionView();

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            //文字输入完成   提交
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }
            //当文字发生改变
            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });
        //当用户点击   input
        searchView.setOnSearchClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

        //一进来就是 输入框，不隐藏
        searchView.setIconified(false);
        //设置 searchView 点击 × 的时候不关闭，只进行清空
        searchView.setIconifiedByDefault(false);

        //设置右边的图标
        ImageView imageView= (ImageView) searchView.findViewById(R.id.search_go_btn);
        imageView.setImageResource(R.drawable.abc_ic_voice_search_api_mtrl_alpha);
        imageView.setVisibility(View.VISIBLE);
        searchView.setSubmitButtonEnabled(true);

        return super.onCreateOptionsMenu(menu);
    }

在 onCreateOptionsMenu 中可以对 SearchView 进行一些设置。

效果：
这里写图片描述

孤独灬啸月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（三十二）ToolBar 与 SearchView

版权声明：本文为博主原创文章，未经博主允许不得转载。本文纯个人学习笔记，由于水平有限，难免有所出错，有发现的可以交流一下。一、ActionBarActionBar 是一种新増的导航栏功能，在 Android 3.0 之后加入到系统的 API 当中，它标识了用户当前操作界面的位置，并提供了额外的用户动作、界面导航等功能。使用 ActionBar 的好处是，它可以给提供一种全局统一的UI界
复制链接

扫一扫