meterialDesign注意的一些问题

作者: 若兮生生 | 来源:发表于2017-03-01 16:09 被阅读49次

    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.多谢郭霖的第二行代码,以上总结都是从他的书上来的。亲自实践,效果不错。

    相关文章

      网友评论

        本文标题:meterialDesign注意的一些问题

        本文链接:https://www.haomeiwen.com/subject/axzxgttx.html