Toolbar细节运用

尽量不要转载,好多地方待完善。有问题的地方希望提出来共同交流qq240027695。以免误导他人。谢谢:)

Toolbar重要属性详解

1.toolbar主题设置

设置AppTheme继承NoActionBar,隐藏原来的ActionBar

    <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>
        <itemname="android:textColorPrimary">@color/textColorPrimary</item>
        <item name="colorControlNormal">@color/colorControlNormal</item>
        <!--itemBackground设置menu菜单背景色-->
        <!--<item name="android:itemBackground">#3F51B5</item>-->
        <item name="actionOverflowMenuStyle">@style/MenuStyle</item>
    </style>

2.布局文件引入

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

3.Activity控件主要代码

这里的实现对menu菜单响应有两种方式
第一种方式:
- 把toolbar当成容器布局控件,可以在里面加任意布局,并且menu菜单自己实现inflate。在用setOnMenuItemClickListener监听item事件。

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        // App Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle("四叶草");
        // Sub Title
        toolbar.setSubtitle("Sub title");
        //Navigation Icon
        toolbar.setNavigationIcon(R.drawable.bottom_home_tab_bg);
        toolbar.inflateMenu(R.menu.test);
        toolbar.setOnMenuItemClickListener(newToolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int itemId = item.getItemId();
                switch (itemId) {
                    case R.id.action_publish:
                        Toast.makeText(MainActivity.this, "" + itemId, Toast.LENGTH_SHORT).show();
                    case R.id.action_pick_pic:
                        Toast.makeText(MainActivity.this, "" + itemId, Toast.LENGTH_SHORT).show();
                    case R.id.action_take_pic:
                        Toast.makeText(MainActivity.this, "" + itemId, Toast.LENGTH_SHORT).show();

                }
                return true;
            }
        });
        }

第二种方式:
- 替换以前的Actionbar,在onCreateOptionsMenu方法中实现menu布局的inflate,并且对item事件进行监听。
- 两种方式效果一样,区别是:第一种是toolbar自己的监听事件进行响应。第二种是把toolbar的属性通过setSupportActionBar(toolbar);设置给了以前的Actionbar,进行事件响应。
- 注意:这俩种方式混合也可以实现效果,如:用第一种把//toolbar.inflateMenu(R.menu.test);去掉。在toolbar.setOnMenuItemClickListener()代码后加上setSupportActionBar(toolbar),再加上 getMenuInflater().inflate(R.menu.test, menu),也可以达到相同的效果。原理不清楚,这里做个mark。以后再来深究。或者哪位大哥给说明下,不胜感激:)

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        // App Logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // Title
        toolbar.setTitle("四叶草");
        // Sub Title
        toolbar.setSubtitle("Sub title");
        //Navigation Icon
        toolbar.setNavigationIcon(R.drawable.bottom_home_tab_bg);
        setSupportActionBar(toolbar);
        init();
    }
      @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.test, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
         int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_publish) {
            Toast.makeText(MainActivity.this, "action_publish" , Toast.LENGTH_SHORT).show();
        }
        if (id == R.id.action_pick_pic) {
            Toast.makeText(MainActivity.this, "action_pick_pic" , Toast.LENGTH_SHORT).show();
        }
        if (id == R.id.action_take_pic) {
            Toast.makeText(MainActivity.this, "action_take_pic" , Toast.LENGTH_SHORT).show();
        }
        return super.onOptionsItemSelected(item);
    }

4.细节设置

绝大部分的样式设置都可以在Style中完成。
  <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>
        //菜单字体颜色
        <itemname="android:textColorPrimary">@color/textColorPrimary</item>
        //菜单图标颜色
        <item name="colorControlNormal">@color/colorControlNormal</item>
        <!--itemBackground设置menu菜单背景色-->
        <!--<item name="android:itemBackground">#3F51B5</item>-->
        <item name="actionOverflowMenuStyle">@style/MenuStyle</item>
    </style>
    <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <!--这里更改menu菜单图标-->
      <!--  <item name="android:src">@mipmap/ic_launcher</item>-->
    </style>
    <style name="MenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <!--是否遮盖住标题栏-->
        <item name="overlapAnchor">false</item>
        <!--itemBackground设置menu菜单背景色与上面的android:itemBackground作用相同-->
        <item name="android:popupBackground">#3F51B5</item>
        <!--距离标题栏的距离-->
        <!--<item name="android:dropDownVerticalOffset">29dip</item>-->
    </style>
  • 可以在菜单样式中添加
