DrawerLayout + NavigationView + BottomNavigationView 搭配使用

最新推荐文章于 2023-03-10 10:42:57 发布
最新推荐文章于 2023-03-10 10:42:57 发布
阅读量1.4k 收藏 6
点赞数 4
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weidiezeng/article/details/96693738
版权

不废话，直接上效果图：

 

activity_main.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"
    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">

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

        <include layout="@layout/toolbar"/>

        <include layout="@layout/container"/>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            style="@style/Widget.Design.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:background="@color/viewBackground"
            app:elevation="16dp"
            app:itemIconTint="@drawable/nav_item_color_state"
            app:itemTextColor="@drawable/nav_item_color_state"
            app:layout_behavior="com.example.administrator.funread.widget.BottomNavigationBehavior"
            app:menu="@menu/bottom_navigation_main"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/nav_menu"/>

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

toolbar.xml

导航栏

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/AppBarLayout01"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="false"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

container.xml

装载新闻详情页等

<FrameLayout
    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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/viewBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:layout="@layout/fragment_news_tab"/>

nav_header_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="168dp"
    android:background="@drawable/ic_launcher_background"
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <!--<com.example.administrator.widget.CircleImageView-->
    <!--android:layout_width="72dp"-->
    <!--android:layout_height="72dp"-->
    <!--android:scaleType="centerCrop"-->
    <!--app:srcCompat="@color/gray"/>-->

    <!--<TextView-->
    <!--android:layout_width="wrap_content"-->
    <!--android:layout_height="wrap_content"-->
    <!--android:layout_marginLeft="4dp"-->
    <!--android:paddingTop="8dp"-->
    <!--android:text="点击头像登录 (开发中)"-->
    <!--android:textStyle="bold"/>-->
</LinearLayout>

nav_menu.xml

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

   <group android:id="@+id/other">
       <item
           android:id="@+id/nav_switch_night_mode"
           android:icon="@drawable/ic_night_gray_24dp"
           android:title="@string/nav_switch_night_mode"/>
       <item
           android:id="@+id/nav_setting"
           android:icon="@drawable/ic_setting_gray_24dp"
           android:title="@string/nav_setting"/>
       <item
           android:id="@+id/nav_share"
           android:icon="@drawable/ic_share_grey_24dp"
           android:title="@string/nav_share"/>
   </group>
</menu>

Main_Activity.java:

package com.example.administrator.funread;

import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.FrameLayout;

