前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android使用BottomNavigationBar实现底部导航栏

Android使用BottomNavigationBar实现底部导航栏

作者头像
砸漏
发布2020-11-04 10:22:37
2K0
发布2020-11-04 10:22:37
举报
文章被收录于专栏:恩蓝脚本

本文实例为大家分享了Android实现底部导航栏的具体代码,供大家参考,具体内容如下

展示

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

DE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

1在Gradle中添加

代码语言:javascript
复制
compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5'

2布局实现

代码语言:javascript
复制
 <com.ashokvarma.bottomnavigation.BottomNavigationBar
 android:layout_gravity="bottom"
 android:id="@+id/bottom_navigation_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"/ 

3类中Activity中添加BottomNavigationItem

代码语言:javascript
复制
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
 
bottomNavigationBar
  .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
  .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
  .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
  .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
  .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
  .initialise();

4设置事件监听器TabChangeListener

代码语言:javascript
复制
 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
  @Override
  public void onTabSelected(int position) {
  }
  @Override
  public void onTabUnselected(int position) {]
  }
  @Override
  public void onTabReselected(int position) {
  }
 });

5.代码实现

代码语言:javascript
复制
package com.android.xiaobai; 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentTransaction; 
import android.support.v7.app.AppCompatActivity; 
import android.util.Log; 
import com.ashokvarma.bottomnavigation.BottomNavigationBar; 
import com.ashokvarma.bottomnavigation.BottomNavigationItem; 
import java.util.ArrayList; 
import fragment.ContactsFragment; 
import fragment.DongtaiFragment; 
import fragment.MsgFragment; 
/** 
* Created by xiaobai on 2018/1/31/031. 
*/ 
public class MessageActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener { 
private ArrayList<Fragment  fragments; 
private BottomNavigationBar bottomNavigationBar; 
private MsgFragment msgFragment; 
private ContactsFragment contactsFragment; 
private DongtaiFragment dongtaiFragment; 
private FragmentManager fragmentManager; 
private FragmentTransaction transaction; 
int lastSelectedPosition = 0; 
@Override 
protected void onCreate(@Nullable Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activty_message); 
bottomNavigationBar = findViewById(R.id.bottom_navigation_bar); 
init(); 
} 
private void init() { 
//要先设计模式后再添加图标! 
//设置按钮模式 MODE_FIXED表示固定 MODE_SHIFTING表示转移 
bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED); 
//设置背景风格 
// BACKGROUND_STYLE_STATIC表示静态的 
//BACKGROUND_STYLE_RIPPLE表示涟漪的,也就是可以变化的 ,跟随setActiveColor里面的颜色变化 
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE); 
//添加并设置图标、图标的颜色和文字 
bottomNavigationBar 
.addItem(new BottomNavigationItem(R.drawable.im_botton_message, "消息")).setActiveColor(R.color.blue) 
.addItem(new BottomNavigationItem(R.drawable.im_botton_contacts, "联系人")).setActiveColor(R.color.red) 
.addItem(new BottomNavigationItem(R.drawable.im_botton_dongtai, "动态")).setActiveColor(R.color.orign) 
.setFirstSelectedPosition(lastSelectedPosition ) 
.initialise(); 
bottomNavigationBar.setTabSelectedListener(this); 
setDefaultFragment(); 
} 
//设置初始界面 
private void setDefaultFragment() { 
fragmentManager = getSupportFragmentManager(); 
transaction = fragmentManager.beginTransaction(); 
transaction.replace(R.id.layFrame, MsgFragment.newInstance("消息")); 
transaction.commit(); 
} 
@Override 
public void onTabSelected(int position) { 
fragmentManager = getSupportFragmentManager(); 
transaction = fragmentManager.beginTransaction(); 
switch (position) { 
case 0: 
if (msgFragment == null) { 
msgFragment = MsgFragment.newInstance("消息"); 
} 
transaction.replace(R.id.layFrame, msgFragment); 
break; 
case 1: 
if (contactsFragment == null) { 
contactsFragment = ContactsFragment.newInstance("联系人"); 
} 
transaction.replace(R.id.layFrame, contactsFragment); 
break; 
case 2: 
if (dongtaiFragment == null) { 
dongtaiFragment = DongtaiFragment.newInstance("动态"); 
} 
transaction.replace(R.id.layFrame, dongtaiFragment); 
break; 
default: 
break; 
} 
// 事务提交 
transaction.commit(); 
} 
@Override 
public void onTabUnselected(int position) { 
Log.d("dongtaiFragment", "onTabUnselected() called with: " + "position = [" + position + "]"); 
} 
@Override 
public void onTabReselected(int position) { 
} 
} 
代码语言:javascript
复制
package fragment; 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 
import com.android.xiaobai.R; 
/** 
* Created by xiaobai on 2018/1/31/031. 
*/ 
public class MsgFragment extends BaseFragment { 
/** 
* 标志位,标志已经初始化完成 
*/ 
private boolean isPrepared; 
/** 
* 是否已被加载过一次,第二次就不再去请求数据了 
*/ 
private boolean mHasLoadedOnce; 
TextView textView; 
@Nullable 
@Override 
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
if (mView == null) { 
// 需要inflate一个布局文件 填充Fragment 
mView = inflater.inflate(R.layout.fragment_msg, container, false); 
initView(); 
isPrepared = true; 
// 实现懒加载 
lazyLoad(); 
} 
//缓存的mView需要判断是否已经被加过parent, 如果有parent需要从parent删除,要不然会发生这个mView已经有parent的错误。 
ViewGroup parent = (ViewGroup) mView.getParent(); 
if (parent != null) { 
parent.removeView(mView); 
} 
return mView; 
} 
/** 
* 初始化控件 
*/ 
private void initView() { 
} 
@Override 
public void lazyLoad() { 
if (!isPrepared || !isVisible || mHasLoadedOnce) { 
return; 
} 
//填充各控件的数据 
mHasLoadedOnce = true; 
} 
public static MsgFragment newInstance(String param1) { 
MsgFragment fragment = new MsgFragment(); 
Bundle args = new Bundle(); 
args.putString("agrs1", param1); 
fragment.setArguments(args); 
return fragment; 
} 
} 
代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
tools:context=".MessageActivity"  
<FrameLayout 
android:id="@+id/layFrame" 
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  
代码语言:javascript
复制
package fragment; 
import android.support.v4.app.Fragment; 
import android.view.View; 
/** 
* Created by xiaobai on 2018/1/31/031. 
*/ 
public abstract class BaseFragment extends Fragment { 
/** 
* Fragment当前状态是否可见 
*/ 
public boolean isVisible; 
/** 
* inflate布局文件 返回的view 
*/ 
public View mView; 
/** 
* 简化 findViewById 
* 
* @param viewId 
* @param <T  
* @return 
*/ 
protected <T extends View  T find(int viewId) { 
return (T) mView.findViewById(viewId); 
} 
/** 
* setUserVisibleHint是在onCreateView之前调用的 
* 设置Fragment可见状态 
*/ 
@Override 
public void setUserVisibleHint(boolean isVisibleToUser) { 
super.setUserVisibleHint(isVisibleToUser); 
/** 
* 判断是否可见 
*/ 
if (getUserVisibleHint()) { 
isVisible = true; 
onVisible(); 
} else { 
isVisible = false; 
onInvisible(); 
} 
} 
/** 
* 可见 
*/ 
private void onVisible() { 
lazyLoad(); 
} 
/** 
* 不可见 
*/ 
private void onInvisible() { 
} 
/** 
* 延迟加载 
* 子类必须重写此方法 
*/ 
public abstract void lazyLoad(); 
} 

BottomNavigationBar 图标和文字的间距:

在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding(默认是10dp,值越小,间距越大。适合的模式是BottomNavigationBar.MODE_FIXED)

如果模式是BottomNavigationBar.MODE_SHIFTING也是一样,复写和修改相关的参数

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档