美文网首页Android Developer
Android UI——Material Design ——Na

Android UI——Material Design ——Na

作者: So_ProbuING | 来源:发表于2019-02-22 10:32 被阅读7次

    NavigationView介绍

    我们在完成侧滑的需求的时候,可以使用sliding menu 民间的做法。也可以使用Android Support v4 包中的DrawerLayout来完成。但是Google提供了一个对DrawerLayout的封装组件NavigationView。在Meterial Design中提出了对侧滑的规范。用来规范侧滑的基本样式

    基本使用

    使用NavigationView一般和抽屉布局 DrawerLayout结合使用
    NavigationView在android.support.design.widget包下。所以需要我们的项目依赖design包

     implementation 'com.android.support:design:28.0.0'
    

    在NavigationView中有一些自定义的属性

    • app:menu 指定菜单项 侧滑菜单项
    • app:headrLayout:类似头像头部的布局,比如在一些app中 侧滑出来后头部会有一个头像的布局。上面有一些头像啊 昵称啊 积分啊 之类的

    直接撸码

    编写menu

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/action_gallery"
            android:icon="@android:drawable/ic_menu_gallery"
            android:orderInCategory="100"
            android:title="相册" />
        <item
            android:id="@+id/action_detail"
            android:icon="@android:drawable/ic_menu_info_details"
            android:orderInCategory="100"
            android:title="详情" />
        <item
            android:id="@+id/action_help"
            android:icon="@android:drawable/ic_menu_help"
            android:orderInCategory="100"
            android:title="关于" />
    </menu>
    

    编写布局文件

    <?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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <!--内容部分-->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <!--菜单部分-->
        <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/holo_orange_dark"
            app:headerLayout="@layout/navigation_head"
            app:menu="@menu/navigation_menu"
            />
    </android.support.v4.widget.DrawerLayout>
    

    运行效果

    运行效果

    二级菜单效果

    在使用menu时,可以指定android:orderInCategory 来指定菜单的分类。

     <!--二级菜单-->
        <item
            android:id="@+id/action_musicmenu"
            android:icon="@android:drawable/ic_popup_disk_full"
            android:orderInCategory="100"
            android:title="音乐">
            <menu>
                <item
                    android:id="actionsub_music_paly"
                    android:icon="@android:drawable/ic_media_play"
                    android:title="播放" />
                <item
                    android:id="actionsub_music_pause"
                    android:icon="@android:drawable/ic_media_pause"
                    android:title="暂停" />
            </menu>
        </item>
    
    二级菜单效果

    响应点击事件

    对于menu中的item 点击事件 可以指定onClick 可以实现 onNavigationItemSelectListerner

    
     @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            navigationView = ((NavigationView) findViewById(R.id.main_navigation_view));
            navigationView.setNavigationItemSelectedListener(this);
        }
    
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            int itemId = menuItem.getItemId();
            switch (itemId) {
                case R.id.action_help:
                    Toast.makeText(this, "点击了help", Toast.LENGTH_SHORT).show();
                    break;
                default:
                    break;
            }
            return false;
        }
    

    可见在开发侧滑功能时,使用navigationView比较高效,但是对于定制化要求比较高的需求,NavigationView并不如DrawerLayout好用。DrawerLayout的灵活性更高,布局设置更加简单,实现功能比较多


    SnackBar

    在开发中,我们常用dialog或者是Toast来进行当前用户操作的提示。但是Toast并没有与用户交互的功能。
    所以再Material中,Google提供了一种介于Dialog和Toast的产物。
    SnackBar既可以做到轻量级的用户提醒效果,也可以和用户交互。用户可以点击

    使用方式

    创建SnackBar

    创建SnackBar 我们需要使用SnackBar的静态方法

    public static Snackbar make(@NonNull @Nullable android.view.View view,
                                @NonNull CharSequence text,
                                int duration)
    
    • 其中 view 是指SnackBar显示的锚点
    • 在SnackBar和Toast不一样的地方是SnackBar提供了很多的持续时间的选择
    Snackbar.LENGTH_INDEFINITE  持续时间无限长(直到用户操作)
    Snackbar.LENGTH_LONG 持续长的时间
    Snackbar.LENGTH_SHORT 持续短的时间
    

    给SnackBar设置按钮点击事件 setAction

     //设置按钮点击
                    snackbar.setAction("确定", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "snackbar按钮点击", Toast.LENGTH_SHORT).show();
                        }
                    });
    

    注意:这里的setAction 不能设置多个,若设置多个Action会被覆盖

    CallBack设置

     //callback设置
                    snackbar.setCallback(new Snackbar.Callback(){
                        /**
                         * 显示回调
                         * @param sb
                         */
                        @Override
                        public void onShown(Snackbar sb) {
                            super.onShown(sb);
                        }
    
                        /**
                         * 消失回调
                         * @param transientBottomBar
                         * @param event
                         */
                        @Override
                        public void onDismissed(Snackbar transientBottomBar, int event) {
                            super.onDismissed(transientBottomBar, event);
                        }
                    });
    

    显示SnackBar

    snackbar.show();
    

    效果


    snackbar

    我们在什么使用比较倾向使用SnackBar呢?
    SnackBar是一个轻量的交互提示,它不像dialog那样繁重 也不像Toast那样简单。在项目中我们有些地方需要用户操作但又不是完全依赖于用户的操作的时候可以选择使用SnackBar 来使得我们的项目更加好用!

    相关文章

      网友评论

        本文标题:Android UI——Material Design ——Na

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