MaterialDesign(完整)带你体验艺术般交互体验
来源:互联网 发布:网络终结者4.22破解版 编辑:程序博客网 时间:2024/05/21 06:55
先看看Demo的演示效果:
1.Toolbar
- Toolbar是代替Actionbar的使用,因为在继承了Actionbar的所有功能以外,灵活性更高,并且可以配合其他的一些控件实现MaterailDesign的效果 ,因此官方推荐使用Toolbar。
- 要使用Toolbar,则必须要要配置当前Activity的主题为“*.NoActionBar”,否则会报一个”This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.”的异常,就是提醒,已经有actionbar,不能再使用toolBar。
- 如何使用:
先配置主题为noActionbar
<style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> </style>
Activity的中的代码
//如果不设置,则不会出现标题 Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar); //不设置会显示label的属性,也可以在清单文件中进行配置// tbAtToolbar.setTitle(" I am toolbar "); setSupportActionBar(tbAtToolbar);
布局文件中的代码:
<android.support.v7.widget.Toolbar android:id="@+id/tb_at_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
这里我们使用”android:theme”去指定和ActionBar的主题一样。app:popupTheme是为了兼容5.0一下的系统使用的主题,因为MaterailDesign是在5.0以后才出现的。到这一步,Toolbar的简单使用已经介绍完毕。
但是,如果只是这样实现的话,你可能会有疑问,和Actionbar有个毛线的不同,别急,高级定制Toolbar才刚刚开始。
先看看效果:
具体实现 :
先在res中创建menu文件夹,然后创建toolbarmenu.xml,并编写以下代码
<?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/add" android:icon="@drawable/ic_menu_camera" android:title="add" app:showAsAction="always"/> <item android:id="@+id/delete" android:icon="@drawable/ic_menu_slideshow" android:title="delete" app:showAsAction="never"/> <item android:id="@+id/tb_setting" android:title="@string/action_settings" android:icon="@drawable/ic_menu_manage" android:orderInCategory="100" app:showAsAction="ifRoom"/></menu>
先介绍一下 app:showAsAction这个属性:’ifRoom’表示如果空间充足则显示,如果不充足,则不显示,’always’一直显示,’never’则表示不出现,点击,则先会出现title的属性,即为3个小白点。
然后去重写Activity的onCreateOptionsMenu()方法去加载toolbarmenu.xml配置文件,重写onOptionsItemSelected()去实现菜单的点击事件
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.toobalr, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: dlAtDrawLayout.openDrawer(Gravity.START); break; case R.id.add: Toast.makeText(this, "add", Toast.LENGTH_SHORT).show(); break; case R.id.delete: Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show(); break; case R.id.tb_setting: Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show(); break; } return true; }
到这里,关于toolbar的使用就完全介绍完毕咯。
2.DrawerLayout
滑动菜单,通过滑动将菜单栏滑动出来。
先看看效果:
下来介绍如何实现上面的效果:
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout 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" android:id="@+id/dl_at_draw_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.it.onex.materialdesigndemo.ToolbarActivity"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <!-- 菜单选项布局 --> <ScrollView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer"/></android.support.v4.widget.DrawerLayout>
如果要定制菜单选项栏,只需要替换ScrollView的布局,但是一定要保留android:layout_gravity=”start”属性,并不一定要用”start”,也可以使用left和right属性,表示从那边进行滑动出来菜单。但是如果不添加任何的标记的话,用户一般不会发现这个菜单,所以最好是添加一个菜单指示器。
这里介绍2中方式:
第一种:完全自定义:没有效果和button的点击事件类似
ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: dlAtDrawLayout.openDrawer(Gravity.START); break; } return true; }
第二种:使用ActionBarDrawerToggle类进行添加
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); dlAtDrawLayout.addDrawerListener(toggle); toggle.syncState();
strings.xml
<resources> <string name="app_name">MaterialDesignDemo</string> <string name="navigation_drawer_open">Open navigation drawer</string> <string name="navigation_drawer_close">Close navigation drawer</string> <string name="action_settings">Settings</string></resources>
则会出现滑动菜单栏指示器,并且自动监听是否闭合的监听。
3. CoordinatorLayout
CoordinatorLayout可以理解为一个加强版的FrameLayout,如果使用常规的控件,使用和效果和FrameLayout没有多大的效果,但是如果使用一些Design Support中的另外一些控件使用,就体现出它的强大之处了。
CoordinatorLayout为什么强大,因为她可以监听所有它的子View的各种事件,并且会通过这些事件的监听,会动态的去调整布局,比如,我们在屏蔽右下角使用FloatingActionButton,并添加一个弹出Snackbar的提示,如果使用的FrameLayout,则Snackbar会挡住FloatingActionButton,但是如果使用CoordinatorLayout,则不会出现,它会动态的将布局整体上移。
FloatingActionButton fabButton = (FloatingActionButton) findViewById(R.id.fab_at_action); fabButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v, "snack action ", 1000) .setAction("Toast", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show(); } }).show(); } });
在看一个例子:
<android.support.design.widget.CoordinatorLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.it.onex.materialdesigndemo.ToolbarActivity"> <android.support.v7.widget.Toolbar android:id="@+id/tb_at_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.v7.widget.RecyclerView android:id="@+id/rv_at_list" android:layout_width="match_parent" android:layout_height="match_parent"/> <!-- 使用popupTheme是为了兼容5.0以下的系统--> </android.support.design.widget.CoordinatorLayout>
加入我们使用上面的这种布局,我们会发现RecycleView会将Toolbar挡住,类似于这种效果,
不难理解,因为CoordinatorLayout在前面提到过是类似于FrameLayout的使用,所以,RecycleView会挡住Toolbar的一部分,我们如何解决呢?如果不在添加任何的materialDesign的效果,我们可以添加Margin效果,实现想要的效果,但是Google肯定提供了解决方案,那就是使用AppBarLayout的布局,我们在下面继续。
4.AppBarLayout
针对上面出现的bug,我们提到了AppBarLayout的使用,这里先看看如何使用,我们在Toolbar的最外面进行嵌套了一层AppBarLayout,然后再看效果,是不是解决了上面出现的bug
<android.support.design.widget.CoordinatorLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.it.onex.materialdesigndemo.ToolbarActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/tb_at_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/rv_at_list" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <!-- 使用popupTheme是为了兼容5.0以下的系统--> </android.support.design.widget.CoordinatorLayout>
因为AppBarLayout通过查看源码是继承自LinearLayout,则我们可以将AppBarLayout看做事垂直方向的LinearLayout进行使用。因为是MaterialDesign设计效果,所以我们配合RecycleView进行使用,因为recycleView的滑动会被AppBarLayout监听到,所以我们通过给RecycleView设置一个内定的布局行为
app:layout_behavior="@string/appbar_scrolling_view_behavior"
给Toolbar设置
app:layout_scrollFlags="scroll|enterAlways"
“scroll”代表:RecycleView向上滚动时,toolbar也会向上滑动,直到隐藏,“enterAlways”属性代表:当RecycleView向下滚动时,Toolbar也会向下滑动,并且重新显示。“snap”属性代表:当Toolbar还没有完全隐藏或显示的时候,会根据当前滑动的距离,自动选择隐藏或者显示。
看看运行的效果:
5.CollapsingToolbarLayout
如果你见过类似的效果,那么绝大多数是使用的这个布局,即可折叠标题栏
先看看效果:
从命名规则上面看出,它是作用于Toolbar上面的折叠布局,但是,它的作用范围有限,即CollapsingToolbarLayout不能单独使用,即CollapsingToolbarLayout必须作为AppbarLayout的直接子布局进行使用,AppbarLayout又是CoordinatorLayout的子布局,所以看看我们的布局文件
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/appBar" android:layout_width="match_parent" android:layout_height="450dp" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true"> <ImageView android:id="@+id/iv_movie_icon" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/ic" app:layout_collapseMode="parallax" android:transitionName="basic" android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar android:id="@+id/tb_amd_toolbar" android:layout_width="match_parent" app:titleTextColor="#ff4081" app:subtitleTextColor="#ff4081" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp"/> </LinearLayout> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/add" app:layout_anchor="@id/appBar" app:layout_anchorGravity="bottom|end"/> </android.support.design.widget.CoordinatorLayout>
解释一下几个属性: app:layout_scrollFlags=”scroll|exitUntilCollapsed”
“scroll” 表示随着recycleView的滚动,CollapsingToolbarLayout也进行滚动,“exitUntilCollapsed”属性代表:随着滚动完成折叠以后保留在屏幕上,不再移出界面。 app:contentScrim=”?attr/colorPrimary”指定当CollapsingToolbarLayout折叠完成以后Toolbar的背景颜色。
NestedScrollView
NestedScrollView类似于一个ScrollView,将其app:layout_behavior=”@string/appbar_scrolling_view_behavior”和之前RecycleView的使用是一样的。
填充状态栏的空间
想要使用和设置状态栏,我们只需要这行代码就行
android:fitsSystemWindows="true"
当然设置了这行以后,还需要将你的Activity的主题的状态栏的背景设置为透明
即:
<style name="MovieDetailActivityTheme" parent="AppTheme.NoActionBar"> <item name="android:statusBarColor">@android:color/transparent</item> </style>
RecycleView和SwipeRefreshLayout、FloatingActionButton的使用这里不用介绍了,因为太多了。在这个Demo中也都有,所以不做介绍了,也相对的比较简单。
最后看看整体的效果
最后附上Github地址:https://github.com/OnexZgj/MaterialDesign
- MaterialDesign(完整)带你体验艺术般交互体验
- Git rebase -i 交互变基,体验艺术般的命令
- 带你体验Silverlight强大功能
- 带你走近AngularJS - 体验指令实例
- 带你走近AngularJS - 体验指令实例
- Maven3完整初体验
- 用户交互体验
- 交互体验趋势
- 2015交互体验趋势
- 交互体验杂记
- 打开耳朵听世界,小龙带你体验骨传导黑科技( By Aftershokz )
- 必会 | 手把手带你体验Android Studio 3.0的新功能(第一章)
- 必会 | 手把手带你体验Android Studio 3.0的新功能(第二章)
- 带你体验串行到并发的旅途--第一部分
- Windows 8灵魂所在 带你体验云存储乐趣
- win7完美特性 带你体验更多使用乐趣【*乡巴佬*】
- 京诺移动CRM带你体验科技办公
- 安装并使用—带你体验全新Windows 10
- SQL CREATE TABLE
- node-sass 安装卡在node scripts/install.js
- Dubbo入门---搭建一个最简单的Demo框架
- 【c/c++】function returns address of local variable
- 滴滴国际化步入快车道,引进中东资本,估值达500亿美元
- MaterialDesign(完整)带你体验艺术般交互体验
- Android------Button 添加声音效果(两种方式)
- 代码混淆ProGuard
- 安卓常见的内存泄漏实例以及解决办法
- UTF-8中的BOM-带还是不带?
- Eclipse开发Web项目
- 省选模拟(12.10) T3 stwell
- 论文 | 2017CIKM
- rabbitmq开启远程连接