TabBar这个名字相信很多学过一点IOS程序员都知道它是用来干嘛的,但本人也并非擅长开发IOS程序员,只是略懂略懂....这是一个很强大的TabBar,可满足很多需求。用起来也非常简单,在oncreate只调用一行代码就把UI布局和切换页面功能基本都实现了。具体实现的功能,请看效果图:

使用方法:

 repositories { jcenter()   }   dependencies{     compile 'com.jpeng:JPTabBar:1.0.4'   }

<com.jpeng.jptabbar.JPTabBar
    android:layout_alignParentBottom="true"
    android:id="@+id/tabbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff"
    app:TabHeight="56dp"
    app:BadgeDraggable="true"
    app:TabAnimate="Jump"
    app:BadgePadding="4dp"
    app:BadgeMargin="5dp"
    app:BadgeTextSize="10dp"
    />

//设置标题
@Titles
private static final String[] mTitles={"微信","通讯录","发现","我"};//设置选中图标
@SeleIcons
private static final int[] mSelectIcons={R.mipmap.al_,R.mipmap.al8,R.mipmap.alb,R.mipmap.ald};//设置未选中图标
@NorIcons
private static final int[] mNormalIcon={R.mipmap.ala,R.mipmap.al9,R.mipmap.alc,R.mipmap.ale};

经过上面的设置后,基本上就可以把一个底部的UI搭建了!
但还有一步,想达到Wechat那种渐变和自动切换ViewPager就使用这个方法：

 mTabBar.setContainer(mVp);  //mVp是ViewPager对象

方法和节点说明:

JPTabBar主要方法:

结点说明:

注意事项

1.假如你已经给TabBar setContainer,不要setOnPageChangeListener给ViewPager

/**    *如果你前面已经给TabBar设置了容器,然后调用这个方法的话,类似WeChat那种拖动渐变效果以及自动切换页面将会失效    *假如你要监听页面改变事件,可以使用TabListener   */  mPager.setOnPageChangeListener(this);

2.假如你要实现中间凸出的按钮,必须要在主界面最外围的父结点设置 android:clipChildren="false",否则会遮盖

  <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:jp="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"android:gravity="bottom"android:orientation="vertical">

下面是实现微信底部导航栏的完整代码：

activity的xml代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.cf.android_navigtionbottombar.MainActivity"><android.support.v4.view.ViewPager
       android:id="@+id/vp"
       android:layout_above="@+id/tabbar"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/><com.jpeng.jptabbar.JPTabBar
       android:layout_alignParentBottom="true"
       android:id="@+id/tabbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="#fff"
       app:TabHeight="56dp"
       app:BadgeDraggable="true"
       app:TabAnimate="Jump"
       app:BadgePadding="4dp"
       app:BadgeMargin="5dp"
       app:BadgeTextSize="10dp"
       />
</RelativeLayout>

activity的java代码：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;import com.jpeng.jptabbar.JPTabBar;
import com.jpeng.jptabbar.anno.NorIcons;
import com.jpeng.jptabbar.anno.SeleIcons;
import com.jpeng.jptabbar.anno.Titles;import layout.HomeFragment;public class MainActivity extends AppCompatActivity {private static final int ITEMPAGER = 4;private ViewPager mVp;private JPTabBar mTabBar;@Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());mVp.setAdapter(adapter);mTabBar.setContainer(mVp);}private void initView() {mVp = (ViewPager) findViewById(R.id.vp);mTabBar = (JPTabBar) findViewById(R.id.tabbar);}//设置标题
    @Titles
    private static final String[] mTitles={"微信","通讯录","发现","我"};//设置选中图标
    @SeleIcons
    private static final int[] mSelectIcons={R.mipmap.al_,R.mipmap.al8,R.mipmap.alb,R.mipmap.ald};//设置未选中图标
    @NorIcons
    private static final int[] mNormalIcon={R.mipmap.ala,R.mipmap.al9,R.mipmap.alc,R.mipmap.ale};//Fragment适配器
    private class ViewPagerAdapter extends FragmentStatePagerAdapter{public ViewPagerAdapter(FragmentManager fm) {super(fm);}@Override
        public Fragment getItem(int position) {Bundle bundle=new Bundle();bundle.putInt("position",position+1);HomeFragment fragment = new HomeFragment();fragment.setArguments(bundle);return fragment;}@Override
        public int getCount() {return ITEMPAGER;}}
}

