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

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

服务器之家 - 编程语言 - Android - Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能

Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能

2022-07-28 11:31会飞的鱼儿 Android

这篇文章主要介绍了Android使用PagerBottomTabStrip实现底部菜单和顶部导航功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

PagerBottomTabStrip 是一个基本按谷歌Material Design规范完成的安卓底部导航栏控件

官方设计规范:https://www.google.com/design/spec/components/bottom-navigation.html

1、前言

(1)底部选择菜单功能应该是大多app都会用到的,实现方式也有很多种,比较笨的方法可以自定义一个xml,下方布局样式,每次点击不同按钮时跳转到不同activity,这个activity重新加载一下底部菜单

(2)今天介绍一个网上比较流行的底部菜单PagerBottomTabStrip功能,主要是这个菜单样式比价好看,而且点击时有点击效果,感觉还是不错的,而且也可以在菜单上加数字显示。功能算是比较全的吧。在GitHub上有2000多个star,所以选择它作为项目的底部菜单:https://github.com/tyzlmjj/PagerBottomTabStrip

(3)当然还有一个框架也不错,可以参考:https://github.com/ogaclejapan/SmartTabLayout

(4)效果图:

Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能

2、底部导航菜单功能代码

1、首先需要引用包:

?
1
compile 'me.majiajie:pager-bottom-tab-strip:2.2.5'

2、然后写一个主的activity和底部点击进入的两个Fragment:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class MainBottomTabActivity : BaseActivity() {
 private val mFragments = ArrayList<Fragment>()
 var number:Int=8
 override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.main_bottom_tab)
  //初始化Fragment
  initFragment()
  //初始化底部Button
  initBottomTab()
 }
 /**
  * 初始化四个导航页面
  */
 fun initFragment(){
  mFragments!!.add(TabBar1Fragment())
  mFragments!!.add(TabBar2Fragment())
  mFragments!!.add(TabBar1Fragment())
  //默认选中第一个
  val transaction = supportFragmentManager.beginTransaction()
  transaction!!.add(R.id.frameLayout, mFragments[0])
  transaction.commitAllowingStateLoss()
 }
 fun initBottomTab(){
  //这里要特别注意,pager_bottom_tab.custom()这句话就是选择自己需要的样式
  val navigationController = pager_bottom_tab.custom()
    .addItem(newItem(R.drawable.ic_restore_gray_24dp, R.drawable.ic_restore_teal_24dp, "消息"))
    .addItem(newItem(R.drawable.ic_favorite_gray_24dp, R.drawable.ic_favorite_teal_24dp, "工作"))
    .addItem(newItem(R.drawable.ic_nearby_gray_24dp, R.drawable.ic_nearby_teal_24dp, "我的"))
    .build()
  //设置消息数
  navigationController.setMessageNumber(1, number)
  //设置显示小圆点
  navigationController.setHasMessage(0, true)
  //底部按钮的点击事件监听
  navigationController.addTabItemSelectedListener(object : OnTabItemSelectedListener {
   override fun onSelected(index: Int, old: Int) {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.frameLayout, mFragments[index])
    transaction.commitAllowingStateLoss()
    if(index==0){
     navigationController.setHasMessage(0, false)
    }else if(index==1){
     navigationController.setMessageNumber(1, --number)
    }
   }
   override fun onRepeat(index: Int) {}
  })
 }
 //创建一个Item
 private fun newItem(drawable: Int, checkedDrawable: Int, text: String): BaseTabItem {
  val normalItemView = NormalItemView(this)
  normalItemView.initialize(drawable, checkedDrawable, text)
  normalItemView.setTextDefaultColor(Color.GRAY)
  normalItemView.setTextCheckedColor(-0xff6978)
  return normalItemView
 }
}

3、顶部导航功能

(1)定义activity的style

?
1
2
3
4
5
6
7
8
9
10
11
android:theme="@style/AppTheme"
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
 <!-- Customize your theme here. -->
 <item name="android:windowBackground">@drawable/splash_bg</item>
 <item name="colorPrimary">@color/white</item>
 <item name="colorPrimaryDark">@color/black</item>
 <item name="colorAccent">@color/blue</item>
 <item name="actionBarSize">48dip</item>
 <item name="android:textColorPrimary">@color/black</item>
 <item name="toolbarNavigationButtonStyle">@style/myToolbarNavigationButtonStyle</item>
</style>

(2)自定义顶部top.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/top_all"
 android:layout_width="match_parent"
 android:background="@color/white"
 android:orientation="vertical"
 android:focusable="true"
 android:focusableInTouchMode="true"
 android:layout_height="wrap_content">
 <LinearLayout
  android:id="@+id/top_navigation"
  android:layout_width="fill_parent"
  android:layout_height="40dp"
  android:orientation="horizontal"
  android:background="@color/grey"
  android:gravity="center_vertical">
  <!--上方导航条返回按钮-->
  <LinearLayout
   android:id="@+id/back_btn"
   android:layout_width="0dp"
   android:layout_weight="1"
   android:orientation="horizontal"
   android:gravity="center_vertical"
   android:layout_marginLeft="10dp"
   android:layout_height="match_parent">
   <ImageView
    android:layout_width="wrap_content"
    android:src="@drawable/back_btn"
    android:layout_marginLeft="5dp"
    android:layout_height="wrap_content" />
  </LinearLayout>
  <TextView
   android:id="@+id/navication_text"
   android:layout_width="0dp"
   android:layout_weight="5"
   android:layout_height="match_parent"
   android:layout_gravity="center"
   android:gravity="center"
   android:text="首页"
   android:textColor="@color/font_title"
   android:textSize="17dp"/>
  <!--文字显示-->
  <TextView
   android:id="@+id/second_transfer_text"
   android:layout_width="0dp"
   android:layout_weight="1"
   android:gravity="center"
   android:text="提交"
   android:textColor="@color/blue"
   android:visibility="invisible"
   android:textSize="@dimen/text_size_14"
   android:layout_height="match_parent" />
 </LinearLayout>
 <TextView
  android:layout_width="match_parent"
  android:background="@color/blue"
  android:layout_height="@dimen/px_2" />
</LinearLayout>

  (3)在BaseActivity中写方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
protected void setTitle(Object title,Boolean right,Object rightContent) {
 try {
  TextView titleText=findViewById(R.id.navication_text);
  titleText.setText((String)title);
  //显示右侧的文字按钮
  if(right){
   TextView rightText=findViewById(R.id.second_transfer_text);
   rightText.setVisibility(View.VISIBLE);
   rightText.setText((String)rightContent);
  }
 } catch (Exception e) {
  e.printStackTrace();
 }
}
/**
 * 设置点击左上角的返回事件.默认是finish界面
 */
protected void registerBack() {
 LinearLayout llLeft = findViewById(R.id.back_btn);
 llLeft.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
   BaseActivity.this.finish();
  }
 });
}

(4)继承BaseActivity,xml包含includetop.xml然后直接执行方法

?
1
2
3
<include layout="@layout/top"/>
setTitle("首頁",false,null)
registerBack()

4、总结

(1)好了,一个简单的底部菜单导航栏就做好了,是不是要比自己写挨个的点击事件要简单许多呢。

(2)在上里面的代码中我们使用了矢量图<Vector>功能,实现标准是美工提供.svg文件,通过studio直接转为xml文件的图片,优势是可伸缩和完美放大,体积小,需要知道一下。

原文链接:https://blog.csdn.net/f552126367/article/details/81742375

延伸 · 阅读

精彩推荐