android 碎片中加入tab6,Android学习笔记——顶/底部Tab菜单栏结合Fragment使用(2017-12-6)...

Fragment+FragmentTabHost+ViewPager实现底部菜单栏

总体思路

Fragment:存放不同选项的页面内容

FragmentTabHost:点击切换选项卡

ViewPager:实现页面的左右滑动效果

概念介绍

1.FragementTabHost

用于实现点击选项进行切换选项卡的自定义效果

使用FragmentTabHost,就是先用TabHost“装着”Fragment,然后放进MainActivity里面

2.ViewPager

定义:ViewPager是android扩展包v4包中的类

android.support.v4.view.ViewPager

作用:左右切换当前的View,实现滑动切换的效果

1.ViewPager类直接继承了ViewGroup类,和LinearLayout等布局一样,都是一个容器,需要在里面添加我们想要显示的内容。

2.ViewPager类需要PagerAdapter适配器类提供数据,与ListView类似。

3.Goolgle官方建议ViewPager结合Fragment使用

3.Fragment

定义

Fragment是Activity的界面中的一部分或一种行为

1.把Fragment认为模块化的一段Activity

2.它具有自己的生命周期,接收它自己的事件,并可以在activity运行时被添加或删除

3.Fragment不能独立存在,它必须嵌入到Activity中,而且Fragment的生命周期只接受所在的Activity的影响。例如:当Activity暂停时,它拥有的所有的Fragment都暂停了,当Activity销毁时,它拥有的所有Fragment都被销毁。

作用

主要是为了支持更动态、更灵活的界面设计

实现步骤

1.在主xml布局里定义一个FragmentTabHost控件

2.定义菜单栏布局

3.定义每个Fragment布局

4.定义每个Fragment的Java类

5.定义适配器以关联页卡和ViewPage

6.定义MainActivity

activity_main.xml

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

tools:context=".MainActivity">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"/>

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="100dp"

android:background="#ffff00"

app:tabIndicatorColor="#66ff33"

app:tabIndicatorHeight="20dp"

app:tabTextColor="@color/colorPrimary"

app:tabSelectedTextColor="#CC33FF"

app:tabMode="fixed"

app:tabBackground="@drawable/selected"/>

定义适配器关联页卡及菜单栏布局

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

private String[] mTitles = new String[]{"首页", "发现", "进货单","我的"};

public MyFragmentPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

if (position == 1) {

return new Fragment2();

} else if (position == 2) {

return new Fragment3();

}else if (position==3){

return new Fragment4();

}

return new Fragment1();

}

@Override

public int getCount() {

return mTitles.length;

}

//ViewPager与TabLayout绑定后,这里获取到PageTitle就是Tab的Text

@Override

public CharSequence getPageTitle(int position) {

return mTitles[position];

}

}

定义每个fragment的布局

定义每个Fragment的Java类

public class Fragment2 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater,

@Nullable ViewGroup container,

@Nullable Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment2, container, false);

}

}

在MainActivity实现

public class MainActivity extends AppCompatActivity {

private TabLayout mTabLayout;

private ViewPager mViewPager;

private MyFragmentPagerAdapter myFragmentPagerAdapter;

private TabLayout.Tab one;

private TabLayout.Tab two;

private TabLayout.Tab three;

private TabLayout.Tab four;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

getSupportActionBar().hide();//隐藏掉整个ActionBar

setContentView(R.layout.activity_main);

//初始化视图

initViews();

}

private void initViews() {

//使用适配器将ViewPager与Fragment绑定在一起

mViewPager= (ViewPager) findViewById(R.id.viewPager);

myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());

mViewPager.setAdapter(myFragmentPagerAdapter);

//将TabLayout与ViewPager绑定在一起

mTabLayout = (TabLayout) findViewById(R.id.tabLayout);

mTabLayout.setupWithViewPager(mViewPager);

//指定Tab的位置

one = mTabLayout.getTabAt(0);

two = mTabLayout.getTabAt(1);

three = mTabLayout.getTabAt(2);

four = mTabLayout.getTabAt(3);

//设置Tab的图标

one.setIcon(R.mipmap.ic_launcher);

two.setIcon(R.mipmap.ic_launcher);

three.setIcon(R.mipmap.ic_launcher);

four.setIcon(R.mipmap.ic_launcher);

}

}