Toolbar

来源：互联网发布：java多线程共享数据编辑：程序博客网时间：2024/06/03 05:24

MaterialDesign之Toolbar
一、简介
屏幕中的导航—顶部导航：android.support.v7.widget.Toolbar

1.由于早期的触屏手机中苹果的设计和体验深入人心，在android中为了设计一种顶部导航的效果，谷歌干脆规范了顶部导航—ActionBar（3.0API，也有兼容包）。

2.但是随着Android系统不断更新以及开发者在实际开发中，使用ActionBar开发起来很蛋疼（1.用来比较费劲；2.扩展性太差太死板）。
所以大多数人都会使用一个民间的ActonBar，叫SherlockActionBar。谷歌也意识到了这个问题，就重新定义了一个Toolbar。

3.现在又有个MaterialDesign的APPBar

二、作用
导航控件—显示标题、导航back、快捷操作、菜单等。而且Toolbar不一定要放在顶部，也可以放底部。

三、使用

1.基本使用
（1）.引入support-v7包
（2）.修改主题：

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

注意主题一定要使用：NoActionBar
（3）.写布局，把Toolbar当做一个普通的容器使用。
（4）.Activity继承AppcompatActivity
（5）.使用Toolbar替换ActionBar：

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

2.细节
（1）Toolbar属性：

android:background="?attr/colorPrimary"

设置背景颜色，可以使用系统属性colorPrimary主色调，需要在主题里面设置。

（2）让标题居中显示在toobar

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.seasons.live.toolbar.ToolbarActivity"     xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        app:title="网易新闻"        app:titleTextColor="#ff0"        app:subtitle="旅行"        app:logo="@drawable/ic_launcher"        app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"        >    </android.support.v7.widget.Toolbar></LinearLayout>

（3）布局中设置navigationIcon图标：

app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"

（4）设置NavigationIcon的点击事件监听，比如返回按钮。

toolbar.setNavigationOnClickListener(new OnClickListener() {    @Override    public void onClick(View v) {        finish();    }});

（5）将弹出的菜单泡泡窗体修改成黑底白字Dark；Light白底黑字

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

四、拓展
实现新浪微博话题的Toolbar滑动半透明效果
1.思路：

（1）.监听ScrollView的滑动事件，不断地修改Toolbar透明度
（2）.给MyScrollView设置paddingTop

<RelativeLayout>    <ScrollView>    </ScrollView>    <Toobar></RelativeLayout>

然后还要注意设置：
（1）android:clipToPadding=”false” 该控件的绘制范围是否不在Padding里面。false：绘制的时候范围会考虑padding即会往里面缩进。
（2）android:clipChildren=”false” 子控件是否能不超出padding的区域（比如ScrollView上滑动的时候，child可以滑出该区域）。

五.Toolbar中的搜索框
在上面的基础上，重写onCreateOptionMenu
SearchView属于：android.support.v7.widget.SearchView;

@Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.search, menu);        //SearchView在Menu里面        MenuItem item = menu.findItem(R.id.action_search);        SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);        //设置一出来就直接呈现搜索框---SearchView//      searchView.setIconified(false);        //进来就呈现搜索框并且不能被隐藏//      searchView.setIconifiedByDefault(false);        //有时候我们需要实现自定义扩展效果        //通过猜想，searchView用到了一个布局，去appcompat里面找到abc_search_view.xml,该里面的控件的属性        ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);        icon.setImageResource(R.drawable.abc_ic_voice_search_api_mtrl_alpha);        icon.setVisibility(View.VISIBLE);//      searchView.setMaxWidth(200);        SearchView.SearchAutoComplete et = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);        et.setHint("输入商品名或首字母");        et.setHintTextColor(Color.WHITE);        //设置提交按钮是否可用(可见)        searchView.setSubmitButtonEnabled(true);//      icon.setOnClickListener(new OnClickListener() {//          //          @Override//          public void onClick(View v) {//              Toast.makeText(MainActivity.this, "提交", 1).show();//          }//      });        //监听焦点改变        searchView.setOnQueryTextFocusChangeListener(new OnFocusChangeListener() {            @Override            public void onFocusChange(View v, boolean hasFocus) {                // TODO Auto-generated method stub            }        });        //searchView的关闭监听        searchView.setOnCloseListener(new OnCloseListener() {            @Override            public boolean onClose() {                // TODO Auto-generated method stub                return false;            }        });        searchView.setOnSearchClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(ToolbarActivity.this, "提交", 0).show();            }        });        //监听文本变化，调用查询        searchView.setOnQueryTextListener(new OnQueryTextListener() {            @Override            public boolean onQueryTextSubmit(String text) {                //提交文本                Toast.makeText(ToolbarActivity.this, "提交文本:"+text, 0).show();                return false;            }            @Override            public boolean onQueryTextChange(String text) {                // 文本改变的时候回调                System.out.println("文本变化~~~~~"+text);                return false;            }        });        return true;    }

其中菜单布局：

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context="com.seasons.live.toolbar.ToolbarActivity"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_search"        android:orderInCategory="100"        app:actionViewClass="android.support.v7.widget.SearchView"        app:showAsAction="always"        android:title="查找"/>    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        app:showAsAction="never"        android:title="设置"/>    <item        android:id="@+id/action_share"        android:orderInCategory="100"        app:showAsAction="always"        android:title="分享"        android:icon="@android:drawable/ic_menu_share"/>    <item        android:id="@+id/action_edit"        android:orderInCategory="100"        app:showAsAction="ifRoom"        android:title="编辑"        android:icon="@android:drawable/ic_menu_edit"/></menu>

0 0