Android底部导航栏实现

最新推荐文章于 2024-09-22 02:33:28 发布

2401_84912116

最新推荐文章于 2024-09-22 02:33:28 发布

阅读量1.1k

点赞数 17

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84912116/article/details/138711047

版权

程序员专栏收录该内容

58 篇文章 0 订阅

订阅专栏

View view = inflater.inflate(R.layout.tab1, container, false);

return view;

}

class pageFragment2 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab2, container, false);

TextView txt = (TextView) view.findViewById(R.id.txt2);

txt.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Log.d(“dd”,“dddd”);

Toast.makeText(getActivity(), “当前页面：2”, Toast.LENGTH_SHORT).show();

}

});

return view;

}

public class pageFragment3 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab3, container, false);

return view;

}

public class pageFragment4 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab4, container, false);

return view;

}

布局文件：

activity_main.xml

<LinearLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<FrameLayout

android:id=“@+id/id_content”

android:layout_width=“match_parent”

android:layout_height=“0dp”

android:layout_weight=“1”>

底部导航栏布局：

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“55dp”

android:gravity=“center”

android:orientation=“horizontal”>

<LinearLayout

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:id=“@+id/id_tab1”

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id=“@+id/id_tab_img1”

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src=“@mipmap/icon1”

android:background=“#00000000”/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor=“#A6A6A6”

android:text=“页面1”/>

<LinearLayout

android:id=“@+id/id_tab2”

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id=“@+id/id_tab_img2”

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src=“@mipmap/icon2”

android:background=“#00000000”/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor=“#A6A6A6”

android:text=“页面2”/>

<LinearLayout

android:id=“@+id/id_tab3”

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id=“@+id/id_tab_img3”

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src=“@mipmap/icon2”

android:background=“#00000000”/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor=“#A6A6A6”

android:text=“页面3”/>

<LinearLayout

android:id=“@+id/id_tab4”

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id=“@+id/id_tab_img4”

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src=“@mipmap/icon2”

android:background=“#00000000”/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor=“#A6A6A6”

android:text=“页面4”/>

Fragment对应布局

四个都一样：

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<TextView android:id=“@+id/txt1”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:gravity=“center”

android:textSize=“30sp”

android:background=“@drawable/xiaomai1”

style文件：

使用ViewPager实现底部导航栏

=============================================================================

使用Fragment有个局限，切换页面的方式只能通过点击底部的导航栏按钮切换，在平时的手机应用使用中也经常可以见到直接左右滑动页面就可以切换页面，而且看起来更加方便，所以下一种方式就是使用ViewPager来实现可以对页面滑动切换。

效果展示

viewpager实现效果

ViewPager简介

官方文档

在这里插入图片描述

ViewPager是android扩展包androidX包中的类，旧版的是在v4包中，ViewPager就是一个简单的页面切换组件，可以往里面填充多个View，然后可以左右滑动，从而切换不同的View。ViewPager类直接继承了ViewGroup类，所以它是一个容器类，可以在其中添加其他的view类。和ListView，GridView一样，也需要一个Adapter(适配器)将View和ViewPager进行绑定，而ViewPager则有一个特定的Adapter——PagerAdapter。

PagerAdapter简介

PagerAdapter需要重写下面的四个方法：

这只是官方建议，实际上只需重写getCount()和isViewFromObject()就可以了

getCount():获得viewpager中有多少个view

destroyItem():移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保finishUpdate(viewGroup)返回时视图能够被移除。

instantiateItem():

①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来。

②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了。

isViewFromObject():

判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View),通常直接写return view == object!

以实现代码中的PagerAdapter为示例：

//初始化ViewPager的适配器

mAdpater = new PagerAdapter() {

//放回页面数量

@Override

public int getCount() {

return mTabs.size();

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

View view = mTabs.get(position);

container.addView(view);

return view;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

// super.destroyItem(container, position, object);

container.removeView(mTabs.get(position));

}

};

//设置ViewPager的适配器

mViewpager.setAdapter(mAdpater);

viewpagert实现底部导航栏代码实现

核心：MainActivity.class

