Android-底部导航栏(底部Tab)最佳实践,用过的都说香!_android 底部tab

public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
// Tab 选中之后,改变各个Tab的状态
for (int i=0;i<mTabLayout.getTabCount();i++){
View view = mTabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView text = (TextView) view.findViewById(R.id.tab_content_text);
if(i == tab.getPosition()){ // 选中状态
icon.setImageResource(DataGenerator.mTabResPressed[i]);
text.setTextColor(getResources().getColor(android.R.color.black));
}else{// 未选中状态
icon.setImageResource(DataGenerator.mTabRes[i]);
text.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
// 提供自定义的布局添加Tab
for(int i=0;i<4;i++){
mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
}

}

private void onTabItemSelected(int position){
Fragment fragment = null;
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;

case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}

改造完成之后,效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

总结:TayoutLayout 实现底部导航栏较为简单,只需几步就能实现,能配合Viewpager使用。但是,就像上文说的,不能设置Icon大小和调整Icon和文字之间的间距。但是可以通过设置自定义布局的方式来实现我们想要的效果。需要我们自己来改变Tab切换的状态。还有一点需要注意:设置OnTabChangeListener 需要在添加Tab之前,不然第一次不会回调onTabSelected()方法,前面写过一片文章,从源码的角度分析这个坑,请看 TabLayout 踩坑之 onTabSelected没有被回调的问题

2 . BottomNavigationView + Fragment

除了用上面的TabLayout来实现底部导航栏,Google 也发布了专门用来实现底部导航的控件,那就是BottomNavigationView,BottomNavigationView符合Material 风格,有着炫酷的切换动画,我们来具体看一下。

布局和前面TabLayout 实现的布局长得差不多,把TabLayout换成 NavigationView 就行。这里就不贴布局文件了。BottomNavigationView 的Tab是通过menu 的方式添加的,看一下menu文件:

<?xml version="1.0" encoding="utf-8"?>

Activity 代码如下:

public class BottomNavigationViewActivity extends AppCompatActivity {
private BottomNavigationView mBottomNavigationView;
private Fragment []mFragments;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bottom_navigation_view_ac);

mFragments = DataGenerator.getFragments(“BottomNavigationView Tab”);

initView();
}

private void initView() {
mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_view);
//mBottomNavigationView.getMaxItemCount()

mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
onTabItemSelected(item.getItemId());
return true;
}
});

// 由于第一次进来没有回调onNavigationItemSelected,因此需要手动调用一下切换状态的方法
onTabItemSelected(R.id.tab_menu_home);
}

