先上图:
下面说下怎么使用:
1.引入Gradle依赖
//底部菜单栏
compile 'com.jpeng:JPTabBar:1.1.2'
2.在你的主页面XML,在适当位置添加下面代码
<com.jpeng.jptabbar.JPTabBar
android:id="@+id/main_jp_tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/backgroundColor"
app:TabAnimate="Scale"
app:TabNormalColor="@color/secondary_text"
app:TabSelectColor="@color/thrid_text"
app:TabTextSize="12sp" />
3.在你的Activity里面声明注解变量。(seleIcons和BadgeModes可以不声明,还有你要确保你全部数组的长度是一样的) 此处使用的是影射关系
@Titles
public static final int[] titles = {R.string.diary, R.string.find, R.string.mine};
@SeleIcons
public static final int[] selIcons = {R.drawable.ic_diary_sel, R.drawable.ic_find_sel, R.drawable.ic_setting_sel};
@NorIcons
public static final int[] icons = {R.drawable.ic_diary, R.drawable.ic_find, R.drawable.ic_setting};
经过上面的设置后,基本上就可以把一个底部的UI搭建了!
但还有一步,想达到Wechat那种渐变和自动切换ViewPager就使用这个方法。
经过上面的设置后,基本上就可以把一个底部的UI搭建了!
但还有一步,想达到Wechat那种渐变和自动切换ViewPager就使用这个方法。
//调用TabBar的setContainer方法,传入 ? extends ViewPager
mTabBar.setContainer(mViewpager);
下面展示一下详细的使用:
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">
<FrameLayout
android:id="@+id/main_fl_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/divider" />
<com.jpeng.jptabbar.JPTabBar
android:id="@+id/main_jp_tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/backgroundColor"
app:TabAnimate="Scale"
app:TabNormalColor="@color/secondary_text"
app:TabSelectColor="@color/thrid_text"
app:TabTextSize="12sp" />
</LinearLayout>
Activity:
package youli.com.example.administrator.doctor_demo.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import com.jpeng.jptabbar.JPTabBar;
import com.jpeng.jptabbar.OnTabSelectListener;
import com.jpeng.jptabbar.anno.NorIcons;
import com.jpeng.jptabbar.anno.SeleIcons;
import com.jpeng.jptabbar.anno.Titles;
import youli.com.example.administrator.doctor_demo.Fragment.Fragment_SY;
import youli.com.example.administrator.doctor_demo.Fragment.Fragment_WD;
import youli.com.example.administrator.doctor_demo.Fragment.Fragment_GT;
import youli.com.example.administrator.doctor_demo.R;
public class Homepage extends BaseActivity implements OnTabSelectListener {
private FrameLayout mainFlContainer;
private JPTabBar mainJpTabbar;
private Fragment[] fragments;
private int lastIndex = -1;
@Titles
public static final int[] titles = {R.string.diary, R.string.find, R.string.mine};
@SeleIcons
public static final int[] selIcons = {R.drawable.ic_diary_sel, R.drawable.ic_find_sel, R.drawable.ic_setting_sel};
@NorIcons
public static final int[] icons = {R.drawable.ic_diary, R.drawable.ic_find, R.drawable.ic_setting};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_homepage);
setSwipeBackEnable(false); //主 activity 可以调用该方法,禁止滑动删除
// getSwipeBackLayout().setEnableGesture(false);//禁止右滑退出
initView();
}
private void initView(){
mainFlContainer = (FrameLayout) findViewById(R.id.main_fl_container);
mainJpTabbar = (JPTabBar) findViewById(R.id.main_jp_tabbar);
mainJpTabbar.setTabListener(this);
fragments = new Fragment[3];
showFragment(0);
}
/**
* 用于显示Fragment的方法
*
* @param
*/
private void showFragment(int currentIndex) {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
if(currentIndex==lastIndex)
return;
if (lastIndex != -1) {
ft.hide(fragments[lastIndex]);
}
if (fragments[currentIndex] == null) {
switch (currentIndex){
case 0:
fragments[currentIndex] = Fragment_SY.newInstance();
break;
case 1:
fragments[currentIndex] = Fragment_GT.newInstance();
break;
case 2:
fragments[currentIndex] = Fragment_WD.newInstance();
break;
}
//添加fragment 并显示
ft.add(R.id.main_fl_container, fragments[currentIndex]);
}else {
//不等于空直接显示
ft.show(fragments[currentIndex]);
}
ft.commit();
lastIndex = currentIndex;
}
@Override
public void onTabSelect(int index) {
showFragment(index);
}
@Override
public void onClickMiddle(View middleBtn) {
}
}
Fragment:
package youli.com.example.administrator.doctor_demo.Fragment;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import youli.com.example.administrator.doctor_demo.R;
public class Fragment_SY extends Fragment {
private static Fragment_SY fragment_sy = null;
public static Fragment_SY newInstance() {
if (fragment_sy == null)
fragment_sy = new Fragment_SY();
return fragment_sy;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_fragment__sy, container, false);
}
}
好了 到此结束 ,代码很少 很简单就搭建了一个底部菜单栏