源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

ANDROID BottomNavigationBar底部导航栏的实现示例

  • 时间:2021-08-30 08:50 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:ANDROID BottomNavigationBar底部导航栏的实现示例
第一种介绍的就是使用开源库,因为使用开源库最简单,也更加的符合我们的审美标准,同时BottomNavigationBar还是符合当前的Material Design标准的。 [b]效果展示[/b] [img]http://files.jb51.net/file_images/article/201710/201710230858201.png[/img] [img]http://files.jb51.net/file_images/article/201710/201710230858202.png[/img] [img]http://files.jb51.net/file_images/article/201710/201710230858203.png[/img] [img]http://files.jb51.net/file_images/article/201710/201710230858204.png[/img] [b]依赖[/b]
compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
[b]布局文件[/b] activity_main.xml
<?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:orientation="vertical">

  <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

  <com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"/>

</LinearLayout>

对于下面将要使用到四个Fragment里面的布局文件 1.fragment_index.xml 2.fragment_map.xml 3.fragment_love.xml 4.fragment_person.xml 只需要将其中的android:text属性中的内容进行修改以做区分
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center">

  <TextView
    android:text="主页"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

Java代码
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

  BottomNavigationBar mBottomNavigationBar;
  private IndexFragment indexFragment;
  private MapFragment mapFragment;
  private LoveFragment loveFragment;
  private PersonFragment personFragment;
  private BadgeItem badgeItem;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initBadge();
    setDefaultFragment();
    InitNavigationBar();
  }

  private void InitNavigationBar() {
    mBottomNavigationBar = (BottomNavigationBar)findViewById(R.id.bottom_navigation_bar);
    mBottomNavigationBar.setTabSelectedListener(this);
    mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
    mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
    mBottomNavigationBar
        .addItem(new BottomNavigationItem(R.drawable.icon_index,"首页").setActiveColorResource(R.color.red))
        .addItem(new BottomNavigationItem(R.drawable.icon_map,"地图").setActiveColorResource(R.color.blue))
        .addItem(new BottomNavigationItem(R.drawable.icon_love,"关注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem))
        .addItem(new BottomNavigationItem(R.drawable.icon_person,"个人").setActiveColorResource(R.color.green))
        .setFirstSelectedPosition(0)
        .initialise();
  }

  public void initBadge()
  {
    badgeItem = new BadgeItem()
          .setBorderWidth(2)
          .setBorderColor("#ff0000")
          .setBackgroundColor("#ff0000")
          .setGravity(Gravity.RIGHT| Gravity.TOP)
          .setText("2")
          .setTextColor("#ffffff")
          .setAnimationDuration(2000)
          .setHideOnSelect(true);
  }
  private void setDefaultFragment() {
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    indexFragment = new IndexFragment();
    transaction.replace(R.id.fragment_container, indexFragment);
    transaction.commit();
  }

  @Override
  public void onTabSelected(int position) {
    Log.d("onTabSelected", "onTabSelected: " + position);
    FragmentManager fm = getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    switch (position) {
      case 0:
        if (indexFragment == null) {
          indexFragment = new IndexFragment();
        }
        transaction.replace(R.id.fragment_container, indexFragment);
        break;
      case 1:
        if (mapFragment== null) {
          mapFragment = new MapFragment();
        }
        transaction.replace(R.id.fragment_container, mapFragment);
        break;
      case 2:
        if (loveFragment == null) {
          loveFragment = new LoveFragment();
        }
        transaction.replace(R.id.fragment_container,loveFragment);
        break;
      case 3:
        if (personFragment == null) {
          personFragment = new PersonFragment();
        }
        transaction.replace(R.id.fragment_container,personFragment);
        break;
      default:
        break;
    }
    // 事务提交
    transaction.commit();
  }

  @Override
  public void onTabUnselected(int position) {
    Log.d("onTabUnselected", "onTabUnselected: " + position);
  }

  @Override
  public void onTabReselected(int position) {
    Log.d("onTabReselected", "onTabReselected: " + position);
  }
}

[b]代码分析[/b] [b]1.初始化导航条样式 [/b] 对于Mode和BackgroundStyle各有3种选择 [b]Mode[/b] [list=1] [*]在xml代码使用android:bnbMode属性[/*] [*]在Java代码中使用setMode方法[/*] [/list] MODE_DEFAULT:如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式。 MODE_FIXED:填充模式,未选中的Item会显示文字,没有换挡动画。 MODE_SHIFTING:换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画。 [b]BackgroundStyle[/b] [list=1] [*]在xml代码使用android:bnbBackgroundStyle属性[/*] [*]在Java代码中使用setBackgroundStyle方法[/*] [/list] BACKGROUND_STYLE_DEFAULT:如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。 BACKGROUND_STYLE_STATIC:点击的时候没有水波纹效果 BACKGROUND_STYLE_RIPPLE:点击的时候有水波纹效果 [b]2.初始化导航条条目[/b] 需要几个就添加几个,包含图片和图片下方代表的文字以及设定被选中时产生效果的颜色。
[url=http://xiazai.jb51.net/201710/yuanma/BottomBarOne_jb51.rar][u]BottomBarOne_jb51.rar[/u][/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部