2017-04-15

TabLayout + ViewPager 实现微信主页面切换效果

ext {
    // 配置项目基础信息
    config = [
            package          : "cn.kgc.life",
            buildToolsVersion: "25.0.1",
            compileVersion   : 24,
            minSdk           : 15,
            targetSdk        : 24,
            versionCode      : 1,
            versionName      : "1.0",
    ]
    // 配置项目依赖 jar 的版本
    lib = [
            supportVersion: "24.2.1",
            gson          : "2.4",
            butterknife   : "8.5.1",
    ]
}
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.2'
        classpath 'com.jakewharton:butterknife-gradle-plugin:8.5.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        jcenter()
    }
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

<!-- 在 android studio 中 new 出三个带布局的 fragment  -->
<!-- 一个页面就是一个 fragment ,在 fragment 的布局中添加需求布局 -->
<!-- 在每一个 fragment 中做如下修改 -->
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_more, container, false);
    //将每一个 fragment 的布局当做 view 返回展示到住页面上
    return view;
}

public class BottomNavScrollActivity extends AppCompatActivity {
    /**
     * 1. 创建 ViewPager 组件
     * 2. 构造数据源与适配器
     * 3. 将适配器和 ViewPager  进行关联
     */
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    /**
     * 存储底部导航数据源
     */
    private Menu mNavMenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_nav_scroll);
        mViewPager = (ViewPager) findViewById(R.id.vp_container);
        mTabLayout = (TabLayout) findViewById(R.id.tab_top_container);
        // 创建menu对象
        mNavMenu = new MenuBuilder(this);
        // 将menu文件加载到menu对象
        getMenuInflater().inflate(R.menu.menu_bottom_nav, mNavMenu);
        // 获取父类提供的fragment管理对象
        FragmentManager fragmentManager = getSupportFragmentManager();
        // 将适配器和 ViewPager  进行关联
        mViewPager.setAdapter(new MyAdapter(fragmentManager));
        // 将TabLayout 和ViewPager 关联
        mTabLayout.setupWithViewPager(mViewPager);
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            // 循环获取每一个tab对象
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            // 获取每一个menu中存储的数据
            MenuItem item = mNavMenu.getItem(i);
            // 设置每一个tab显示的文本
            tab.setText(item.getTitle());
            tab.setIcon(item.getIcon());
        }
    }
    //创建适配器
    class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new HomeFragment();
                case 1:
                    return new ConvFragment();
                case 2:
                    return new MoreFragment();
            }
            return null;
        }
        //返回底部菜单的数量
        @Override
        public int getCount() {
            return mNavMenu.size();
        }
    }
}