<menu 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"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_publish"
        android:title="发表"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_pick_pic"
        android:title="选择图片"
        app:showAsAction="withText"
        android:icon="@mipmap/ic_launcher"/>
    <item
        android:id="@+id/action_take_pic"
        android:title="照相"
        app:showAsAction="never" />
   <item
        android:id="@+id/ab_search"
         <!--显示优先级-->
        android:orderInCategory="80"
        android:title="action_search"
         <!--搜索选项-->
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>
    <!-- <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="always"/>-->
</menu>
  • 在第四个item选项中多了一个app:actionViewClass=”android.support.v7.widget.SearchView”属性,v7包里给的一个搜索标题栏。写上这个属性你的标题栏就会多一个搜索按钮,下面是写在onCreateOptionsMenu方法里的监听。第一种方式不知道怎么监听搜索按钮。onCreateOptionsMenu这个方法得必须用了,当然你不要搜索按钮就不必实现这个按钮了。
 mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
             //点击搜索按钮的监听
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }
            //搜索框内容改变的监听
            @Override
            public boolean onQueryTextChange(String newText) {                         
                return true;
            }
        });
  • 研究了下自定义的话还是有点麻烦,不过原生的也差不多。下面写下自定义的主要代码

 private void setSearchView() {
        final float density = getResources().getDisplayMetrics().density;
        mSearchView.setIconified(false);
        mSearchView.setIconifiedByDefault(false);
        final int closeImgId = context.getResources().getIdentifier("search_close_btn", "id", getPackageName());
        ImageView closeImg = (ImageView) mSearchView.findViewById(closeImgId);
        if (closeImg != null) {
            LinearLayout.LayoutParams paramsImg = (LinearLayout.LayoutParams) closeImg.getLayoutParams();
            paramsImg.topMargin = (int) (-2 * density);
            closeImg.setImageResource(R.mipmap.clear_img);
            closeImg.setLayoutParams(paramsImg);
        }
        final int editViewId = context.getResources().getIdentifier("search_src_text", "id", getPackageName());
        mEdit = (SearchView.SearchAutoComplete) mSearchView.findViewById(editViewId);
        if (mEdit != null) {
            mEdit.setHintTextColor(getResources().getColor(R.color.color_hint));
            mEdit.setTextColor(getResources().getColor(R.color.color_white));
            mEdit.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            mEdit.setHint(String.format(getResources().getString(R.string.search_hint_tip), MemoryData.departmentList.get(mPosition).getMembers().size()));
        }
        LinearLayout rootView = (LinearLayout) mSearchView.findViewById(R.id.search_bar);
        rootView.setBackgroundResource(R.drawable.edit_bg);
        rootView.setClickable(true);
        LinearLayout editLayout = (LinearLayout) mSearchView.findViewById(R.id.search_plate);
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) editLayout.getLayoutParams();
        LinearLayout tipLayout = (LinearLayout) mSearchView.findViewById(R.id.search_edit_frame);
        LinearLayout.LayoutParams tipParams = (LinearLayout.LayoutParams) tipLayout.getLayoutParams();
        tipParams.leftMargin = 0;
        tipParams.rightMargin = 0;
        tipLayout.setLayoutParams(tipParams);
        ImageView icTip = (ImageView) mSearchView.findViewById(R.id.search_mag_icon);
        icTip.setImageResource(R.mipmap.ic_search_tip);
        params.topMargin = (int) (4 * density);
        editLayout.setLayoutParams(params);
        mSearchView.setSubmitButtonEnabled(false);
        mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                mSearchText = newText ;
                doSearch();
                return true;
            }
        });
    }

参考:【点击这里】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值