Fragment+Tablayout + BottomTabBar双导航栏实现

https://mp.youkuaiyun.com/postedit

点击打开链接.可以打赏一下或者加个关注

 

    //底部导航
    compile 'com.hjm:BottomTabBar:1.1.1'
    //tablayout
    implementation 'com.android.support:design:26.+'
    compile 'com.android.support:support-v4:26.+'

 

 //控件布局（布局是在实现底部导航栏的类布局里）

 

<?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"
    tools:context="com.month1.MainActivity">

    <com.hjm.bottomtabbar.BottomTabBar
        android:id="@+id/bottom_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    </com.hjm.bottomtabbar.BottomTabBar>

</LinearLayout>

//Tablayout布局是放在实现顶部导航栏类的布局（暂定为A,下面有代码）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
 >
 <android.support.design.widget.TabLayout
     android:id="@+id/tablayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" />

 <android.support.v4.view.ViewPager
     android:id="@+id/viewpager"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:layout_weight="1">
 </android.support.v4.view.ViewPager>
</LinearLayout>

//框架布局就是这样了，然后是代码操作，在这里我做的是抽取基类的操作

 //抽取的是Activity的基类

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by lenovo on 2018/4/25.
 */

public abstract class BaseActivity<T> extends AppCompatActivity {
    public T persenter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(getViewID());
        persenter = getPersenter();
        initView();
        initData();

    }

    protected abstract int getViewID();
    protected abstract void initView();
    protected abstract void initData();
    protected abstract T getPersenter();
}

//抽取Fragment的基类

 


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * Created by lenovo on 2018/4/25.
 */

public abstract class BaseFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = LayoutInflater.from(getContext()).inflate(getLayoutID(),container,false);
        initView(view);
        initData();
        return view;

    }
    protected abstract int getLayoutID();
    protected abstract void initView(View view);
    protected abstract void initData();
}

 

//基类抽取完成后先看MainActivity类

 

public class MainActivity extends BaseActivity{
    //得到底部导航的控件并操作
    private BottomTabBar bottomTabBar;

    @Override
    protected int getViewID() {
          return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        bottomTabBar= findViewById(R.id.bottom_tab_bar);
    }


    @Override
    protected Object getPersenter() {
        return null;
    }


    @Override
    protected void initData() {
        bottomTabBar.init(getSupportFragmentManager())
                .setImgSize(50,50)
                .setFontSize(8)
                .setTabPadding(4,6,10)
                .setChangeColor(Color.RED, Color.DKGRAY)

                //fragment看下面的模板
                .addTabItem("首页",R.mipmap.a, OneFragment.class)
                .addTabItem("优惠",R.mipmap.b, TwoFragment.class)
                .addTabItem("分类",R.mipmap.c, TreeFragment.class)
                .addTabItem("我的",R.mipmap.d, ForFragment.class)
                .isShowDivider(false)
                .setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {
                    @Override
                    public void onTabChange(int position, String name) {

                    }
                });
    }




}

//实现底部导航的布局就完成了（Fragment类大家就给大家一个模板，其他的Fragment类也一下），同时也实现了顶部导航

public class OneFragment extends BaseFragment {


    private String[] titles = {"页面1", "页面2"};
    private TabLayout tablayout;
    private ViewPager viewpager;
    private List<Fragment> fragments;
    private MyAdapter adapter;

    @Override
    protected int getLayoutID() {
        return R.layout.layout_one;
    }

    @Override
    protected void initView(View view) {
        tablayout = view.findViewById(R.id.tablayout);
        viewpager = view.findViewById(R.id.viewpager);
        //页面，数据源
        fragments = new ArrayList<>();
        fragments.add(new OneFragment1());
        fragments.add(new OneFragment2());
         //ViewPager的适配器
        adapter = new MyAdapter(getActivity().getSupportFragmentManager());
        viewpager.setAdapter(adapter);
        //绑定
        tablayout.setupWithViewPager(viewpager);

    }

    @Override
    protected void initData() {

    }
       class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }

        //重写这个方法，将设置每个Tab的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

//顶部航的类

OneFragment1 ，它是在OneFragment中的

public class OneFragment1 extends BaseFragment {
    @Override
    protected int getLayoutID() {
        return R.layout.layoutone1;
    }

    @Override
    protected void initView(View view) {

    }

    @Override
    protected void initData() {

    }
}