Android读书笔记（九）滑动菜单DrawerLayout、悬浮按钮、可交互提示

最新推荐文章于 2024-05-03 22:05:33 发布

来来走走

最新推荐文章于 2024-05-03 22:05:33 发布

阅读量881

点赞数

分类专栏： Android 文章标签： android 读书笔记控件布局

本文链接：https://blog.csdn.net/u011609853/article/details/78526154

版权

Android 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

1.滑动菜单DrawerLayout

DrawerLayout中允许放入两个直接子控件，第一个是屏幕直接显示的内容，第二个是滑动菜单中显示的内容。第二个直接子控件中的layout_gravity属性必须指定。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextColor="@android:color/primary_text_dark"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       </android.support.v7.widget.Toolbar>
    </LinearLayout>

    <!--layout_gravity
            start: 如果系统语言是从左往右的，如“Java”，滑动菜单就在左边
                    如果系统语言从右往左，如“avaJ”，滑动菜单在右边-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#FFF"
        android:text="我是菜单"
        android:textSize="30sp" />

</android.support.v4.widget.DrawerLayout>

下面对滑动菜单的内容做下一填充，实现效果如下：

这里写图片描述

实现上述效果使用到了NavigationView、CircleImageView，需要添加相应的库。在app/bulid.gradle文件的dependencies中添加信息：

dependencies {
    .....
    compile 'com.android.support:design:24.2.1'
    compile 'de.hdodenhof:circleimageview:2.2.0'
}

NavigationView是用来显示菜单内容的，分为两个部分，这两个部分在效果图上很明显，蓝色部分为headerLayout，其他部分为menu。一个是布局文件，一个是menu。

布局文件nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">

    <!--图片圆形化控件-->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/photo_civ"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/xihongshi" />

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="wrap_content"
        android:layout_above="@id/photo_civ"
        android:text="西红柿"
        android:textSize="18sp"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:textColor="@android:color/white"
        android:layout_height="wrap_content" />
</RelativeLayout>

menu，m_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--single 单选-->
    <group android:checkableBehavior="single">

        <item
            android:id="@+id/nav_info"
            android:icon="@drawable/info"
            android:title="信息" />
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/setting"
            android:title="设置" />
        <item
            android:id="@+id/nav_other"
            android:icon="@drawable/other"
            android:title="其他" />
        <item
            android:id="@+id/nav_exit"
            android:icon="@drawable/exit"
            android:title="退出" />
    </group>
</menu>

设置NavigationView，引用nav_header.xml、m_menu.xml资源文件。

<?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"
    android:id="@+id/dl"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <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.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="@android:color/primary_text_dark">
        </android.support.v7.widget.Toolbar>
    </LinearLayout>

    <!--layout_gravity
            start: 如果系统语言是从左往右的，如“Java”，滑动菜单就在左边
                    如果系统语言从右往左，如“avaJ”，滑动菜单在右边-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/m_menu" />
</android.support.v4.widget.DrawerLayout>

上面的代码其实是一开始贴出来的代码，只是将TextView修改成了NavigationView。

2.悬浮按钮与可交互提示

使用悬浮按钮需要添加相应的库。使用非常简单，在布局设置一下就可以了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--elevation 是来控制投影的大小的，以此来表示悬浮的高度-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:elevation="8dp"
        android:layout_margin="16dp"
        android:src="@drawable/setting"/>
</RelativeLayout>

点击事件，与普通的button没什么两样。

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //do something .....
            }
        });

接下来介绍一下snackbar的用法，也是非常的简单。

                //make(),参数一：View，Snackbar会根据这个View自动查找最外层的布局
                //参数二:提示内容
                //参数三:显示时长
                Snackbar.make(v, "snackbar", Snackbar.LENGTH_SHORT)
                        .setAction("sure", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                                Toast.makeText(ABCActivity.this, "hao",
                                                     Toast.LENGTH_SHORT)
                                        .show();
                            }
                        }).show();

效果如图：

仔细观察，你会发现悬浮按钮被挡住了，解决这个问题要使用CoordinatorLayout，在悬浮按钮上嵌套一层CoordinatorLayout。

 <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
           ............ />
    </android.support.design.widget.CoordinatorLayout>