private void onTabItemSelected(int id){
Fragment fragment = null;
switch (id){
case R.id.tab_menu_home:
fragment = mFragments[0];
break;
case R.id.tab_menu_discovery:
fragment = mFragments[1];
break;

case R.id.tab_menu_attention:
fragment = mFragments[2];
break;
case R.id.tab_menu_profile:
fragment = mFragments[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}

代码比TabLayout 还简单,不用添加tab ,直接在xml 文件中设置menu属性就好了。效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

效果如上,切换的时候会有动画,效果还是不错的,除此之外,每个tab还可以对应不同的背景色,有兴趣的可以去试一下。但是有一点值得吐槽,动画好像还不能禁止,要是设计成可以禁止动画和使用切换动画这两种模式,随意切换就好了。

总结:BottomNavigationView 实现底部导航栏符合Material风格,有炫酷的切换动画,且动画还不能禁止,如果App 需要这种风格的底部导航栏的,可以用这个,实现起来比较简单。但是需要注意:BottomNavigatonView 的tab 只能是3-5个,多了或者少了是会报错。还有一点,第一次进入页面的时候不会调用onNavigationItemSelected 方法(不知道是不是 哪儿没有设置对?如果有同学发现可以,评论区告诉我一下),因此第一次需要手动调用 添加fragment的方法。

3 . FragmentTabHost + Fragment

FragmentTab Host 可能是大家实现底部导航栏用得最多的一种方式,特别是在TabLayout 和 BottomNavigation 出来之前,是比较老牌的实现底部导航栏的方式,相比前两个,FragmentTabHost 的实现稍微复杂一点,具体请看代码,

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
android:id=“@+id/home_container”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”

<android.support.v4.app.FragmentTabHost
android:id=“@android:id/tabhost”
android:layout_width=“match_parent”
android:layout_marginTop=“3dp”
android:layout_height=“50dp”>
<FrameLayout
android:id=“@android:id/tabcontent”
android:layout_width=“0dp”
android:layout_height=“0dp”

布局文件需要注意的地方:1,FragmentTabHost 里需要有一个id为@android:id/tabcontent的布局。2,FragmentTabHost的id 也是系统提供的id ,不能随便起。

Activity 代码如下:

public class FragmentTabHostActivity extends AppCompatActivity implements TabHost.OnTabChangeListener{
private Fragment []mFragments;
private FragmentTabHost mTabHost;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tab_host_ac_layout);
mFragments = DataGenerator.getFragments(“FragmentTabHost Tab”);
initView();

}

private void initView(){
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

// 关联TabHost
mTabHost.setup(this,getSupportFragmentManager(),R.id.home_container);
//注意,监听要设置在添加Tab之前
mTabHost.setOnTabChangedListener(this);

//添加Tab
for (int i=0;i<4;i++){
//生成TabSpec
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTabTitle[i]).setIndicator(DataGenerator.getTabView(this,i));
// 添加Tab 到TabHost,并绑定Fragment
Bundle bundle = new Bundle();
bundle.putString(“from”,“FragmentTabHost Tab”);
mTabHost.addTab(tabSpec,mFragments[i].getClass(),bundle);
}

//去掉Tab 之间的分割线
mTabHost.getTabWidget().setDividerDrawable(null);
//
mTabHost.setCurrentTab(0);
}

@Override
public void onTabChanged(String tabId) {
updateTabState();

}

/**

  • 更新Tab 的状态
    */
    private void updateTabState(){
    TabWidget tabWidget = mTabHost.getTabWidget();
    for (int i=0;i<tabWidget.getTabCount();i++){
    View view = tabWidget.getChildTabViewAt(i);
    ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
    TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
    if(i == mTabHost.getCurrentTab()){
    tabIcon.setImageResource(DataGenerator.mTabResPressed[i]);
    tabText.setTextColor(getResources().getColor(android.R.color.black));
    }else{
    tabIcon.setImageResource(mTabRes[i]);
    tabText.setTextColor(getResources().getColor(android.R.color.darker_gray));
    }
    }
    }
    }

FragmentTabHost 的实现就比前两个稍微复杂点。首先要通过setup()方法建立FragmentTabHost 与Fragment container的关联。然后设置Tab切换监听,添加Tab。需要主要一点,FragmentTabHost 默认在每个Tab之间有一跟竖直的分割先,调用下面这行代码去掉分割线:

//去掉Tab 之间的分割线
mTabHost.getTabWidget().setDividerDrawable(null);

onTabChanged 回调中需要手动设置每个Tab切换的状态。从
TabWidget 中取出每个子View 来设置选中和未选中的状态(跟前面的TabLayout 通过自定义布局添加Tab是一样的)。

效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意:有2点需要注意,1,通过FragmentTabHost添加的Fragment 里面收不到通过 setArgment() 传递的参数,要传递参数,需要在添加Tab 的时候通过Bundle 来传参,代码如下:

// 添加Tab 到TabHost,并绑定Fragment
Bundle bundle = new Bundle();
bundle.putString(“from”,“FragmentTabHost Tab”);

2,同前面说的TabLayout一样,要在添加Tab之前设置OnTabChangeListener 监听器,否则第一次收不到onTabChange回调。

