第一行代码读书笔记-第十二章 Material Design实战

 Material  Design实战

这一章的主要知识点:

1. ToolBar
2. 滑动菜单
   1. DrawerLayout
   2. NavigationView
3. 悬浮按钮
   1. FloatingActionButton
   2. SnackBar
   3. CoordinatorLayout
4. 卡片式布局
   1. CordView
   2. AppBarLayout
5. 下拉刷新
6. 可折叠是标题栏

1:前言

Material  Design 是有谷歌设计工程师基于优秀的设计原则,结合丰富到创新和科学技术所发明一套全新的界面设计语言,包含了视觉,运动,互动效果等特性

materDesign是谷歌在14年提出的,在15年正式推出Design Support库,这个库将Material Design中最具有代表性的一些组件进行封装,使开发者能够轻易的将自己的应用Material化.

2:Toobar

2.1:为什么要用:

我们就拿Toobar正式我们MaterDesigin 之旅,我们平常开发App我们一般默认的是ActionBar,但由于设计的原因,ActionBar只能位于活动的顶部,不能实现实现Material 效果,谷歌官方不在推荐我们使用ActionBar了,而Toobar不仅继承ActionBar的所有属性,而且灵活性很高,应次做Android的我们是时候走一波TooBar了.

2.2:怎么用:

最初的头部(系统默认的)

一: 首先我们需修改系统默认的主题,指定不带ActionBar的主题,我们这样做

修改Value里面Styles.xml文件

   <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>

修改后的

 <!-- Base application theme. -->    <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>    </style>

这里面有Theme.AppCompat.NoActionBar和Them.AppCompat.Light.NoActionBar这两个主题颜色可以选择.

这个Theme.AppCompat.NoActionBar会把主题颜色设置为深色,陪衬颜色设为淡色如图所示.

而Them.AppCompat.Light.NoActionBar效果如图所示:

它会将主题颜色设为淡色,陪衬颜色设置为深色

下面我们介绍一下三个属性代表的颜色

二:布局文件为:

<?xml version="1.0" encoding="utf-8"?><FrameLayout    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/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="ccut.com.materdesign.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?actionBarSize"        android:background="@color/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        /></FrameLayout>

上面代码中为什么要指定一个xmls:app的命名空间

因为为了兼容之前的老版本,这是Android5.0才新出的.这样写就能够兼容Android5.0之前的版本了.

三:修改活动的代码为:

  @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);    }

2.3:我们学一下ToolBar的常用功能

上面我们把ToolBar弄的和ActionBar差不多了,我们可以修改头部的那个字体

在AndroidManifest.xml中指定,

    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="Fruits"        android:supportsRtl="true"        android:theme="@style/AppTheme">

我们在上面设置Toolbar的显示内容,接下来我们让Toolbar更好玩一点

我们在res点击右键-->new -->Directory,创建Menu文件夹,然后点击menu文件夹--new--->menu resource file,命名为toolBar.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/backup"        android:icon="@drawable/ic_backup"        android:title="Backup"        app:showAsAction="always"        />    <item        android:id="@+id/delete"        android:icon="@drawable/ic_delete"        android:title="delete"        app:showAsAction="ifRoom"        />    <item        android:id="@+id/setting"        android:icon="@drawable/ic_settings"        android:title="settings"        app:showAsAction="never"        /></menu>

备注一下:

1. Always:永远显示在Toolbar中,屏幕不够,不显示
2. IfRoom:屏幕够就显示,不够就显示在Setting中
3. never:是永远显示在Setting中.

然后修改活动中的代码如下:

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar, menu);        return true;    }

到这里,我们简单了解的ActionBar的用法,要使用更高的功能,少年,自己找吧,谷歌里百度一下,就知道了

下一章,我们复习一下滑动菜单