Android Toolbar+DrawerLayout使用细节
2016-07-21 11:58
323 查看
1.Toolbar
Toolbar 是Android 5.0后对针对Actionbar的不足进行改进所提出来的,当然大家也可以继续使用自定义的Title但是有些效果还是直接使用现成的轮子比较好,而且对于AndroidUI统一也是有好处的。
1.1Toolbar的使用
Toolbar只需要引用v7包的基础上在布局界面使用<Toolbar/>类似于控件一样使用就可以了。
涉及到样式问题,这里有两种显示方式要注意:
1. 如果要替换ActionBar,需要将主题设置为没有ActionBar的主题,然后调用
2. 你也可以不使用上面的方法,而是直接使用
直接在
这里建议使用第一种,以下以第一种方式讲解:
首先是布局界面:
编写菜单布局:
注意事项:
orderInCategory 标识排放的顺序;
app:showAsAction 用来标识menu的显示方式,主要有三个选择:
1.always,总是显示在界面上
2.never ,不出现在界面上,只出现在右边三个点之中
3.ifroom ,如果界面放不下就自动放到右边三个点中
接着在Activity中设置应用:
注意点:
默认的收到overflow中的选项是只能显示文字的,为了显示图片需要重写这个函数onMenuOpened()。
1.2 Theme相关
2.侧滑DrawerLayout
界面:
activity中绑定;
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View d
b3c6
rawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
theme:见上面详细
<!-- 侧滑箭头 -->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
Toolbar 是Android 5.0后对针对Actionbar的不足进行改进所提出来的,当然大家也可以继续使用自定义的Title但是有些效果还是直接使用现成的轮子比较好,而且对于AndroidUI统一也是有好处的。
1.1Toolbar的使用
Toolbar只需要引用v7包的基础上在布局界面使用<Toolbar/>类似于控件一样使用就可以了。
涉及到样式问题,这里有两种显示方式要注意:
1. 如果要替换ActionBar,需要将主题设置为没有ActionBar的主题,然后调用
setSupportActionBar(toolbar)(需要继承
ActionBarActivity)就可以了。
2. 你也可以不使用上面的方法,而是直接使用
Toolbar
直接在
onCreate方法中添加以下代码即可,并且这种方法也可实现
ActionBar和
Toolbar共存。
这里建议使用第一种,以下以第一种方式讲解:
compileSdkVersion 22(为了让item显示图片,好像只能22,22以上就显示不出来了..)
compile 'com.android.support:appcompat-v7:22.0.0'
首先是布局界面:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:background="@color/colorPrimaryDark" android:minHeight="?attr/actionBarSize" />
编写菜单布局:
<?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:icon="@mipmap/ic_launcher" android:title="搜索" app:showAsAction="ifRoom" /> <item android:id="@+id/action_notification" android:icon="@mipmap/ic_launcher" android:title="通知" app:showAsAction="ifRoom" /> <item android:id="@+id/action_settings" android:orderInCategory="100" android:icon="@mipmap/ic_launcher" android:title="设置" app:showAsAction="withText" /> <item android:id="@+id/action_about" android:orderInCategory="101" android:icon="@mipmap/ic_launcher" android:title="关于" app:showAsAction="withText" /> </menu>
注意事项:
orderInCategory 标识排放的顺序;
app:showAsAction 用来标识menu的显示方式,主要有三个选择:
1.always,总是显示在界面上
2.never ,不出现在界面上,只出现在右边三个点之中
3.ifroom ,如果界面放不下就自动放到右边三个点中
接着在Activity中设置应用:
toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle(""); toolbar.setLogo(R.mipmap.base_common_default_icon_big); setSupportActionBar(toolbar); //menu选项监听函数,包括三点中和外面的 <pre name="code" class="java"> @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_zone) { Toast.makeText(MainActivity.this, "hahah", Toast.LENGTH_SHORT).show(); } return super.onOptionsItemSelected(item); } <pre name="code" class="java"> /** **收到overflow中的item显示图片 **/ @Override public boolean onMenuOpened(int featureId, Menu menu) { if (featureId == Window.FEATURE_ACTION_BAR && menu != null) { if (menu.getClass().getSimpleName().equals("MenuBuilder")) { try { Method m = menu.getClass().getDeclaredMethod( "setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (Exception e) { throw new RuntimeException(e); } } } return super.onMenuOpened(featureId, menu); }
注意点:
默认的收到overflow中的选项是只能显示文字的,为了显示图片需要重写这个函数onMenuOpened()。
1.2 Theme相关
<resources> <style name="AppTheme" parent="@style/AppBaseTheme"> </style> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- 状态栏和标题栏颜色--> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- 标题颜色--> <item name="android:textColorPrimary">@android:color/white</item> <!-- 侧滑箭头 --> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> <!-- 溢出菜单图标(三个点)颜色--> <item name="colorControlNormal">@android:color/white</item> <!--溢出菜单样式--> <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>--> <!-- 溢出菜单文字颜色--> <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item> </style> <!--溢出菜单样式(背景,大小等) --> <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item><!--弹窗是否叠加在三个点之上 --> <item name="android:dropDownWidth">wrap_content</item><!--弹窗宽度 --> <item name="android:paddingRight">5dp</item> <item name="android:popupBackground">@android:color/darker_gray</item><!--弹窗背景色 --> <item name="android:dropDownVerticalOffset">2dip</item> <item name="android:dropDownHorizontalOffset">0dip</item> </style> <!--溢出菜单文字样式(大小,颜色)--> <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large"> <item name="android:textColor">@color/overflowTextColor</item> <item name="android:textSize">15sp</item> </style> <!-- 左边的侧滑箭头指示 是否翻转,颜色--> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/white</item> </style> </resources>
2.侧滑DrawerLayout
界面:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context=".MainActivity"> <include android:id="@+id/toolbar" layout="@layout/toolbar" /> <android.support.v4.widget.DrawerLayout android:layout_below="@id/toolbar" android:id="@+id/drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!--主布局--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主界面内容"/> </LinearLayout> <!--左边侧滑菜单--> <LinearLayout android:layout_width="200dp" android:layout_height="match_parent" android:background="#009688" android:layout_gravity="start"> <!--左边侧滑菜单内容--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="左边,,,"/> </LinearLayout> <!--右边侧滑菜单--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#009688" android:layout_gravity="end"> <!--右边侧滑菜单内容--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="右边。。。"/> </LinearLayout> </android.support.v4.widget.DrawerLayout> </RelativeLayout>
activity中绑定;
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View d
b3c6
rawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
theme:见上面详细
<!-- 侧滑箭头 -->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<!-- 左边的侧滑箭头指示 是否翻转,颜色--> <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> <item name="spinBars">true</item> <item name="color">@android:color/white</item> </style>
相关文章推荐
- Android App中DrawerLayout抽屉效果的菜单编写实例
- Android DrawerLayout带有侧滑功能的布局类(2)
- Android组件之DrawerLayout实现抽屉菜单
- Android DrawerLayout带有侧滑功能的布局类(1)
- Android使用DrawerLayout实现仿QQ双向侧滑菜单
- iOS应用中使用Toolbar工具栏方式切换视图的方法详解
- Android 5.0新特性ToolBar
- 开源中国 OsChina Android 客户端源码分析(2)滑动菜单DrawerLayout
- Android App中DrawerLayout抽屉效果的菜单编写实例
- Drawer实现左右侧滑DrawerLayout
- 创建提示风格的工具条jQuery插件_Toolbar.Js
- Android开发之学习官方文档Navigation Drawer记录
- Material Design遇到的坑
- myeclipse toolbar添加按钮
- CoordinatorLayout与滚动的处理
- MFC Toolbar图标尺寸调整出错解决方法
- android toolbar
- 怎样在键盘上添加工具栏
- DrawerLayout背景设置的问题,去除阴影
- Ext动态修改girdPanel上的ToolBar的Text