服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android实现底部状态栏切换的两种方式

Android实现底部状态栏切换的两种方式

2022-10-21 14:52龙旋 Android

这篇文章主要介绍了Android实现底部状态栏切换功能,在文中给大家提到了两种实现方式，本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

Android开发过程中，特别是新开的项目，底部状态栏的切换使用的频率非常的高，主要的实现方式有：

(1)、TabLayout + Fragment
    (2)、FragmentTabHost + Fragment
    (3)、BottomNavigationView + Fragment
    (4)、RidioGroup + Fragment

这里我先介绍前面两种实现方式，后面两种后期再贴出实现方式。

 

一、使用TabLayout + Fragment + ViewPager实现

1、实现步骤：

(1)、布局文件中定义TabLayout控件
    (2)、定义切换的每个Fragment布局文件
    (3)、定义切换的每个Fragment的Java类
    (4)、定义TabLayoutMainActivity类
    (5)、效果图演示

2、实现过程：

(1)、布局文件中定义TabLayout控件(activity_main.xml)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context="com.showly.bottomnavigationbardemo.TabLayoutMainActivity">
 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager_content_view"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:scrollbars="none" />
 <android.support.design.widget.TabLayout
 android:id="@+id/tab_layout_view"
 android:layout_width="match_parent"
 android:layout_height="50dp"
 app:tabGravity="fill"
 app:tabIndicatorHeight="0dp"
 app:tabMode="fixed"
 app:tabSelectedTextColor="#FB8081"
 app:tabTextColor="#A0A0A0" />
</LinearLayout>

(2)、定义切换的每个Fragment布局文件(fragment_frist.xml)

这里有四个Tab类别(首页、娱乐、游戏、我的)，布局都类似，这里只贴出其中一个

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#fff"
 android:orientation="vertical">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="首页"
 android:textColor="#000"/>
</RelativeLayout>

(3)、定义切换的每个Fragment的Java类(FristFragment.class)

这里的Java 类实现方式也相似，贴出其中一个

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.showly.bottomnavigationbardemo.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.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.fragment_frist, null);
 return view;
 }
}

