DrawerLayout和Fragment做出侧滑效果

最新推荐文章于 2024-06-10 11:51:36 发布

原创最新推荐文章于 2024-06-10 11:51:36 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#fragment

Android疑难解答专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Android的DrawerLayout和Fragment创建一个具有侧滑导航效果的应用。通过NavigationView配合DrawerLayout，可以方便地实现Material Design风格的导航菜单。在布局中，通过app:headerLayout和app:menu属性定制菜单头和菜单项。同时，文章还展示了如何在代码中动态设置菜单项的选中状态，并给出了FragmentActivity和Fragment的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，先上图片效果（亲测有效）
这个是图片效果

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

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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#303030"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/nav_menu" />

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

NavigationView

在Material Design中，Navigation
drawer导航抽屉，被设计用于应用导航，提供了一种通用的导航方式，体现了设计的一致性。
而NavigationView的典型用途就是配合之前v4包的DrawerLayout，作为其中的Drawer部分，即导航菜单的本体部分。NavigationView是一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。它提供了不错的默认样式、选中项高亮、分组单选、分组子标题、以及可选的Header。

注意其中NavigationView的两个自定义属性
app:headerLayout接收一个layout，作为导航菜单顶部的Header，可选项。
app:menu接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。但也可以在运行时动态改变menu属性。

用于NavigationView的典型menu文件，应该是一个可选中菜单项的集合。其中checked=”true”的item将会高亮显示，这可以确保用户知道当前选中的菜单项是哪个。item的选中状态可以在代码中设置，代码如下>

nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/g1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_queue"
            android:checkable="true"
            android:icon="@mipmap/queue"
            android:title="排队" />
        <item
            android:id="@+id/nav_count"
            android:checkable="true"
            android:icon="@mipmap/count"
            android:title="统计" />
        <item
            android:id="@+id/nav_tv"
            android:checkable="true"
            android:icon="@mipmap/tv"
            android:title="TV设置" />
        <item
            android:id="@+id/nav_more"
            android:checkable="true"
            android:icon="@mipmap/more"
            android:title="更多" />
    </group>
</menu>

布局说完，下面来说FragmentActivity,具体解释可以百度
代码如下

public class HomeActivity extends FragmentActivity implements NavigationView
        .OnNavigationItemSelectedListener {


    //    @InjectView(R.id.nav_view)
    public static NavigationView navView;
    //    @InjectView(R.id.drawer_layout)
    public static DrawerLayout drawerLayout;

    private QueueFragment queueFragment;
    private MoreFragment moreFragment;
    private CountFragment countFragment;
    private TVFragment tvFragment;
    private FragmentManager fm;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_home );

        navView = (NavigationView) findViewById( R.id.nav_view );
        drawerLayout = (DrawerLayout) findViewById( R.id.drawer_layout );
//        ButterKnife.inject( this );
           init();
    }

     /***
     * 初始化
，默认选中排队选项
     */
    public void init() {
        fm = getSupportFragmentManager();
        queueFragment = new QueueFragment();
        FragmentTransaction ft = fm.beginTransaction();
        ft.add( R.id.content, queueFragment, "queue" ).commit();

        navView.setNavigationItemSelectedListener( this );

    }

    /**
     * 打开侧滑栏

     *这个方法是在其他类里面调用，点击某个按钮可以调出侧滑栏

     */
    public static void showDrawerLayout() {
        if (!HomeActivity.drawerLayout.isDrawerOpen( HomeActivity.navView )) {
            HomeActivity.drawerLayout.openDrawer( HomeActivity.navView );
        }
    }


    /**
     * 侧滑栏点击
     *
     * @param item
     * @return
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        FragmentTransaction ft = fm.beginTransaction();
        hideFragment( ft );
        switch (item.getItemId()) {
            case R.id.nav_queue://排队单击事件
                if (queueFragment == null) {
                    queueFragment = new QueueFragment();
                    ft.add( R.id.content, queueFragment, "queue" );
                } else {
                    ft.show( queueFragment );
                }
                break;
            case R.id.nav_count://统计单击事件
                if (countFragment == null) {
                    countFragment = new CountFragment();
                    ft.add( R.id.content, countFragment, "count" );
                } else {
                    ft.show( countFragment );
                }
                break;
            case R.id.nav_tv://TV设置单机时间
                if (tvFragment == null) {
                    tvFragment = new TVFragment();
                    ft.add( R.id.content, tvFragment, "tv" );
                } else {
                    ft.show( tvFragment );
                }
                break;
            case R.id.nav_more://更多点击事件
                if (moreFragment == null) {
                    moreFragment = new MoreFragment();
                    ft.add( R.id.content, moreFragment, "more" );
                } else {
                    ft.show( moreFragment );
                }
                break;
        }
        ft.commit();
        drawerLayout.closeDrawers();

        return true;
    }


    /***
     * 隐藏fragment
     * @param ft
     */
    public void hideFragment(FragmentTransaction ft) {
        if (queueFragment != null) {
            ft.hide( queueFragment );
        }
        if (moreFragment != null) {
            ft.hide( moreFragment );
        }
        if (countFragment != null) {
            ft.hide( countFragment );

        }
        if (tvFragment != null) {
            ft.hide( tvFragment );
        }
    }
}

这是其中一个子Fragment的例子，其余的都一样

package com.mxt.net.protect.UI.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.mxt.net.protect.R;

/**
 * Created by Spencer on 2017/3/11.
 */

public class TVFragment extends Fragment {
    private View view;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.tv_fragment, container, false);
        return view;
    }
}

如此，便没有了。