Toolbar

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值