public class MainActivity extends Activity implements OnClickListener {

//声明ViewPager

private ViewPager mViewpager;

//声明四个Tab

private Intent mTab1;

private Intent mTab2;

private Intent mTab3;

private Intent mTab4;

//声明四个ImageButton

private ImageButton mImg1;

private ImageButton mImg2;

private ImageButton mImg3;

private ImageButton mImg4;

//声明ViewPager的适配器

private PagerAdapter mAdpater;

//用于装载四个Tab的List

private List mTabs = new ArrayList();

private LocalActivityManager manager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//去掉TitleBar

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

//初始化控件

mViewpager = (ViewPager) findViewById(R.id.id_viewpager);

manager = new LocalActivityManager(this, true);

manager.dispatchCreate(savedInstanceState);

mTab1 = new Intent(MainActivity.this, pageActivity1.class);

View tab01 = manager.startActivity(“view1”, mTab1).getDecorView();

mTab2 = new Intent(MainActivity.this, pageActivity2.class);

View tab02 = manager.startActivity(“view2”, mTab2).getDecorView();

mTab3 = new Intent(MainActivity.this, pageActivity3.class);

View tab03 = manager.startActivity(“view3”, mTab3).getDecorView();

mTab4 = new Intent(MainActivity.this, pageActivity4.class);

View tab04 = manager.startActivity(“view4”, mTab4).getDecorView();

mImg1 = (ImageButton) findViewById(R.id.id_tab_img1);

mImg2 = (ImageButton) findViewById(R.id.id_tab_img2);

mImg3 = (ImageButton) findViewById(R.id.id_tab_img3);

mImg4 = (ImageButton) findViewById(R.id.id_tab_img4);

//获取到四个Tab

LayoutInflater inflater = LayoutInflater.from(this);

View tab1 = inflater.inflate(R.layout.tab1, null);

View tab2 = inflater.inflate(R.layout.tab2, null);

View tab3 = inflater.inflate(R.layout.tab3, null);

View tab4 = inflater.inflate(R.layout.tab4, null);

//将四个Tab添加到集合中

mTabs.add(tab01);

mTabs.add(tab02);

mTabs.add(tab03);

mTabs.add(tab04);

initDatas();//初始化数据

initEvents();//初始化事件

}

private void initEvents() {

//设置四个Tab的点击事件

mImg1.setOnClickListener(this);

mImg2.setOnClickListener(this);

mImg3.setOnClickListener(this);

mImg4.setOnClickListener(this);

//添加ViewPager的切换Tab的监听事件

mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

//获取ViewPager的当前Tab

int currentItem = mViewpager.getCurrentItem();

//将所以的ImageButton设置成灰色

resetImgs();

//将当前Tab对应的ImageButton设置成绿色

switch (currentItem) {

case 0:

mImg1.setImageResource(R.mipmap.icon1);

break;

case 1:

mImg2.setImageResource(R.mipmap.icon1);

break;

case 2:

mImg3.setImageResource(R.mipmap.icon1);

break;

case 3:

mImg4.setImageResource(R.mipmap.icon1);

break;

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

}

private void initDatas() {

//初始化ViewPager的适配器

mAdpater = new PagerAdapter() {

//放回页面数量

@Override

public int getCount() {

return mTabs.size();

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

View view = mTabs.get(position);

container.addView(view);

return view;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

// super.destroyItem(container, position, object);

container.removeView(mTabs.get(position));

}

};

//设置ViewPager的适配器

mViewpager.setAdapter(mAdpater);

}

//初始化控件

private void initViews() {

}

@Override

public void onClick(View v) {

//先将四个ImageButton都设置成灰色

resetImgs();

switch (v.getId()) {

case R.id.id_tab_img1:

//设置viewPager的当前Tab

mViewpager.setCurrentItem(0);

//将当前Tab对应的ImageButton设置成绿色

mImg1.setImageResource(R.mipmap.icon1);

break;

case R.id.id_tab_img2:

mViewpager.setCurrentItem(1);

mImg2.setImageResource(R.mipmap.icon1);

break;

case R.id.id_tab_img3:

mViewpager.setCurrentItem(2);

mImg3.setImageResource(R.mipmap.icon1);

break;

case R.id.id_tab_img4:

mViewpager.setCurrentItem(3);

mImg4.setImageResource(R.mipmap.icon1);

break;

}

//将四个ImageButton设置成灰色

private void resetImgs () {

mImg1.setImageResource(R.mipmap.icon2);

mImg2.setImageResource(R.mipmap.icon2);

mImg3.setImageResource(R.mipmap.icon2);

mImg4.setImageResource(R.mipmap.icon2);

}

每个页面的Acvitity

四个页面的实现都一样：

public class pageActivity1 extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.tab1);

this.getSupportActionBar().hide();//隐藏标题栏

TextView txt = (TextView)findViewById(R.id.txt1);

txt.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Log.d(“dd”,“dddd”);

Toast.makeText(pageActivity1.this, “当前页面：1”, Toast.LENGTH_SHORT).show();

}

});

}

