Android 5.0新特性MaterialDesign

最新推荐文章于 2023-12-23 21:12:50 发布

Richard152

最新推荐文章于 2023-12-23 21:12:50 发布

阅读量465

点赞数

分类专栏： Android ----------高级UI

本文链接：https://blog.csdn.net/a1527238987/article/details/80255201

版权

本文详细介绍了Android 5.0引入的MaterialDesign，包括ToolBar的使用，滑动菜单实现，悬浮按钮与交互提示，CoordinatorLayout的应用，卡片式布局，AppBarLayout，下拉刷新功能，可折叠式标题栏的实现以及如何充分利用系统状态栏空间。通过实例展示了如何创建和配置各种组件，实现MaterialDesign的交互效果。

摘要由CSDN通过智能技术生成

下面几个是需要用到的依赖库

compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support:design:26.+'
    compile 'de.hdodenhof:circleimageview:2.1.0'//圆形头像依赖库
    compile 'com.android.support:recyclerview-v7:26.+'
    compile 'com.android.support:cardview-v7:26.+'
    compile 'com.github.bumptech.glide:glide:3.7.0'//图片加载依赖库

一.ToolBar

* android.support.v7.widget.Toolbar, Toolbar继承Actionbar
* Toolbar和ActionBar类似，不过Actionbar由于设计的原因只能位于活动的顶部，而不能实现一些materialdesign效果
而且灵活性很好，可以配合其他控件完成一些materialdesign效果

* 1.因为默认主题都继承Theme.AppCompat.Light.DarkActionBar，如果我们需要使用Toolbar替换Actionbar，主题须使用无Actionbar的Theme.AppCompat.Light.NoActionBar

在xml中使用toolbar，代码如下：

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"//由于5.0之前没有此属性，所以使用app进行兼容
            >

在java代码中使用toolbar，代码如下：

       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//替换Actionbar
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);//启用返回键
            actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_add);//设置返回键图标
        }

 <activity
            android:name=".MainActivity"
            android:label="Fruits">//用于显示在ActionBar上的文字，如果没有指定，默认使用Application的
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

？？？？只有一个标题的Toolbar看起来很单调，我们可以再添加一些action按钮来丰富一下，我们可以准备几张图标放在drawable-xxhdpi目录下，然后在res目录新建menu目录，目录下新建一个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">
    <!--toolbar action按钮只会显示图标，菜单中的action按钮只会显示文字-->
    <item
        android:id="@+id/backup"
        android:icon="@drawable/tab_audior_player01"
        android:title="Backup"
        app:showAsAction="always">//总是显示toolbar中
    </item>
    <item android:id="@+id/delete"
        android:icon="@drawable/tab_btn_classification_hov"
        android:title="Delete"
        app:showAsAction="ifRoom"></item>//如果有空间显示在toolbar中
    <item android:id="@+id/settings"
        android:icon="@drawable/tab_btn_mine_hov"
        android:title="Settings"
        app:showAsAction="never"></item>//永远显示在菜单中

</menu>

然后我们再Activity中重写两个方法，onCreateOptionMenu用于加载菜单资源,onOptionItemSelected对于菜单点击事件的处理，代码如下：

   @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                showTips("backup");
                break;
            case R.id.settings:
                showTips("settings");
                break;
            case R.id.delete:
                showTips("delete");
                break;
            case android.R.id.home:
                if(drawerLayout != null){
                    drawerLayout.openDrawer(GravityCompat.START);
                }
                break;

        }
        return true;
    }

二、滑动菜单

所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放在主屏幕上，然后通过滑动的方式将菜单显示出来，这种方式可以节省空间，同时也实现很好的滑动效果，是materialDesign中推荐的做法。

首先它是一个布局，在布局中允许放入两个直接子控件，第一个显示屏幕中显示内容，第二个显示滑动菜单显示的内容，activity_main.xml中的代码如下：

<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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawer_layout"
        >
    <FrameLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
    <android.support.design.widget.NavigationView
        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_navigation_drawer"
        app:menu="@menu/activity_navigation_drawer_drawer" />
</android.support.v4.widget.DrawerLayout>

nav_header_navigation_drawer.xml文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <!--<ImageView-->
        <!--android:id="@+id/imageView"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:paddingTop="@dimen/nav_header_vertical_spacing"-->
        <!--app:srcCompat="@android:drawable/sym_def_app_icon" />-->
 <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon" />

    <