(4)、定义TabLayoutMainActivity类(TabLayoutMainActivity.class)

  1. package com.showly.bottomnavigationbardemo; 
  2. import android.os.Bundle; 
  3. import android.support.design.widget.TabLayout; 
  4. import android.support.v4.app.Fragment; 
  5. import android.support.v4.app.FragmentManager; 
  6. import android.support.v4.app.FragmentPagerAdapter; 
  7. import android.support.v4.view.ViewPager; 
  8. import android.support.v7.app.AppCompatActivity; 
  9. import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment; 
  10. import com.showly.bottomnavigationbardemo.fragment.FristFragment; 
  11. import com.showly.bottomnavigationbardemo.fragment.SecondFragment; 
  12. import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment; 
  13. public class TabLayoutMainActivity extends AppCompatActivity { 
  14.  //未选中的Tab图片 
  15.  private int[] unSelectTabRes = new int[]{R.drawable.i8live_menu_home_normal 
  16.   , R.drawable.i8live_menu_information_normal, R.drawable.i8live_menu_game_normal, R.drawable.i8live_menu_personl_normal}; 
  17.  //选中的Tab图片 
  18.  private int[] selectTabRes = new int[]{R.drawable.i8live_menu_home_press, R.drawable.i8live_menu_information_press 
  19.   , R.drawable.i8live_menu_game_press, R.drawable.i8live_menu_personl_press}; 
  20.  //Tab标题 
  21.  private String[] title = new String[]{"首页", "娱乐", "游戏", "我的"}; 
  22.  private ViewPager viewPager; 
  23.  private TabLayout tabLayout; 
  24.  private TabLayout.Tab tabAtOne; 
  25.  private TabLayout.Tab tabAttwo; 
  26.  private TabLayout.Tab tabAtthree; 
  27.  private TabLayout.Tab tabAtfour; 
  28.  @Override 
  29.  protected void onCreate(Bundle savedInstanceState) { 
  30.  super.onCreate(savedInstanceState); 
  31.  getSupportActionBar().hide();//隐藏掉整个ActionBar 
  32.  setContentView(R.layout.activity_main); 
  33.  initView(); 
  34.  initData(); 
  35.  initListener(); 
  36.  } 
  37.  private void initView() { 
  38.  viewPager = (ViewPager) findViewById(R.id.viewpager_content_view); 
  39.  tabLayout = (TabLayout) findViewById(R.id.tab_layout_view); 
  40.  //使用适配器将ViewPager与Fragment绑定在一起 
  41.  viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager())); 
  42.  //将TabLayout与ViewPager绑定 
  43.  tabLayout.setupWithViewPager(viewPager); 
  44.  /* //设置方式一： 
  45.  //获取底部的单个Tab 
  46.  tabAtOne = tabLayout.getTabAt(0); 
  47.  tabAttwo = tabLayout.getTabAt(1); 
  48.  tabAtthree = tabLayout.getTabAt(2); 
  49.  tabAtfour = tabLayout.getTabAt(3); 
  50.  //设置Tab图片 
  51.  tabAtOne.setIcon(R.drawable.i8live_menu_home_press); 
  52.  tabAttwo.setIcon(R.drawable.i8live_menu_information_normal); 
  53.  tabAtthree.setIcon(R.drawable.i8live_menu_game_normal); 
  54.  tabAtfour.setIcon(R.drawable.i8live_menu_personl_normal);*/ 
  55.  //设置方式二： 
  56.  for (int i = 0; i < title.length; i++) { 
  57.   if (i == 0) { 
  58.   tabLayout.getTabAt(0).setIcon(selectTabRes[0]); 
  59.   } else { 
  60.   tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]); 
  61.   } 
  62.  } 
  63.  } 
  64.  private void initData() { 
  65.  } 
  66.  private void initListener() { 
  67.  //TabLayout切换时导航栏图片处理 
  68.  tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
  69.   @Override 
  70.   public void onTabSelected(TabLayout.Tab tab) {//选中图片操作 
  71.   for (int i = 0; i < title.length; i++) { 
  72.    if (tab == tabLayout.getTabAt(i)) { 
  73.    tabLayout.getTabAt(i).setIcon(selectTabRes[i]); 
  74.    viewPager.setCurrentItem(i); 
  75.    } 
  76.   } 
  77.   } 
  78.   @Override 
  79.   public void onTabUnselected(TabLayout.Tab tab) {//未选中图片操作 
  80.   for (int i = 0; i < title.length; i++) { 
  81.    if (tab == tabLayout.getTabAt(i)) { 
  82.    tabLayout.getTabAt(i).setIcon(unSelectTabRes[i]); 
  83.    } 
  84.   } 
  85.   } 
  86.   @Override 
  87.   public void onTabReselected(TabLayout.Tab tab) { 
  88.   } 
  89.  }); 
  90.  } 
  91.  //自定义适配器 
  92.  public class MyFragmentPagerAdapter extends FragmentPagerAdapter { 
  93.  public MyFragmentPagerAdapter(FragmentManager fm) { 
  94.   super(fm); 
  95.  } 
  96.  @Override 
  97.  public Fragment getItem(int position) { 
  98.   if (position == 1) { 
  99.   return new SecondFragment();//娱乐 
  100.   } else if (position == 2) { 
  101.   return new ThirtlyFragment();//游戏 
  102.   } else if (position == 3) { 
  103.   return new FourthlyFragment();//我的 
  104.   } 
  105.   return new FristFragment();//首页 
  106.  } 
  107.  @Override 
  108.  public int getCount() { 
  109.   return title.length; 
  110.  } 
  111.  @Override 
  112.  public CharSequence getPageTitle(int position) { 
  113.   return title[position]; 
  114.  } 
  115.  } 
  116. } 

(5)、效果图演示

Android实现底部状态栏切换的两种方式

 

二、使用FragmentTabHost+ Fragment + ViewPager实现

1、实现步骤：

(1)、布局文件中定义FragmentTabHost控件
    (2)、定义底部菜单栏布局
    (3)、定义切换的每个Fragment布局文件
    (4)、定义切换的每个Fragment的Java类
    (5)、切换按钮的图片
    (6)、定义FragmentTabHostMainActivity类
    (7)、效果图演示

2、实现过程：

(1)、布局文件中定义FragmentTabHost控件(fragment_tabhost_activity.xml)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#fff"
 android:orientation="vertical">
 <android.support.v4.view.ViewPager
 android:id="@+id/vp_pager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"
 android:scrollbars="none" />
 <android.support.v4.app.FragmentTabHost
 android:id="@android:id/tabhost"
 android:layout_width="match_parent"
 android:background="#3000"
 android:layout_height="65dp">
 <FrameLayout
  android:id="@android:id/tabcontent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 </android.support.v4.app.FragmentTabHost>
