Android 5.0新特性MaterialDesign

本文详细介绍了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" />

    <
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值