欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学习使用NavigationView,实现QQ侧滑菜单

程序员文章站 2022-05-15 17:00:25
...

学习API

首先通过了解API,我们了解到NavigationView代表一个标准导航菜单的应用程序。如下:

  1. NavigationView通常放置在DrawerLayout中,DrawerLayout内部允许放两个控件,这里我们一部分引入自己的布局,一块使用NavigationView。
<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/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true">

     <!-- Your contents -->

     <android.support.design.widget.NavigationView
         android:id="@+id/navigation"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </android.support.v4.widget.DrawerLayout>
  • android:fitsSystemWindows的值用于设置状态栏透明化与否。
  • android:layout_gravity可设置抽屉,也就是NavigationView从左边或是右边打开。
  • app:menu用于设置菜单内容的xml布局。
  • app:headerLayout用于设置NavigationView的HeaderView的xml布局文件。

2.通过api中介绍,我们了解到.NavigationView菜单可以填充菜单资源文件。
学习使用NavigationView,实现QQ侧滑菜单


添加库

  1. 在Gradle文件中的dependency中添加:
    compile ‘com.android.support:design:25.3.1‘依赖库。

准备资源文件

  • 创建NavigationView滑动菜单中的menu和heaberLayout
    1. app:menu=”@menu/my_navigation_items”
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail" />
    </group>

    <item android:title="@string/drawer_communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="@string/drawer_share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="@string/drawer_send" />
        </menu>
    </item>

</menu>
  • 2. headerLayout .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">

    <!--圆形图片-->
    <!--<de.hdodenhof.circleimageview.CircleImageView-->
        <!--android:id="@+id/icon_image"-->
        <!--android:layout_marginTop="16dp"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:src="@drawable/nav_icon"/>-->
    <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" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aaa@qq.com" />

</LinearLayout>

3 MainActivity .java

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener {

    NavigationView navigationView;//滑动菜单

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        //滑动菜单的导航
        navigationView = (NavigationView)findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {// 滑动菜单点击事件.
        int id = item.getItemId();

        if (id == R.id.nav_call) {
            Snackbar.make(coordinator, "你点击了call", Snackbar.LENGTH_LONG).setAction("删除菜单", null).show();
        } else if (id == R.id.nav_friends) {

        } else if (id == R.id.nav_location) {

        } else if (id == R.id.nav_mail) {

        } else if (id == R.id.nav_task) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}