准备工作

新建一个空白android项目
命名为csdn

在res/layout路径下设置主页面
使用线性布局 linearLayout

使用自定义的viewPager（切换多个页面会秒跳转，提升体验感觉）

底部导航控件

如下所示主页布局

在资源文件中 res/color （没有color文件夹就自己建，导航栏切换时改变选中栏颜色）
新建颜色选择文件
bg_tab.xml

新增颜色配置文件备用

将使用到的静态文件拷贝到项目中
三个图片拷贝到 res/drawable下

开始设计菜单布局

在资源文件中 res/
新建菜单文件
menu/navigetion.xml

新建fragment页面

在源码中新建三个空白的fragment页面，用于给导航栏绑定备用
wechatFragment
listFragment
discoverFragment

通过如上方式新建三个fragment如下所示，删除其他不用的方法
只保留图中onCreateView方法跟wechatFragment
另外两个fragment如法炮制。

新建fragment时， res/layout路径下会自动生成相应的fragment.xml页面布局文件

如上图简单设置一下页面信息

设置主页面的逻辑（划重点）

进入主页面的
MainActivity
这里贴一下代码，上面的大家就自己敲一遍，别老想着偷懒哦

package com.example.csdn;import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;import android.os.Bundle;
import android.view.MenuItem;
import com.example.csdn.fragment.discoverFragment;
import com.example.csdn.fragment.listFragment;
import com.example.csdn.fragment.wechatFragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;public class MainActivity extends AppCompatActivity   implements BottomNavigationView.OnNavigationItemSelectedListener, ViewPager.OnPageChangeListener {ViewPager viewPager;BottomNavigationView mNavigationView;wechatFragment  wechatFragments = new wechatFragment();listFragment  listFragments = new listFragment();discoverFragment discoverFragments =new discoverFragment();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//页面初始化导航栏init();}private void init() {//获取页面标签对象viewPager = findViewById(R.id.viewPager);viewPager.addOnPageChangeListener(this);mNavigationView = findViewById(R.id.navigation);mNavigationView.setOnNavigationItemSelectedListener(this);//页面切换viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {@NonNull@Overridepublic Fragment getItem(int position) {switch (position){case 0:return  wechatFragments;case 1:return  listFragments;case 2:return  discoverFragments;}return null;}@Overridepublic int getCount() {return 3;}});}//实现接口的相关方法  implements上面两个方法后 alt+enter就会弹出这些接口，直接回车实现他们@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {mNavigationView.getMenu().getItem(position).setChecked(true);}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {viewPager.setCurrentItem(menuItem.getOrder());return true;}
}

最后打开模拟器看一下效果

在android Studio中设计app的底部导航栏相关推荐

android自定义底部中间突出导航栏,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡)
HBuilder开发旅游类APP(三) ----- 给APP添加底部导航栏(底部选项卡) 作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ M ...
android radiobutton底部导航,android中Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子首先我们先在activity ...
Android Navigation与BottomNavigationView实现底部导航栏
底部导航栏一.效果图二.实现 1.创建Fragment以及布局文件 2.添加FragmentContainerView和BottomNavigationView两个控件 3.配置xml资源文件 4 ...
android开发时华为手机底部导航栏挡住了应用布局
原因:使用安卓的BottomNavigationView控件开发底部导航栏同时使用了沉浸式状态栏导致华为手机的底部导航栏会盖住我应用的导航栏. 解决:先写一个工具类 import android.co ...
android获取刘海屏状态栏高度,Android刘海屏全面屏底部导航栏的适配
关于Android状态栏和虚拟导航栏的适配,文章:https://blog.csdn.net/leogentleman/article/details/54566319 讲的很不错. 状态栏的适配: ...
Android商城开发--实现商城底部导航栏
让我们先看效果图: 图一是默认效果图,图二是点击首页的效果图(图标和字体颜色会变化) 接下来是实现方法 1.先写布局. 我新建了一个ShoppingActivity,在activ ...
Android 泽宇三种底部导航栏
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.8@aar'//底部导航 <com.flyco.tablayout.CommonTabLa ...
android底部导航栏选中动画,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...

在android Studio中设计app的底部导航栏

准备工作

开始设计菜单布局

新建fragment页面

设置主页面的逻辑（划重点）

在android Studio中设计app的底部导航栏相关推荐

最新文章

热门文章