最近在从项目里总结一些知识点,虽然删掉了一些代码,不过里面还是有一点点代码是写其他东西的,篇幅问题一些布局跟适配器之类的就没弄上去,虽然不是一个单纯的BottomNavigationBar Demo,不过还是可以参考一下的,使用的步骤步骤阿之类的。
总的来说:挺方便的,动画效果也蛮好。大概用法就是在先添加依赖,设计完BottomNavigationBar后,在按钮响应那里加载对应的Fragment。
一、出处:
https://github.com/Ashok-Varma/BottomNavigation GitHub真是个好东西
二、使用的方法
1在Gradle中添加依赖
compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’
2布局实现,直接用
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
3类中Activity中添加BottomNavigationItem
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_add_white_24dp, "创建").setActiveColorResource(R.color.orange))
.addItem(new BottomNavigationItem(R.drawable.ic_group_add_black_24dp, "加入").setActiveColorResource(R.color.orange))
.addItem(new BottomNavigationItem(R.drawable.courselocation, "我").setActiveColorResource(R.color.orange))
.setFirstSelectedPosition(0)
.initialise();
4设置事件监听器TabChangeListener
bottomNavigationBar.setTabSelectedListener(this);
实现几个默认方法:
public void onTabSelected(int position) {
//在里面写加载对应Fragment的功能
}
@Override
public void onTabUnselected(int position) {]
}
@Override
public void onTabReselected(int position) {
}
三、项目里的实现
Activity:
public class MainActivity extends BaseActivity implements BottomNavigationBar.OnTabSelectedListener {
private ArrayList<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题拦
setContentView(R.layout.activity_main);
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
bottomNavigationBar
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC
);
BadgeItem numberBadgeItem = new BadgeItem()
.setBorderWidth(4)
.setBackgroundColor(Color.RED)
.setText("5")
.setHideOnSelect(true);
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_add_white_24dp, "创建").setActiveColorResource(R.color.orange))
.addItem(new BottomNavigationItem(R.drawable.ic_group_add_black_24dp, "加入").setActiveColorResource(R.color.orange))
.addItem(new BottomNavigationItem(R.drawable.courselocation, "我").setActiveColorResource(R.color.orange))
.setFirstSelectedPosition(0)
.initialise();
fragments = getFragments();
setDefaultFragment();
bottomNavigationBar.setTabSelectedListener(this);
}
/**
* 设置默认的
*/
private void setDefaultFragment() {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.replace(R.id.layFrame, AddFragment.newInstance("Home"));
transaction.commit();
}
//将Fragment加入fragments里面
private ArrayList<Fragment> getFragments() {
ArrayList<Fragment> fragments = new ArrayList<>();
fragments.add(AddFragment.newInstance("添加课程"));
fragments.add(JoinFragment.newInstance("加入课程"));
fragments.add(AccountFragment.newInstance("我",this));
return fragments;
}
//点击时加载对应的fragment
@Override
public void onTabSelected(int position) {
if (fragments != null) {
if (position < fragments.size()) {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
Fragment fragment = fragments.get(position);
ft.replace(R.id.layFrame,fragment);
ft.commitAllowingStateLoss();
}
}
}
@Override
public void onTabUnselected(int position) {
if (fragments != null) {
if (position < fragments.size()) {
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
Fragment fragment = fragments.get(position);
ft.remove(fragment);
ft.commitAllowingStateLoss();
}
}
}
@Override
public void onTabReselected(int position) {
}
}
Fragment的构造:(以AccountFragment为例,其他的类似)
public class AccountFragment extends Fragment{
private List<StringAndInt> list;
private ListView item_list;
private static Context mcontext;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.account_fragment, container, false);
item_list= (ListView) view.findViewById(R.id.item_list);
initList();
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
public static AccountFragment newInstance(String content,Context context) {
Bundle args = new Bundle();
args.putString("ARGS", content);
AccountFragment fragment = new AccountFragment();
fragment.setArguments(args);
mcontext=context;
return fragment;
}
private void initList(){
list=new ArrayList<StringAndInt>();
list.add(new StringAndInt("个人信息",R.drawable.person,true));
list.add(new StringAndInt("商务合作",R.drawable.business,false));
list.add(new StringAndInt("我的记录",R.drawable.sign,true));
list.add(new StringAndInt("使用帮助",R.drawable.help,false));
list.add(new StringAndInt("用户反馈",R.drawable.feedback,false));
list.add(new StringAndInt("关于我们",R.drawable.about_us,true));
list.add(new StringAndInt("设置",R.drawable.setting_,true));
ListitemAdaper itemListAdapter=new ListitemAdaper(mcontext,list);
item_list.setAdapter(itemListAdapter);
}
}
主活动xml布局:
<?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.example.wangchang.testbottomnavigationbar.MainActivity">
<FrameLayout
android:id="@+id/layFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<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>
效果图:看下面那三个导航钮,就是那样效果,上面的UI不用管它