基于Android平台开发，仿头条新闻app主页抽屉实现（二）

相关视频教程在某站上面(🔍浩宇软件开发)

1. 涉及到的技术点

1. DrawerLayout的使用
2. NavigationView的使用

2. 代码实现过程

1. 主页activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        android:id="@+id/app_bar_main"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemIconTint="#666666"
        app:itemTextColor="#666666"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

2. app_bar_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/purple_200"
        android:gravity="center_vertical">


        <ImageView
            android:id="@+id/btn_open_drawerLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/baseline_menu_24" />


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="40dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@id/btn_search"
                android:background="@color/white"
                android:gravity="center_vertical"
                android:hint="热点搜索"
                android:paddingLeft="10dp" />


            <TextView
                android:id="@+id/btn_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:padding="10dp"
                android:text="搜索"
                android:textColor="@color/white" />

        </RelativeLayout>


    </LinearLayout>


    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/purple_200"
            app:tabTextColor="#222222" />


        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </androidx.appcompat.widget.LinearLayoutCompat>


</androidx.appcompat.widget.LinearLayoutCompat>

3. nav_header_main.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:id="@+id/nav_header"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@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:contentDescription="@string/nav_header_desc"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@mipmap/icon_default_portrait" />

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="浩宇软件开发"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/tv_nickname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这个家伙很懒，什么都没有留下～～" />
</LinearLayout>

4. activity_main_drawer.xml布局

注意事项：activity_main_drawer.xml是在menu文件夹下，创建位置如下图所示：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_history"
            android:icon="@drawable/baseline_library_books_24"
            android:title="历史记录" />
        <item
            android:id="@+id/nav_update_pwd"
            android:icon="@drawable/baseline_https_24"
            android:title="修改密码" />
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/baseline_info_24"
            android:title="关于APP" />

        <item
            android:id="@+id/nav_exit"
            android:icon="@drawable/baseline_exit_to_app_24"
            android:title="退出登录" />
    </group>
</menu>

3. 运行效果图