Android Toolbar 使用
2016-04-29 15:38
603 查看
概述
自从Google 推出 Material Design 发展至今,市面上大多的App都逐步采用了这种设计方式。其中新版本的5.X SDK中推荐使用AppCompatActivity代替了ActionBarActivity。对于ActionBar 本人并没有深入研究过。目前新版本的SDK也已经弃用了。取而代之的是ToolBar。ToolBar 位于
android.support.v7.widget.Toolbar,提供了低版本的兼容,包含了大多的ActionBar操作。并且ToolBar可以直接在布局文件中声明。相对ActionBar灵活很多。
ToolBar共有2中使用方式:
将ToolBar作为ActionBar使用
将ToolBar作为单独控件使用,意味着ToobBar可以和ActionBar共存。
本文主要说的是第一种方式,代替ActionBar。
使用ToolBar
隐藏ActionBar
App的主题需要继承 Theme.AppCompat.Light.NoActionBar<style name="Theme.MaterialDesign" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/app_primary_color</item> <item name="colorPrimaryDark">@color/app_primary_dark_color</item> <item name="colorAccent">@color/app_primary_color</item> <item name="android:textSize">16sp</item> <item name="android:windowBackground">@color/white</item> </style>
此处我使用了一些Color Palette ,对应Material Design
其中各种颜色的对应如下图:
其中navigationBarColor 属性5.0以下设备可能会失效,可以通过定义values-v21来设定。
在xml中声明ToolBar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id/toolbar" style="@style/ToolBarStyle"> <TextView android:id="@id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:ellipsize="end" android:singleLine="true" android:textColor="@color/white" android:textSize="20sp" /> </android.support.v7.widget.Toolbar>
由于本质上ToolBar是一个ViewGroud ,并且在ToolBar中的Title 属性显示的标题是在左上角的,所以我在这里定义了一个TextView用于显示标题
其中Toolbar 需要设定样式,ToolBarStyle
<style name="ToolBarStyle"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">45dp</item> <item name="android:minHeight">45dp</item> <item name="android:background">?attr/colorPrimary</item> <item name="android:theme">@style/PopWindowStyle</item> </style>
ToolBar 需要设定
background这里设为 colorPrimary 的值,跟上面Material Design Theme 设定的ActionBar颜色一致。
<style name="PopWindowStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <item name="android:colorBackground">@color/white</item> <item name="android:textColorPrimary">@color/red</item> </style>
这里设定了ToolBar的背景颜色和文字颜色。
在代码中使用ToolBar
首先,当然需要findViewById找到ToolBar
toolbar = (Toolbar) findViewById(R.id.toolbar);
其次我这里有个title的TextView也需要找到:
toolbar_title = (TextView) findViewById(R.id.toolbar_title);
然后代替ActionBar
setSupportAction(toolbar);
注意,调用了
setSupportActionBar之后,菜单的加载只能在
onCreateOptionsMenu中加载了,然后在
onOptionsItemSelected处理菜单的点击事件。
假如你不需要ActionBar的功能,只需要作为标题和一些菜单的作用,你也可以不调用
setSupportActionBar然后直接用ToolBar 加载Menu 。
toolbar.inflateMenu(menuId); toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { return false; } });
通过
setOnMenuItemClickListener来处理菜单的点击时间。
在实验过程中,也碰到一些问题。 假如我需要实现在ToolBar右边显示一个图标,点击之后会弹出相应的菜单选项出来,我采用的是定义Menu的二级菜单,然后用ToolBar加载。效果实现了,但是弹出来的选项框会出现在ToolBar顶部,而且把ToolBar的右边部分遮住了,我的需求是,选项框会在TooBar的右下方显示。(现在大多App都是这样的,毕竟不能挡住了菜单栏) 但是我发现并没有方法,最后想了个折中的方法,使用PopupWindow 在菜单点击的时候弹出来显示在ToolBar下方。目前没有找到ToolBar本事的实现方式。
例子
本例子实现ToolBar和DrawerLayout结合,左右两边都简单加载一个空白的Fragment,效果图:例子实现起来非常简单。
首先是布局文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/widget_toolbar" /> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/drawer_content" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <FrameLayout android:id="@+id/drawer_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="left" android:background="@color/white"> </FrameLayout> </android.support.v4.widget.DrawerLayout> </LinearLayout>
接下来是Activity代码:
package com.crxz.sample; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.widget.TextView; import com.crxz.R; /** * Created by Crxz on 16-4-29 * Description: */ public class DrawerToolbarActivity extends AppCompatActivity { Toolbar mToolbar; TextView mToolbar_title; DrawerLayout mDrawerLayout; SampleFragment leftFragment; SampleFragment contentFragment; ActionBarDrawerToggle mActionBarDrawerToggle; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drawer_toolbar); initToolBar(); initViews(); } private void initViews() { mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout); mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close); mActionBarDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mActionBarDrawerToggle); leftFragment = new SampleFragment(); contentFragment = new SampleFragment(); getSupportFragmentManager().beginTransaction().add(R.id.drawer_menu,leftFragment,"left").commit(); getSupportFragmentManager().beginTransaction().add(R.id.drawer_content,contentFragment,"left").commit(); } private void initToolBar() { mToolbar = (Toolbar) findViewById(R.id.toolbar); mToolbar.setTitle(""); mToolbar_title = (TextView) findViewById(R.id.toolbar_title); mToolbar_title.setText("Title"); setSupportActionBar(mToolbar); mToolbar.setNavigationIcon(R.drawable.ic_toolbar_back); } }
几十行代码即可实现ToolBar + DrawerLayou结合 ,是不是很方便!!!
曾经我纠结过ToolBar 左上角的图标是怎么实现的,现在看来是因为ActionBarDrawerToggle自带的。
相关文章推荐
- Android的图表世界–如何使用MPAndroidChart
- Android实现下拉菜单Spinner效果
- Android系统中使用shareuserid获取系统权限的教程
- Android Studio 基础总结
- Android 自定义TabHost
- 如何分析解决Android ANR
- Android自定义样式对话框Dialog
- Android实现单项、多项选择操作
- android从自己的应用打开邮箱和QQ
- This Handler class should be static or leaks might occur Android
- EventBus的使用详解
- Android 乱码
- Android RecyclerView 使用完全解析 体验艺术般的控件
- [Android] Fragment 全解析
- Android中制作自定义dialog对话框的实例分享
- android studio快捷键大全
- Android中获取location永为null
- 值得推荐的android开源框架
- Mac下Android Studio使用github
- android 常见分辨率(mdpi、hdpi 、xhdpi、xxhdpi )屏幕适配