</LinearLayout>

(2)、定义底部菜单栏布局(tab_content.xml)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="2dp"
 android:orientation="vertical">
 
 <ImageView
 android:id="@+id/iv_imageview"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:background="@drawable/i8live_menu_home_normal" />
 
 <TextView
 android:id="@+id/tv_item"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:layout_marginTop="5dp"
 android:text="首页" />
</LinearLayout>

(3)、定义切换的每个Fragment布局文件(fragment_frist.xml)

这里有四个Tab类别(首页、娱乐、游戏、我的)，布局都类似，这里只贴出其中一个

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#fff"
 android:orientation="vertical">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="首页"
 android:textColor="#000"/>
</RelativeLayout>

(4)、定义切换的每个Fragment的Java类(FristFragment.class)

这里的Java 类实现方式也相似，贴出其中一个

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.showly.bottomnavigationbardemo.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.showly.bottomnavigationbardemo.R;
public class FristFragment extends Fragment {
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.fragment_frist, null);
 return view;
 }
}

(5)、切换按钮的图片(tab_main.xml)

这里有四个是相似的，只贴出其中一个

?
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 切换选中之后的图片-->
 <item android:drawable="@drawable/i8live_menu_home_press" android:state_selected="true"/>
 <!-- 未选中的图片-->
 <item android:drawable="@drawable/i8live_menu_home_normal"/>
</selector>

