本文介绍了如何在Android中实现底部导航栏，通过使用Fragment和ViewPager来创建可滑动切换的页面。首先，详细讲解了Fragment的使用，包括其生命周期和如何在MainActivity中管理多个Fragment。接着，提到了使用ViewPager实现页面滑动切换，解释了ViewPager和PagerAdapter的工作原理。最后，探讨了使用ViewPager与Fragment结合的方式，强调这种方式是性能最佳且易于维护的实现方法。
Android底部导航栏实现
底部导航栏
在使用应用软件时，为了方便用户操作和增加界面直观，许多应用都会用到底部导航栏。
我们经常使用的微信、QQ就是很贴切的例子：
下面我通过几种方式实现类似效果的底部导航栏。
使用Fragment实现底部导航栏
效果展示
相关概念介绍：
官方文档
Fragment表示 FragmentActivity中的行为或界面的一部分。可以在一个 Activity中组合多个Fragment，从而构建多窗格界面，并在多个 Activity 中重复使用某个片段。Fragment必须始终托管在 Activity 中，其生命周期直接受宿主 Activity 生命周期的影响。例如，当Activity 暂停时，Activity的所有片段也会暂停；当Activity 被销毁时，所有片段也会被销毁。
不过，当Activity 正在运行时可以独立操纵每个Fragment，这里就是应用到了每个Fragment的可独立操作这一特性。每个页面使用一个Fragment来实现，所有页面都以同一个activity为宿主，通过获取用户操作隐藏其他页面，显示当前所在的页面对应的Fragment，实现页面间的切换，并且还是可以独立的操作每个页面。
Fragment的使用
Fragment类的代码与Activity非常相识，它包含与 Activity类似的回调方法，如 onCreate()、onStart()、onPause() 和 onStop()。
与Activity对比Fragment的生命周期有个比较有特点的方法,并且在这里是比较重要的：
onCreateView()：系统会在片段首次绘制其界面时调用此方法。若Fragment需要加载样式则需要在此方法中使用inflate加载样式文件，并且作为方法的放回值，若不需要的话默认放回NULL。inflate的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件，并且实例化成View。
public class pageFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab1, container, false);
return view;
}
}
FragmentManager简介
为了管理Activity中的Fragments，需要使用FragmentManager.
在Activity中要获取FragmentManager需要调用Activity的getFragmentManager()方法。
向FragmentManager中添加Fragment：
可以使用FragmentTransaction来实现，FragmentTransaction可以通过FragmentManager.beginTransaction()来获取，使用add(int containerViewId, Fragment fragment, String tag)方法来添加一个Fragment，remove(Fragment fragment)方法来移除掉一个Fragment。
通过show(Fragment fragment，String tag)和hide(Fragment fragment，String tag）制FragmentManager所管理的Fragment的显示状态，当hide时Fragment不显示，处于暂停状态；show时处于运行状态，允许用户交互。示例代码：
private void selectTab(int i) {
//获取FragmentManager对象
FragmentManager manager = getSupportFragmentManager();
//获取FragmentTransaction对象
FragmentTransaction transaction = manager.beginTransaction();
//先隐藏所有的Fragment
hideFragments(transaction);
switch (i) {
//当选中点击的是第一页的Tab时
case 0:
//设置第一页的ImageButton为绿色
mImg1.setImageResource(R.mipmap.icon1);
//如果第一页对应的Fragment没有实例化，则进行实例化，并显示出来
if (mFrag1 == null) {
mFrag1 = new Fragment();
transaction.add(R.id.id_content, mFrag1);
} else {
//如果第一页对应的Fragment已经实例化，则直接显示出来
transaction.show(mFrag1);
}
break;
case 1:
mImg2.setImageResource(R.mipmap.icon1);
if (mFrag2 == null) {
mFrag2 = new pageFragment2();
transaction.add(R.id.id_content, mFrag2);
} else {
transaction.show(mFrag2);
}
break;
case 2:
mImg3.setImageResource(R.mipmap.icon1);
if (mFrag3 == null) {
mFrag3 = new pageFragment3();
transaction.add(R.id.id_content, mFrag3);
} else {
transaction.show(mFrag3);
}
break;
case 3:
mImg4.setImageResource(R.mipmap.icon1);
if (mFrag4 == null) {
mFrag4 = new Fragment();
transaction.add(R.id.id_content, mFrag4);
} else {
transaction.show(mFrag4);
}
break;
}
//不要忘记提交事务
transaction.commit();
}
//将四个的Fragment隐藏
private void hideFragments(FragmentTransaction transaction) {
if (mFrag1 != null) {
transaction.hide(mFrag1);
}
if (mFrag2 != null) {
transaction.hide(mFrag2);
}
if (mFrag3 != null) {
transaction.hide(mFrag3);
}
if (mFrag4 != null) {
transaction.hide(mFrag4);
}
}
在本例子中，就是使用FragmentManager来管理多个Fragment，通过show()方法显示当前所在的Fragment页面，hide方法将其他页面隐藏。
Fragment实现底部导航栏代码实现
MainActivity.class :核心Activity
ass MainActivity extends FragmentActivity implements OnClickListener {
//声明四个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;
//声明四个Tab分别对应的Fragment
private Fragment mFrag1;
private Fragment mFrag2;
private Fragment mFrag3;
private Fragment mFrag4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();//初始化控件
initEvents();//初始化事件
selectTab(0);//默认选中第一个Tab
}
private void initEvents() {
//初始化四个Tab的点击事件
mTab1.setOnClickListener(this);
mTab2.setOnClickListener(this);
mTab3.setOnClickListener(this);
mTab4.setOnClickListener(this);
}
private void initViews() {
//初始化四个Tab的布局文件
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);
//初始化四个ImageButton
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的点击事件
@Override
public void onClick(View v) {
resetImgs(); //先将四个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;
}
}
//进行选中Tab的处理
private void selectTab(int i) {
//获取FragmentManager对象
FragmentManager manager = getSupportFragmentManager();
//获取FragmentTransaction对象
FragmentTransaction transaction = manager.beginTransaction();
//先隐藏所有的Fragment
hideFragments(transaction);
switch (i) {
//当选中点击的是第一页的Tab时
case 0:
//设置第一页的ImageButton为绿色
mImg1.setImageResource(R.mipmap.icon1);
//如果第一页对应的Fragment没有实例化，则进行实例化，并显示出来
if (mFrag1 == null) {
mFrag1 = new Fragment();
transaction.add(R.id.id_content, mFrag1);
} else {
//如果第一页对应的Fragment已经实例化，则直接显示出来
transaction.show(mFrag1);
}
break;
case 1:
mImg2.setImageResource(R.mipmap.icon1);
if (mFrag2 == null) {
mFrag2 = new pageFragment2();
transaction.add(R.id.id_content, mFrag2);
} else {
transaction.show(mFrag2);
}
break;
case 2:
mImg3.setImageResource(R.mipmap.icon1);
if (mFrag3 == null) {
mFrag3 = new pageFragment3();
transaction.add(R.id.id_content, mFrag3);
} else {
transaction.show(mFrag3);
}
break;
case 3:
mImg4.setImageResource(R.mipmap.icon1);
if (mFrag4 == null) {
mFrag4 = new Fragment();
transaction.add(R.id.id_content, mFrag4);
} else {
transaction.show(mFrag4);
}
break;
}
//不要忘记提交事务
transaction.commit();
}
//将四个的Fragment隐藏
private void hideFragments(FragmentTransaction transaction) {
if (mFrag1 != null) {
transaction.hide(mFrag1);
}
if (mFrag2 != null) {
transaction.hide(mFrag2);
}
if (mFrag3 != null) {
transaction.hide(mFrag3);
}
if (mFrag4 != null) {
transaction.hide(mFrag4);
}
}
//将四个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
pageFragment1,pageFragment2,pageFragment3.class ,pageFragment4.class
lic class pageFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
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">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
底部导航栏布局：
<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>
<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>
<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>
<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"/>
</LinearLayout>
</LinearLayout>
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"
/>
</LinearLayout>
style文件：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
使用ViewPager实现底部导航栏
使用Fragment有个局限，切换页面的方式只能通过点击底部的导航栏按钮切换，在平时的手机应用使用中也经常可以见到直接左右滑动页面就可以切换页面，而且看起来更加方便，所以下一种方式就是使用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<View> mTabs = new ArrayList<View>();
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<Fragment> 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！
总结
一开始百度上到处一顿乱搜查到的都是讲的不太明白和过时的资料，浪费了不少时间。对各位和我一样的小白，建议大家尽量找第一手的文档做参考，比如官方文档和生态社区里的资料，这里的资料更真实更直接而且还是最新的，可以少踩很多坑，要是不会看的话那当然是选择学着看了。
对于底部导航栏的实现，要是使用viewpager的话那肯定是要推荐使用viewpager+fragment的实现方式，这种方法最简单也是性能最好的。它不仅可以满足用户操作体验，对于界面与逻辑分离，代码逻辑编写，实现个个页面的独立实现，都是首选的。
作为一个小白也发现在Android的编程中进程遇到Adapter适配器，并且实现方式都相似，所以也需要注意理解其中的大概架构原理，下次看到其他适配器时就可以很容易理解了。
作者：李国煌
原文链接：https://blog.csdn.net/master__boy/article/details/106715929
扫一扫
7626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
