meterialDesign注意的一些问题

1.toolBar使用。
是v7包下的toolbar,不是直接的toolbar

<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>

这里的高度使用的是actionBar的默认高度
layout_collapseMode="pin"这个是折叠模式,其中“pin”代表折叠过程中,位置始终固定不变。“parallax”汉意“视差”,这里表示在折叠的过程中,产生一定的错位偏移。
需要修改Apptheme主题为

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

不然会报错:

报错一.jpg

在Activity里面找到实例,并设置支持actionbar

  setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.device_update);
        }

actionBar左边自带一个返回的图标,它的id是:android.R.id.home,名字是“HomeAsUp”。
actionBar.setDisplayHomeAsUpEnabled(true);表示返回的图标可见
actionBar.setHomeAsUpIndicator(R.drawable.device_update);表示把返回的图标换成我们需要的图标。
如果想对它进行监听事件需要在onOptionsItemSelectedc实现逻辑:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

2.滑动菜单DrawerLayout
DrawerLayout是一个布局,和以前的侧滑菜单很像。他要求在布局中放入两个直接子控件,一个是主屏幕中显示的内容,一个是滑动菜单显示的内容。
由于滑动菜单需要指定从什么方向滑出来,所以第二个子控件需要指定layout_gravity属性。
其中属性值 start 代表根据系统语言进行判断从左到 右还是从右到左,left表示从左到右。right代表从右到左。
如果想在逻辑中打开or关闭滑动菜单可以调用:

drawerLayout.openDrawer(GravityCompat.START);
 drawerLayout.closeDrawers();

3.NavigationView
NavigationView是用来简化美化我们的滑动菜单的。它是design support 库的,需要添加依赖:

compile 'com.android.support:design:25.1.0'

NavigationView的布局,作为DrawerLayout的直接子控件,前一个直接子控件是主屏幕布局:

    <android.support.design.widget.NavigationView
        android:layout_gravity="start"//滑出的方向
        app:menu="@menu/nav_my_menu"
        app:headerLayout="@layout/head_layout"
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.design.widget.NavigationView>

使用navigationView要准备好两个东西,一个是menu,一个是headLayout。注意的是headLayout要指定高度,我这里是180dp.
做出效果如下:

p3.jpg

提一下,图片的花叫“鲁冰花”,一首歌的名字,杨沛宜唱的挺好听的,给人感觉很纯净。
还可以给NavigationView注册监听事件:

 navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
               switch (item.getItemId()){
                   case R.id.nav_call:
                       Toast.makeText(MainActivity.this,"you click call",Toast.LENGTH_SHORT).show();
                       break;
                    }
         return true;
        });

4.悬浮按钮FloatingActionButton
floatingActionButton会使用colorAccent来作为按钮的颜色。在values-colors.xml可以找到。
布局使用:

 <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/floating"
            app:elevation="8dp"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|end"
            />

其中:src是给设置一张图片。
elevation(高度)是给floatingActionButton指定一个高度值,高度值越大,投影越大,效果越淡。反之亦然。
ayout_anchor是给floatingActionButton指定一个锚点,也即定一个位置,
app:layout_anchorGravity="bottom|end"是指在指定区域内的具体位置。
当然也不一定要设置锚点,直接使用layout_gravity也行。
他的监听事件和button没啥区别。

5.协调布局CoordinatorLayout
CoordinatorLayout,是一个加强版的FrameLayout.他可以监听其所有子控件的各种事件,帮我们做出最为合理的响应。

6.卡片式布局CardView
cardView也是一个FrameLayout.只是额外提供了圆角和阴影。需要使用依赖:

compile 'com.android.support:cardview-v7:25.1.0'

使用方式:

            <android.support.v7.widget.CardView
                android:id="@+id/card_view_fruit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp"
                app:cardElevation="4dp">
                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.CardView>

如此这般,textView就具有了圆角和阴影效果了。
app:cardCornerRadius="4dp"设置圆角
app:cardElevation="4dp",设置高度,其实高度和阴影是相伴相随的

7.AppBarLayout
这个是为了解决RecyclerView向上滑动时,遮挡住Toolbar,当然前期是他们都在了一个CoordinatorLayout里面。因为CoordinatorLayout是一个FrameLayout.而AppBarLayout是一个垂直方向的LinearLayout,在它内部做了很多滚动事件的封装。
如何体现这些滚动事件的封装?
是通过app:layout_scrollFlags属性实现的。这个属性是加在他内部的Toolbar里面的。
其中scroll表示当RecyclerView向上滚动的时候,toolbar会跟着一起向上滚动,并实现隐藏,enterAlways表示当RecyclerView向下滚动的时候,Toolbar会跟着一起向下滚动,并重新显示。snap表示toolbar还没完全隐藏的时候,根据滚动的距离,自动选择隐藏还是显示。exitUntilCollapsed表示完成折叠之后,保留在界面上,不再移出屏幕。

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="exitUntilCollapsed|scroll"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true">
                <ImageView
                    android:fitsSystemWindows="true"
                    android:src="@drawable/all_fruit"
                    android:id="@+id/fruit_image_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"/>
                //layout_collapseMod指定折叠过程中的折叠模式,其中pin表示折叠过程中位置不变
                //parallax表示折叠过程中,会出现一定的错位偏移

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

其中CollapsingToolbarLayout,是可折叠式标题栏,接下来会讲。
android:fitsSystemWindows="true"是为了设置状态栏的颜色和当前图片颜色一致。后面会讲。

8.可折叠式标题栏CollapsingToolbarLayout
CollapsingToolbarLayout是不能单独存在的,在设计的时候,就被限定为AppbarLayout的直接子布局。而且是作用于toolBar基础之上的布局,如上代码即是。
app:contentScrim="?attr/colorPrimary"用来指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色。
在此要把 app:layout_scrollFlags="scroll|enterAlways|snap"这个属性移到CollapsingToolbarLayout里面。
另外需要注意layout_collapseMode的折叠模式。

9.背景和状态栏融合模式
背景和系统状态栏融合需要借助:android:fitsSystemWindows这个属性来实现。
将控件的android:fitsSystemWindows属性设置为true,就表示该控件会出现在系统状态栏里。但要将该控件的父级控件的android:fitsSystemWindows属性都设置为true.
但即使已经这样设置了还是没有效果的,需要把状态栏设置为透明
设置方法是:android:statusBarColor颜色指定为@android:color/transparent
可是android:statusBarColor这个属性要在Api21以上才有。所以要新建values-v21目录,并新建styles.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

由于Api21之前的系统无法识别MyActivityTheme,所以需要在values/styles.xml文件进行修改。

<resources>

    <!-- 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>
<style name="FruitActivityTheme" parent="AppTheme"></style>
</resources>

添加了一个FruitActivityTheme主题,只是这个主题什么都没有指定。
最后单独给Activity指定该主题就好。

10.多谢郭霖的第二行代码,以上总结都是从他的书上来的。亲自实践,效果不错。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容