MaterialDesign（完整）带你体验艺术般交互体验

其他 2018-08-11 05:16:28 阅读次数: 0

先看看Demo的演示效果：

one.gif

1.Toolbar

  1. Toolbar是代替Actionbar的使用，因为在继承了Actionbar的所有功能以外，灵活性更高，并且可以配合其他的一些控件实现MaterailDesign的效果 ，因此官方推荐使用Toolbar。
  2. 要使用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。
  3. 如何使用：
    先配置主题为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才刚刚开始。
先看看效果：
toolbar.png
具体实现 ：
先在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

滑动菜单，通过滑动将菜单栏滑动出来。
先看看效果：
DrawLayout.png
下来介绍如何实现上面的效果：

<?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

one.gif

猜你喜欢

转载自blog.csdn.net/qq_15988951/article/details/78874456
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022