TabBar这个名字相信很多学过一点IOS程序员都知道它是用来干嘛的,但本人也并非擅长开发IOS程序员,只是略懂略懂....这是一个很强大的TabBar,可满足很多需求。用起来也非常简单,在oncreate只调用一行代码就把UI布局和切换页面功能基本都实现了。具体实现的功能,请看效果图:
使用方法:
1.引入Gradle依赖
repositories {
jcenter()
}
dependencies{
compile 'com.jpeng:JPTabBar:1.0.4'
}
2.在你的主页面XML,在适当位置添加下面代码
<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"
/>
3.在你的Activity里面声明注解变量。(seleIcons和BadgeModes可以不声明,还有你要确保你全部数组的长度是一样的)
//设置标题@Titlesprivate static final String[]mTitles={"微信","通讯录","发现","我"};
//设置选中图标@SeleIconsprivate static final int[]mSelectIcons={R.mipmap.al_,R.mipmap.al8,R.mipmap.alb,R.mipmap.ald};
//设置未选中图标@NorIconsprivate 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主要方法:
/** * 设置自定义Tab切换动画 */ public void setCustomAnimate(Animatable customAnimate);
/** 显示BadgeView ,传入字符串 * 当然还有一个重载方法,第二个参数为int,设置消息数量 * 传入""字符串显示圆点 */ public void ShowBadge(int position,String text); /** * 隐藏BadgeView */ public void HideBadge(int position); /** * 切换Tab页面,是否带动画 */ public void setSelectTab(int index, boolean animated); /** * 设置点击TabBar事件的观察者 */ public void setTabListener(OnTabSelectListener listener); /** * 设置badgeView消失的回调事件 */ public void setDismissListener(BadgeDismissListener listener);
结点说明:
结点名字 结点说明 参数类型 默认值
TabHeight TabBar的高度,将会覆盖layout_height的设置 dimension 56dp
TabNormalColor 字体和图标的未选中颜色 color 0xffAEAEAE(灰色)
TabSelectColor 字体和图标的选中的颜色 color 0xff59D9B9(青色)
TabTextSize Tab底部文件大小 dimension 14sp
TabIconSize Tab图标的大小 dimension 24dp
TabIconFilter 设置图标是否随着字体颜色而改变 boolean true
TabMargin 设置图标距离上面和文字距离下面的距离 dimension 8dp
TabSelectBg 设置TabBarItem选中的背景颜色 color 透明
TabDuration Tab切换的动画时间 Integer 500
TabAnimate Tab切换的动画类型 enum Flip
TabMiddleIcon Tab中间的图标 drawable 无
BadgeColor 徽章的背景颜色 color #f00(红色)
BadgeDraggable 徽章是否可以拖动 boolean false
BadgePadding 徽章的背景扩展距离 dimension 4dp
BadgeTextSize 徽章显示的字体大小 dimension 11dp
BadgeMargin 徽章距离右边边缘的间隔 dimension 9dp
注意事项
1.假如你已经给TabBar setContainer,不要setOnPageChangeListener给ViewPager
/** *如果你前面已经给TabBar设置了容器,然后调用这个方法的话,类似WeChat那种拖动渐变效果以及自动切换页面将会失效 *假如你要监听页面改变事件,可以使用TabListener */ mPager.setOnPageChangeListener(this);
2.假如你要实现中间凸出的按钮,必须要在主界面最外围的父结点设置 android:clipChildren="false",否则会遮盖
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns: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>
效果图：
