高级UI之NavigationView侧滑

发表于 | 分类于 | |

NavigationView是遵循MD设计规范的侧滑模式，推荐使用

要使用NavigationView，就需要引入support-design依赖

1
implementation 'com.android.support:design:25.4.0'

这里的25.4.0指的是编译版本
然后就可以愉快的使用NavigationView了，在这篇文章中，不涉及代码，全是布局
只使用布局就能完成侧滑功能的实现
首先依旧是需要改变style，去掉其ActionBar

1
2
3
4
5
6
7
8
9
10
11
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

然后编写一个menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?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_edit"
        android:orderInCategory="100"
        android:title="编辑" />

    <item
        android:id="@+id/action_details"
        android:icon="@android:drawable/ic_menu_info_details"
        android:orderInCategory="100"
        android:title="详情" />

    <item
        android:id="@+id/action_movie"
        android:icon="@android:drawable/ic_menu_more"
        android:orderInCategory="100"
        android:title="媒体库">
        <menu>
            <item
                android:id="@+id/media_play"
                android:icon="@android:drawable/ic_media_play"
                android:title="播放" />

            <item
                android:id="@+id/media_pause"
                android:icon="@android:drawable/ic_media_pause"
                android:title="暂停" />
        </menu>
    </item>
    <item
        android:id="@+id/action_about"
        android:icon="@android:drawable/ic_menu_help"
        android:orderInCategory="100"
        android:title="关于" />
</menu>

编写一个header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上海滩"
        android:textSize="24sp" />

</LinearLayout>

之所以要编写menu和header，是用于NavigationView的menu和header设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:layout_gravity="start"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/navigation_menu" />

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

这样便完成了NavigationView的使用流程
下面是效果图

Donate comment here