总结:FragmentTabHost 实现底部导航栏比前面两种方式稍微复杂一点,需要注意的地方有点多,不然容易踩坑,但是它的稳定性和兼容性很好,在Android 4.x 时代就大量使用了。能配合Viewpager使用。

4 . RadioGroup + RadioButton + Fragment

RadioGroup +RadioButtom 是做单选的,RadioGroup 里面的View 只能选中一个。想一下我们要做的底部导航栏,是不是就是一个单选模式呢?当然是,每次只能选中一个页面嘛,因此用RadioGroup + RadioButton 来实现底部导航栏也是一种方式。

RadioButton 有默认的选中与非选中的样式,默认颜色是colorAcent,效果是这样的:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

因此我们要用RadioGroup+RadioButton 实现底部导航栏,首先,就是去掉它的默认样式,因此,我们来自定义一个style:

style 里面定义了RadioButton 的属性,现在我们直接给RadioButton 设置style 就好了,看先页面的布局文件:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
android:id=“@+id/home_container”
android:layout_width=“match_parent”
android:layout_height=“0dp”
android:layout_weight=“1”

<RadioGroup
android:id=“@+id/radio_group_button”
android:layout_width=“match_parent”
android:layout_height=“50dp”
android:orientation=“horizontal”
android:gravity=“center”
android:background=“@android:color/white”

很简单,添加一个RadioGroup 和 四个 RadioButton ,因为去掉了原来的样式,因此要设置我们每个RadioButton 显示的图标。

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android中可以使用BottomNavigationBar实现底部导航栏。下面简单介绍一下实现方法。 1. 添加依赖库 在app的build.gradle中添加如下依赖: ``` implementation 'com.aurelhubert:ahbottomnavigation:2.1.0' ``` 2. 在布局文件中添加BottomNavigationBar控件 ``` <com.aurelhubert.ahbottomnavigation.AHBottomNavigation android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:ah_bottom_navigation_active_item_color="@color/colorPrimary" app:ah_bottom_navigation_inactive_item_color="@android:color/darker_gray" app:ah_bottom_navigation_background_color="@android:color/white" app:ah_bottom_navigation_title_state="always_show" app:ah_bottom_navigation_use_theme_colors="false" /> ``` 其中,ah_bottom_navigation_active_item_color表示选中的item颜色,ah_bottom_navigation_inactive_item_color表示未选中的item颜色,ah_bottom_navigation_background_color表示BottomNavigationBar的背景色。 3. 创建Fragment 在MainActivity中创建不同的Fragment用于点击不同的BottomNavigationBar item时显示不同的内容。 4. 设置BottomNavigationBar的item 在MainActivity中设置BottomNavigationBar的item,并为每个item绑定对应的Fragment。 ``` private void setupBottomNav() { AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.tab_1, R.drawable.ic_home_black_24dp, R.color.colorPrimary); AHBottomNavigationItem item2 = new AHBottomNavigationItem(R.string.tab_2, R.drawable.ic_search_black_24dp, R.color.colorPrimary); AHBottomNavigationItem item3 = new AHBottomNavigationItem(R.string.tab_3, R.drawable.ic_settings_black_24dp, R.color.colorPrimary); bottomNavigation.addItem(item1); bottomNavigation.addItem(item2); bottomNavigation.addItem(item3); bottomNavigation.setDefaultBackgroundColor(Color.WHITE); bottomNavigation.setBehaviorTranslationEnabled(false); bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() { @Override public boolean onTabSelected(int position, boolean wasSelected) { if (!wasSelected) { switch (position) { case 0: getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new Fragment1()).commit(); break; case 1: getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new Fragment2()).commit(); break; case 2: getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new Fragment3()).commit(); break; } } return true; } }); } ``` 其中,AHBottomNavigationItem的构造函数参数分别为item的标题、图标和选中时的颜色。 5. 完成效果 运行程序即可看到底部导航栏的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值