(6)、定义FragmentTabHostMainActivity类（FragmentTabHostMainActivity.class）

  1. package com.showly.bottomnavigationbardemo; 
  2. import android.graphics.Color; 
  3. import android.os.Bundle; 
  4. import android.support.annotation.Nullable; 
  5. import android.support.v4.app.Fragment; 
  6. import android.support.v4.app.FragmentActivity; 
  7. import android.support.v4.app.FragmentManager; 
  8. import android.support.v4.app.FragmentPagerAdapter; 
  9. import android.support.v4.app.FragmentTabHost; 
  10. import android.support.v4.view.ViewPager; 
  11. import android.view.LayoutInflater; 
  12. import android.view.View; 
  13. import android.view.ViewGroup; 
  14. import android.widget.ImageView; 
  15. import android.widget.TabHost; 
  16. import android.widget.TabWidget; 
  17. import android.widget.TextView; 
  18. import com.showly.bottomnavigationbardemo.fragment.FourthlyFragment; 
  19. import com.showly.bottomnavigationbardemo.fragment.FristFragment; 
  20. import com.showly.bottomnavigationbardemo.fragment.SecondFragment; 
  21. import com.showly.bottomnavigationbardemo.fragment.ThirtlyFragment; 
  22. import java.util.ArrayList; 
  23. import java.util.List; 
  24. public class FragmentTabHostMainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener, TabHost.OnTabChangeListener { 
  25.  private int[] selectTabRes = new int[]{R.drawable.tab_main, R.drawable.tab_infomation 
  26.   , R.drawable.tab_game, R.drawable.tab_personal}; 
  27.  //Tab标题 
  28.  private String[] title = new String[]{"首页", "娱乐", "游戏", "我的"}; 
  29.  private Class fragmentArry[] = {FristFragment.class, SecondFragment.class, ThirtlyFragment.class, FourthlyFragment.class}; 
  30.  private List<Fragment> fragmentList = new ArrayList(); 
  31.  private ViewPager viewPager; 
  32.  private FragmentTabHost tabHost; 
  33.  @Override 
  34.  protected void onCreate(@Nullable Bundle savedInstanceState) { 
  35.  super.onCreate(savedInstanceState); 
  36.  setContentView(R.layout.fragment_tabhost_activity); 
  37.  initView(); 
  38.  initData(); 
  39.  initListener(); 
  40.  } 
  41.  /** 
  42.  * 初始化Fragment并给ViewPager添加适配器 
  43.  */ 
  44.  private void initVaper() { 
  45.  FristFragment fristFragment = new FristFragment(); 
  46.  SecondFragment secondFragment = new SecondFragment(); 
  47.  ThirtlyFragment thirtlyFragment = new ThirtlyFragment(); 
  48.  FourthlyFragment fourthlyFragment = new FourthlyFragment(); 
  49.  fragmentList.add(fristFragment); 
  50.  fragmentList.add(secondFragment); 
  51.  fragmentList.add(thirtlyFragment); 
  52.  fragmentList.add(fourthlyFragment); 
  53.  //ViewPager添加适配器 
  54.  viewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), fragmentList)); 
  55.  tabHost.getTabWidget().setDividerDrawable(null); 
  56.  } 
  57.  private void initView() { 
  58.  viewPager = (ViewPager) findViewById(R.id.vp_pager); 
  59.  tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);//绑定tabhost 
  60.  tabHost.setup(this, getSupportFragmentManager(), R.id.vp_pager);//TabHost绑定viewpager 
  61.  //获取item的个数 
  62.  int count = title.length; 
  63.  for (int i = 0; i < count; i++) { 
  64.   //设置每个TabHost布局 
  65.   TabHost.TabSpec tabSpec = tabHost.newTabSpec(title[i]) 
  66.    .setIndicator(getTabItemView(i)); 
  67.   //item与fragment关联 
  68.   tabHost.addTab(tabSpec, fragmentArry[i], null); 
  69.   tabHost.setTag(i); 
  70.  } 
  71.  //初始化TabHost文字颜色 
  72.  upDateTab(tabHost); 
  73.  //给ViewPager设置适配器 
  74.  initVaper(); 
  75.  } 
  76.  /** 
  77.  * 更新文字颜色。 
  78.  * 
  79.  * @param mTabHost 
  80.  */ 
  81.  private void upDateTab(FragmentTabHost mTabHost) { 
  82.  for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) { 
  83.   TextView tv = (TextView) mTabHost.getTabWidget().getChildAt(i).findViewById(R.id.tv_item); 
  84.   if (mTabHost.getCurrentTab() == i) {//选中 
  85.   tv.setTextColor(Color.parseColor("#FF5959")); 
  86.   } else {//不选中 
  87.   tv.setTextColor(Color.parseColor("#777777")); 
  88.   } 
  89.  } 
  90.  } 
  91.  /** 
  92.  * 设置每个Item布局 
  93.  */ 
  94.  private View getTabItemView(int i) { 
  95.  View view = LayoutInflater.from(this).inflate(R.layout.tab_content, null); 
  96.  ImageView itemImg = (ImageView) view.findViewById(R.id.iv_imageview); 
  97.  TextView itemText = (TextView) view.findViewById(R.id.tv_item); 
  98.  itemImg.setBackgroundResource(selectTabRes[i]); 
  99.  itemText.setText(title[i]); 
  100.  return view; 
  101.  } 
  102.  private void initData() { 
  103.  } 
  104.  private void initListener() { 
  105.  viewPager.addOnPageChangeListener(this); 
  106.  tabHost.setOnTabChangedListener(this); 
  107.  } 
  108.  @Override 
  109.  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
  110.  } 
  111.  @Override 
  112.  public void onPageSelected(int position) { 
  113.  TabWidget widget = tabHost.getTabWidget(); 
  114.  int oldFocusability = widget.getDescendantFocusability(); 
  115.  widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);//设置View覆盖子类控件而直接获得焦点 
  116.  tabHost.setCurrentTab(position);//根据位置Postion设置当前的Tab 
  117.  widget.setDescendantFocusability(oldFocusability);//设置取消分割线 
  118.  } 
  119.  @Override 
  120.  public void onPageScrollStateChanged(int state) { 
  121.  } 
  122.  @Override 
  123.  public void onTabChanged(String tabId) { 
  124.  int position = tabHost.getCurrentTab(); 
  125.  viewPager.setCurrentItem(position);//把选中的Tab的位置赋给适配器，让它控制页面切换 
  126.  upDateTab(tabHost);//设置TabHost文字颜色 
  127.  } 
  128.  /** 
  129.  * 适配器 
  130.  * */ 
  131.  public class MyFragmentAdapter extends FragmentPagerAdapter { 
  132.  List<Fragment> list; 
  133.  public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) { 
  134.   super(fm); 
  135.   this.list = list; 
  136.  } 
  137.  @Override 
  138.  public Fragment getItem(int position) { 
  139.   return list.get(position); 
  140.  } 
  141.  @Override 
  142.  public int getCount() { 
  143.   return list.size(); 
  144.  } 
  145.  } 

(7)、效果图演示

Android实现底部状态栏切换的两种方式

 

三、总结

以上所述是小编给大家介绍的Android实现底部状态栏切换的两种方式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

原文链接：https://segmentfault.com/a/1190000019508017

  • Android
  • 切换
  • 底部
  • 状态栏

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    ImageSelector 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图