Fragment Java代码：

public class HomeFragment extends Fragment {public HomeFragment() {// Required empty public constructor
    }@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_home, container, false);initView(view);return view;}private void initView(View view) {TextView tvShow = (TextView) view.findViewById(R.id.tvShow);Bundle bundle = getArguments();int position = bundle.getInt("position");tvShow.setText("第"+position+"个Fragment");}}

Fragment Xml代码：

<FrameLayout 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"
    tools:context="layout.HomeFragment"><!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:id="@+id/tvShow"
        android:text="@string/hello_blank_fragment" /></FrameLayout>

效果图：

JFTabBar android强大的底部导航栏框架 （微信底部导航栏效果）相关推荐

1. android模仿ios滚动,模仿iOS版微信的滑动View效果

   前言 最近经常交替使用Android和iOS手机.对于两个系统,从我们常用的列表来看,Android一般的列表菜单是通过长按出来的,而iOS是通过滑动出现的.比如我们常用的微信,对于Android版本 ...

2. 精通Android自定义View(二十)自定义仿微信扫一扫效果

   1 效果 2 源码 /*** 自动上下扫描*/public class AutoScannerView extends View {private static final String TAG = ...

3. Android仿微信底部菜单栏+今日头条顶部导航栏

   背景 Android应用几乎都会用到底部菜单栏,在Material Design还没有出来之前,TabHost等技术一直占主流,现在Google新sdk中提供了TabLayout类可以便捷的做出底部菜 ...

4. php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果

   Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...

5. 【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

   文章目录 一.BottomNavigationBar 底部导航栏 二.PageView 滑动页面 三.BottomNavigationBar 与 PageView 关联 四.完整代码示例 1.核心导航 ...

6. android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...

   如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...

7. h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结

   Aphorism grow in errors overview 最近在写一个 移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条 想到的实现方案: 通过 ...

8. android高仿微信底部渐变导航栏

   最近有很多人问微信底部的变色卡片导航是怎么做的,我在网上看了好几个例子,都是效果接近,都存有一些差异,自己琢磨也做了一个,几乎99%的还原,效果还不错吧 仔细观察微信图片,发现他有两部分内容,外面的边 ...

9. Android 11.0 SystemUI导航栏固定在底部显示的修改

   目录 1.概述 2.SystemUI导航栏固定在底部显示的修改的相关代码

最新文章

1. bash shell 合并文件
2. 3.1.1蛮力法之选择排序
3. UOJ#454-[UER #8]打雪仗【通信题】
4. python调用数据库数据创建函数_Pyhton应用程序数据库函数封装
5. 霍金去世，巨星陨落！谨以此文缅怀霍金
6. 14004.xilinx自动打包image.ub脚本
7. 3星|《增长黑客》：增长黑客是一个牵强的概念
8. 英特尔的指令集体系结构_英特尔下一代Tremont的Jasper Lake系产品面世
9. ibatis 核心原理解析
10. 如何在计算机上设置禁止游戏,如何禁止玩电脑游戏 屏蔽网络游戏的方法
11. python 断言详细讲解用法及其案例_python断言_python 断言_python断言案例 - 云+社区 - 腾讯云...
12. 物联网新零售项目 新零售制胜之道
13. Azure BareMetal 裸金属
14. 小程序开发入门常见小问题-(1)
15. mma8653驱动编程
16. 【无标题】研究过程中的一些经验感悟
17. 笔试 - 邪恶数字4与7
18. 史上最详细的Buffer Overflow学习笔记
19. 有感“IBM将大规模裁员11万人左右，幅度高达26%”
20. 字符编码的故事(ASCII ISO GBK GB2312 UTF-8)

热门文章

1. 移动应用与开发（Mobile Application Development）
2. vue中axios开启cookies
3. 关于c语言的聊天图片不用打字搞笑,最美聊天图片不用打字就可以聊天的图片...
4. 路由实验总结（思科6.2）
5. 迁移学习maskrcnn
6. 【Linux】进程概念（下）
7. 扬帆优配|五千亿巨头一度涨停！ 4天3倍，港股又现“狂飙”股！
8. 汇编：实模式-＞保护模式-＞实模式 的切换步骤
9. pushlet源码分析
10. 10岁儿子写的两首诗