收藏系列--Sorry的Android收藏Android UI相关

meterialDesign注意的一些问题

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

上一篇 下一篇

猜你喜欢

热点阅读