布局文件和上面的Fragment实现是一样的，就不在发代码了。

viewpager对view进行管理，大多情况单独使用viewpager用来实现简单的广告图案滚动展示，要实现每个界面的activity的话不方便。但是在动图展示里面很明显可以看出我是已经实现了每个view对应的Acvitity。示例中为了实现view的acvitity使用了LocalActivityManager，但是这个就很古老了，是API level 13之前的，不过既然都实现了而且还能用就也粘出来。说不定对看那些比较老的代码会有帮助。

使用 ViewPager + Fragment实现底部导航栏

=========================================================================================

在官方文档中，很明白地说了ViewPager最常与结合使用Fragment，饶了一圈回来，所以以后还是要尽量看第一手文档，才是最直接管用的。ViewPager + Fragment的方式可以拥有ViewPager 方便操作和Fragment独立acvitity实现，把界面和服务完美的分开了，是我最想要的样子。

效果展示

在这里插入图片描述

概念介绍

FragmentPagerAdapter简介

在这里插入图片描述

FragmentPagerAdapter的实现与listAdapter也类似，把页面的实现Fragment全都存到一个list里，通过FragmentPagerAdapter把Fragment-List中的所有Fragment动态加载到viewpager中，实现很简单。

实现FragmentPagerAdapter这里只要实现他的getItem()和getCount()方法：

getItem()：返回与指定位置关联的Fragment。

getCount()：获得Fragment_list中有多少个Fragment

示例代码：

mFragments = new ArrayList<>();

//将四个Fragment加入集合中

mFragments.add(new PageFragment1());

mFragments.add(new PageFragment2());

mFragments.add(new PageFragment3());

mFragments.add(new PageFragment4());

//初始化适配器

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

@Override

public Fragment getItem(int position) {//从集合中获取对应位置的Fragment

return mFragments.get(position);

}

@Override

public int getCount() {//获取集合中Fragment的总数

return mFragments.size();

}

};

//不要忘记设置ViewPager的适配器

mViewPager.setAdapter(mAdapter);

ViewPager + Fragment代码实现

核心类：MainActivity.class

这里要注意不能使用Activity，而是使用FragmentActivity ，它用于基于Fragment实现的活动类。

public class MainActivity extends FragmentActivity implements OnClickListener {

//声明ViewPager

private ViewPager mViewPager;

//适配器

private FragmentPagerAdapter mAdapter;

//装载Fragment的集合

private List mFragments;

//四个Tab对应的布局

private LinearLayout mTab1;

private LinearLayout mTab2;

private LinearLayout mTab3;

private LinearLayout mTab4;

//四个Tab对应的ImageButton

private ImageButton mImg1;

private ImageButton mImg2;

private ImageButton mImg3;

private ImageButton mImg4;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initViews();//初始化控件

initEvents();//初始化事件

initDatas();//初始化数据

}

private void initDatas() {

mFragments = new ArrayList<>();

//将四个Fragment加入集合中

mFragments.add(new PageFragment1());

mFragments.add(new PageFragment2());

mFragments.add(new PageFragment3());

mFragments.add(new PageFragment4());

//初始化适配器

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

@Override

public Fragment getItem(int position) {//从集合中获取对应位置的Fragment

return mFragments.get(position);

}

@Override

public int getCount() {//获取集合中Fragment的总数

return mFragments.size();

}

};