import com.example.administrator.funread.Setting.SettingActivity;
import com.example.administrator.funread.module.csdn.CSDNTabLayout;
import com.example.administrator.funread.module.news.NewsTabLayout;
import com.example.administrator.funread.module.photo.PhotoTabLayout;
import com.example.administrator.funread.module.search.SearchActivity;
import com.example.administrator.funread.module.weather.WeatherTabLayout;
import com.example.administrator.funread.util.Setting;
import com.example.administrator.funread.widget.BottomNavigationViewHelper;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.container)
    FrameLayout mContainer;
    @BindView(R.id.bottom_navigation)
    BottomNavigationView mBottomNavigation;
    @BindView(R.id.nav_view)
    NavigationView mNavView;
    @BindView(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    private static final String TAG="MainActivity";
    private static final String POSITION="position";
    private static final String SELECT_ITEM="bottomnavigationSelectItem";
    private static final int FRAGMENT_NEWS=0;
    private static final int FRAGMENT_CSDN=1;
    private static final int FRAGMENT_WEATHER=3;
    private static final int FRAGMENT_PHOTO=2;
    private NewsTabLayout newsTabLayout;
    private CSDNTabLayout csdnTabLayout;
    private PhotoTabLayout photoTabLayout;
    private WeatherTabLayout weatherTabLayout;
    private long exitTime = 0;
    private long firstClickTime = 0;
    private int position;



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

    private void initView(){
        mToolbar.inflateMenu(R.menu.menu_activty_main);
        BottomNavigationViewHelper.disableShiftMode(mBottomNavigation);
        setSupportActionBar(mToolbar);

        mBottomNavigation.setOnNavigationItemSelectedListener(item ->{
            switch (item.getItemId()){
                case R.id.action_news:
                    showFragement(FRAGMENT_NEWS);
                    doubleClick(FRAGMENT_NEWS);//双击刷新
                    break;
                case R.id.action_csdn:
                    showFragement(FRAGMENT_CSDN);
                    doubleClick(FRAGMENT_CSDN);
                    break;
                case R.id.action_photo:
                    showFragement(FRAGMENT_PHOTO);
                    doubleClick(FRAGMENT_PHOTO);
                    break;
                case R.id.action_weather:
                    showFragement(FRAGMENT_WEATHER);;
                    doubleClick(FRAGMENT_WEATHER);
                    break;
            }
            return true;
        } );

        //这个类提供了一种方便的方法来将DrawerLayout的功能和框架ActionBar结合起来，从而实现导航抽屉的推荐设计
        ActionBarDrawerToggle toggle=new ActionBarDrawerToggle(
                this,mDrawerLayout,mToolbar,R.string.navigation_drawer_open,R.string.navigation_drawer_close);
        mDrawerLayout.addDrawerListener(toggle);
        toggle.syncState();//将折叠项指示器或者启示项的状态与链接的DrawerLayout同步
        mNavView.setNavigationItemSelectedListener(this);
    }

    /**
     * @param index
     */
    public void doubleClick(int index){

    }

    /**
     * @param index
     */
    private void showFragement(int index){

        FragmentTransaction ft=getSupportFragmentManager().beginTransaction();
        hideFragMent(ft);
        position=index;
        switch (index){
            case FRAGMENT_NEWS:
                mToolbar.setTitle(R.string.title_news);
                /**
                 * 如果Fragment为空，就新建一个实例
                 * 如果不为空，就将它从栈中显示出来
                 */
                if (newsTabLayout == null) {
                    newsTabLayout = NewsTabLayout.getInstance();
                    ft.add(R.id.container, newsTabLayout, NewsTabLayout.class.getName());
                } else {
                    ft.show(newsTabLayout);
                }
                break;
            case FRAGMENT_CSDN:
                mToolbar.setTitle(R.string.title_csdn);
                /**
                 * 如果Fragment为空，就新建一个实例
                 * 如果不为空，就将它从栈中显示出来
                 */
                if (csdnTabLayout == null) {
                    csdnTabLayout = CSDNTabLayout.getInstance();
                    ft.add(R.id.container, csdnTabLayout, CSDNTabLayout.class.getName());
                } else {
                    ft.show(csdnTabLayout);
                }
                break;
            case FRAGMENT_PHOTO:
                mToolbar.setTitle(R.string.title_photo);
                /**
                 * 如果Fragment为空，就新建一个实例
                 * 如果不为空，就将它从栈中显示出来
                 */
                if (photoTabLayout == null) {
                    photoTabLayout = photoTabLayout.getInstance();
                    ft.add(R.id.container, photoTabLayout, PhotoTabLayout.class.getName());
                } else {
                    ft.show(photoTabLayout);
                }
                break;
            case FRAGMENT_WEATHER:
                mToolbar.setTitle(R.string.title_weather);
                /**
                 * 如果Fragment为空，就新建一个实例
                 * 如果不为空，就将它从栈中显示出来
                 */
                if (weatherTabLayout == null) {
                    weatherTabLayout = weatherTabLayout.getInstance();
                    ft.add(R.id.container, weatherTabLayout,WeatherTabLayout.class.getName());
                } else {
                    ft.show(weatherTabLayout);
                }

        }
        ft.commit();
    }
    private void hideFragMent(FragmentTransaction ft){
        if(newsTabLayout!=null){
            ft.hide(newsTabLayout);
        }
        if(csdnTabLayout!=null){
            ft.hide(csdnTabLayout);
        }
        if(photoTabLayout!=null){
            ft.hide(photoTabLayout);
        }
        if(weatherTabLayout!=null){
            ft.hide(weatherTabLayout);
        }
    }

    /**
     * 出事菜单栏布局
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_activty_main,menu);
        return true;
    }

    /***
     * 菜单栏事件处理
     *  @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if(item.getItemId()==R.id.action_search){
            startActivity(new Intent(MainActivity.this,SearchActivity.class));
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id=item.getItemId();
        switch (id){
            case R.id.nav_switch_night_mode:
                int mode=getResources().getConfiguration().uiMode&Configuration.UI_MODE_NIGHT_MASK;
                if(mode==Configuration.UI_MODE_NIGHT_YES){
                    Setting.getInstance().setIsNightMode(false);
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                }else{
                    Setting.getInstance().setIsNightMode(true);
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                }
                getWindow().setWindowAnimations(R.style.WindowAnimationFadeInOut);
                recreate();
                return  false;
            case R.id.nav_setting:
                startActivity(new Intent(this,SettingActivity.class));
                mDrawerLayout.closeDrawers();
                return false;
            case R.id.nav_share:
                Intent shareIntent=new Intent()
                        .setAction(Intent.ACTION_SEND)
                        .setType("text/plain")
                        .putExtra(Intent.EXTRA_TEXT,getString(R.string.share_app_text)+getString(R.string.source_code_url));
                startActivity(Intent.createChooser(shareIntent, getString(R.string.share_to)));//活动选择器
                mDrawerLayout.closeDrawers();
                return false;

        }
        return false;
    }
}

由于代码是从项目截取部分出来，所以只给出了关键代码，千万不要照着复制，因为里面调用了很多其他地方的类（到时候可替换成自己的实现），自己把关键思想搞明白即可

weidiezeng
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
DrawerLayout+NavigationView的用法demo下载
03-24
https://blog.csdn.net/qq_25804863/article/details/48698737
DrawerLayout+NavigationView+Toolbar
12-16
最近做了一个纯Kotlin开发的Android开源软件，刚好用到了Material Design设计风格。功能完善好，代码简单贴一下，方便日后查看和使用。原文地址http://blog.csdn.net/donkor_/article/details/78819081
Android NavigationDrawer(侧滑导航栏 DrawerLayout + NavigationView)
Luzhuo 的博客
05-23 6353
Android NavigationDrawer(侧滑导航栏 DrawerLayout + NavigationView) Google官方出品的侧滑导航栏, 可替换长期未维护的SlidingMenu. 除此之外, 还有个第三方开源库MaterialDrawer可供选择 Navigation Drawer 是 Material Design 中的侧滑导航栏, 由抽屉布局 DrawerLayou...
Android实现底部导航栏加侧滑（BottomNavigationView+ViewPager+Fragment）
你努力或许没人知道，但，不努力都看得出来！
01-19 2921
废话不多说，先上图，不合适的就不用再往下面看了，这是平时找东西最想先看到的。                   具体实现 1、默认使用Android Studio开发，首先新建一个项目，选择Bottom Navigation Activity，这样底部导航功能就已经完成了。（我代码：compileSdkVersion 27） 2、添加ViewPager+Fragmen
Android底部导航栏之BottomNavigationView
u010855711的博客
03-10 2654
Android底部导航栏之BottomNavigationView
bottomnavview-xamarin-example：该示例显示Xamarin.Android中带有BottomNavigationView的MvvmCross中的导航
02-03
带有BottomNavigationView示例的MvvmCross 6 显示带有BottomNavigationView的MvvmCross 6中导航的示例 正在进行的工作-尝试确定使用底部导航视图在MvvmCross 6中的片段之间进行导航的正确方法是什么。 根据完成的工作。 带有App支架。 基于炫酷动画渐变背景。
Android Navigation + Fragment 制作APP主页面导航（步骤
m0_70082867的博客
05-09 2910
<fragment android:id=“@+id/afragment” android:name=“com.llw.navigation.fragment.AFragment” android:label=“afragment” tools:layout=“@layout/fragment_a” /> 上面的也很简单，id表示它在导航图的标识，name指明这个Fragment的路径，包名+类名。label就是标签而已。layout就是绑定这个Fragment对应的布局。 这里你肯定回想，刚.
[Android Studio] 底部导航栏的实现
热门推荐
zhou_ge1的博客
06-30 1万+
通过BottomNavigationView+fragment实现底部导航栏
安卓bottomnavigationview和drawlayout实现底部导航和侧滑布局
小马哥的博客
05-01 2269
文章目录1.遇到的问题2.实现3.隐藏系统底部导航栏4.兼容刘海屏5.代码 1.遇到的问题 最近在开发一款app，初步的框架就是实现类似于qq布局的框架样式。那么就分为了两个部分。首先就是底部导航栏，使用bottomnavigationview和fragment可以实现，当然在创建项目时也可以使用AS默认的底部导航来进行项目创建。然后就是使用drawlayout实现侧滑的抽屉式布局。 虽然分析起来......
安卓实现侧滑菜单加底部导航栏:DrawerLayout+BottomNavigationView
蓝不蓝编程
03-27 3442
效果图 主要代码 MainActivity package com.cxyzy.myapplication import android.os.Bundle import android.view.Menu import android.view.MenuItem import androidx.appcompat.app.ActionBarDrawerToggle import andr...
ToolBar+DrawerLayout + NavigationView
07-14
ToolBar+DrawerLayout + NavigationView
DrawerLayout+Navigation侧滑框
07-10
DrawerLayout+Navigation侧滑框，下载以后就可以直接使用，侧滑框可以自己改，实现效果以及代码详解发在我的博客--侧滑框DrawerLayout和NavigationView完美合作，大家可以看了是否适合自己下载
DrawerLayout + Toolbar 与主题theme 颜色设置
06-04
DrawerLayout + Toolbar 与主题theme 颜色设置
基于NFV的虚拟化BRAS组网方案.docx
04-27
5G通信行业、网络优化、通信工程建设资料。
299-煤炭大数据智能分析解决方案.pptx
04-27
299-煤炭大数据智能分析解决方案.pptx
工资汇总打印税务计算系统-（Excel函数版）
最新发布
04-27
使用说明： 1、各月工资表，已用公式设置完毕,请在AI1单元格填入月份本表自动显示数据,您再按实际情况稍加修正,工资就完成了! 2、使用时,请把一月份工资表中公式的数据,按你的实际情况修改,之后把一月份工资表复制到2至12月就行了。以后再用时参阅第一条说明。 3、养老保险、失业保险、医疗保险、住房公积金 自动生成，但各单位的比例不同，请自行修改公式中的参数。 4、AK 列至 BD 列是报税资料，自动生成。 5、“四联工资单”只须输入员工编号与选择月份，便可自动取数；请根据需要任选。 6、“工资条”全部自动生成；有单行与双行两种,请任选使用。使用工资条时,请在《个税报告》表的V9单元格选择月份。 7、《扣缴个人所得税报告表》自动生成,请在V9单元格选择月份。请不要随意改动。 8、加班工资、考勤应扣，按每月30天计算；养、失、医、房 项目提取基数与比例亦应按单位规定进行修改。 9、各表均设了保护，但未设密码，您尽可撤消，做您想作的事。 10、打印工资表时，可将不需用的列
考试资料+7、互联网与物联网.docx
04-27
5G通信行业、网络优化、通信工程建设资料
景区4G网络覆盖提升解决案例.docx
04-27
5G通信、网络优化与通信建设
基于Springboot+Vue的机动车号牌管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
android.support.design.widget.navigationview
03-16
它可以与DrawerLayout一起使用，提供了一种简单的方式来实现侧边栏导航菜单。NavigationView可以包含多个菜单项，每个菜单项可以包含一个图标和一个文本标签。用户可以通过点击菜单项来导航到不同的页面或执行不同的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值