//不要忘记设置ViewPager的适配器

mViewPager.setAdapter(mAdapter);

//设置ViewPager的切换监听

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

//页面滚动事件

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

//页面选中事件

@Override

public void onPageSelected(int position) {

//设置position对应的集合中的Fragment

mViewPager.setCurrentItem(position);

resetImgs();

selectTab(position);

}

@Override

//页面滚动状态改变事件

public void onPageScrollStateChanged(int state) {

}

});

}

private void initEvents() {

//设置四个Tab的点击事件

mTab1.setOnClickListener(this);

mTab2.setOnClickListener(this);

mTab3.setOnClickListener(this);

mTab4.setOnClickListener(this);

}

//初始化控件

private void initViews() {

mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

mTab1 = (LinearLayout) findViewById(R.id.id_tab1);

mTab2 = (LinearLayout) findViewById(R.id.id_tab2);

mTab3 = (LinearLayout) findViewById(R.id.id_tab3);

mTab4 = (LinearLayout) findViewById(R.id.id_tab4);

mImg1 = (ImageButton) findViewById(R.id.id_tab1_img);

mImg2 = (ImageButton) findViewById(R.id.id_tab2_img);

mImg3 = (ImageButton) findViewById(R.id.id_tab3_img);

mImg4 = (ImageButton) findViewById(R.id.id_tab4_img);

}

@Override

public void onClick(View v) {

//先将四个ImageButton置为灰色

resetImgs();

//根据点击的Tab切换不同的页面及设置对应的ImageButton为绿色

switch (v.getId()) {

case R.id.id_tab1:

selectTab(0);

break;

case R.id.id_tab2:

selectTab(1);

break;

case R.id.id_tab3:

selectTab(2);

break;

case R.id.id_tab4:

selectTab(3);

break;

}

private void selectTab(int i) {

//根据点击的Tab设置对应的ImageButton为绿色

switch (i) {

case 0:

mImg1.setImageResource(R.mipmap.icon1);

break;

case 1:

mImg2.setImageResource(R.mipmap.icon1);

break;

case 2:

mImg3.setImageResource(R.mipmap.icon1);

break;

case 3:

mImg4.setImageResource(R.mipmap.icon1);

break;

}

//设置当前点击的Tab所对应的页面

mViewPager.setCurrentItem(i);

}

//将四个ImageButton设置为灰色

private void resetImgs() {

mImg1.setImageResource(R.mipmap.icon2);

mImg2.setImageResource(R.mipmap.icon2);

mImg3.setImageResource(R.mipmap.icon2);

mImg4.setImageResource(R.mipmap.icon2);

}

Fragment.class

每个页面一个Fragment，四个都一样：

public class PageFragment1 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab1, container, false);

TextView txt = (TextView) view.findViewById(R.id.txt1);

txt.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(getActivity(), “当前页面：1”, Toast.LENGTH_SHORT).show();

}

});

return view;

}

布局文件也与上面的一样，不再粘出来了。

最后

最不喜欢不直接开源的人了，当然选择分享项目工程源码：pick me！

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
.mipmap.icon2);

mImg4.setImageResource(R.mipmap.icon2);

}

Fragment.class

每个页面一个Fragment，四个都一样：

public class PageFragment1 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab1, container, false);

TextView txt = (TextView) view.findViewById(R.id.txt1);

txt.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(getActivity(), “当前页面：1”, Toast.LENGTH_SHORT).show();

}

});

return view;

}

布局文件也与上面的一样，不再粘出来了。

最后

最不喜欢不直接开源的人了，当然选择分享项目工程源码：pick me！

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-JpKP2VsM-1715403695979)]

[外链图片转存中…(img-evpJd1Sf-1715403695980)]

[外链图片转存中…(img-152mVAYu-1715403695981)]

[外链图片转存中…(img-iaHaOPEk-1715403695982)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84912116

关注

17
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录