当前位置:   article > 正文

Android实现头部切换页(Fragment+viewPager)_android 使用fragment 头部导航切换

android 使用fragment 头部导航切换

Android实现头部切换页(Fragment+viewPager)

Fragment可以看作是轻量级的Activity。不得不说,Fragment实现界面是非常简单且高效的事。ViewPager适合用作界面的左右滑动,在手机屏幕有限的情况下,ViewPager提供了一种很好地解决方案。
今天尝试实现了头部的切换页,发现做出来效果挺不错。下面是实现步骤:
1、实现Fragment
简单的实现了三个Fragment,只需继承Fragment,重写onCreateView方法即可。
  1. public class FirstFragment extends Fragment {
  2. @Override
  3. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  4. View view=inflater.inflate(R.layout.first_fragment,container,false);
  5. return view;
  6. }
  7. }
三个Fragment都是一样的实现,只不过加载了不一样的布局文件。布局文件随便拖拽了几个控件上去,区分彼此。
2、实现适配器
ViewPager的适配器应该使用FragmentPageAdapter。这个适配器类似于BaseAdapter。
  1. public class FragmentViewPagerAdapter extends FragmentPagerAdapter {
  2. //需要显示的Fragment
  3. private List<Fragment> fragments;
  4. public FragmentViewPagerAdapter(FragmentManager fm,List<Fragment> fragments){
  5. super(fm);
  6. this.fragments=fragments;
  7. }
  8. @Override
  9. public Fragment getItem(int position) {
  10. //得到具体的Fragment
  11. return fragments.get(position);
  12. }
  13. @Override
  14. public int getCount() {
  15. //返回数量
  16. return fragments.size();
  17. }
  18. }

3、主Activity的实现
主Activity中,初始化了各个控件,设置了ViewPager的监听器。代码如下:
  1. public class MainActivity extends FragmentActivity {
  2. private ViewPager viewPager;
  3. private List<Fragment> fragmentList;
  4. private TextView tvTab1,tvTab2,tvTab3;
  5. private int currIndex;
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_main);
  10. initView();
  11. initViewPager();
  12. }
  13. private void initView(){
  14. tvTab1= (TextView) findViewById(R.id.tv_tab1);
  15. tvTab2= (TextView) findViewById(R.id.tv_tab2);
  16. tvTab3= (TextView) findViewById(R.id.tv_tab3);
  17. tvTab1.setOnClickListener(new tvOnClickListener(0));
  18. tvTab2.setOnClickListener(new tvOnClickListener(1));
  19. tvTab3.setOnClickListener(new tvOnClickListener(2));
  20. }
  21. //textView的监听器,当按下textview控件时,可跳转到对应Fragment。
  22. private class tvOnClickListener implements View.OnClickListener{
  23. private int index=0;
  24. public tvOnClickListener(int index){
  25. this.index=index;
  26. }
  27. @Override
  28. public void onClick(View view) {
  29. viewPager.setCurrentItem(index);
  30. }
  31. }
  32. private void initViewPager(){
  33. viewPager= (ViewPager) findViewById(R.id.viewpager);
  34. fragmentList=new ArrayList<Fragment>();
  35. fragmentList.add(new FirstFragment());
  36. fragmentList.add(new SecondFragment());
  37. fragmentList.add(new ThirdFragment());
  38. //设置适配器
  39. viewPager.setAdapter(new FragmentViewPagerAdapter(getSupportFragmentManager(), fragmentList));
  40. viewPager.setCurrentItem(0);
  41. tvTab1.setTextColor(Color.RED);
  42. //设置监听
  43. viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
  44. }
  45. private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
  46. @Override
  47. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  48. }
  49. @Override
  50. public void onPageSelected(int position) {
  51. currIndex=position;
  52. //使TextView改变颜色,指示现在是哪个Fragment。
  53. switch (position){
  54. case 0:
  55. tvTab1.setTextColor(Color.RED);
  56. tvTab2.setTextColor(Color.WHITE);
  57. tvTab3.setTextColor(Color.WHITE);
  58. break;
  59. case 1:
  60. tvTab1.setTextColor(Color.WHITE);
  61. tvTab2.setTextColor(Color.RED);
  62. tvTab3.setTextColor(Color.WHITE);
  63. break;
  64. case 2:
  65. tvTab1.setTextColor(Color.WHITE);
  66. tvTab2.setTextColor(Color.WHITE);
  67. tvTab3.setTextColor(Color.RED);
  68. break;
  69. }
  70. }
  71. @Override
  72. public void onPageScrollStateChanged(int state) {
  73. }
  74. }
  75. }
4、xml布局文件
这里将主布局的xml文件也给出来。
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity"
  6. android:orientation="vertical">
  7. <LinearLayout
  8. android:background="#009959"
  9. android:layout_width="match_parent"
  10. android:layout_height="@dimen/topbarheight"
  11. android:orientation="horizontal">
  12. <TextView
  13. android:id="@+id/tv_tab1"
  14. android:layout_weight="1"
  15. android:textSize="18sp"
  16. android:text="@string/tab1_title"
  17. android:gravity="center"
  18. android:layout_gravity="center_vertical"
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content" />
  21. <TextView
  22. android:id="@+id/tv_tab2"
  23. android:layout_weight="1"
  24. android:textSize="18sp"
  25. android:text="@string/tab2_title"
  26. android:gravity="center"
  27. android:layout_gravity="center_vertical"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content" />
  30. <TextView
  31. android:id="@+id/tv_tab3"
  32. android:layout_weight="1"
  33. android:textSize="18sp"
  34. android:text="@string/tab3_title"
  35. android:gravity="center"
  36. android:layout_gravity="center_vertical"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content" />
  39. </LinearLayout>
  40. <android.support.v4.view.ViewPager
  41. android:id="@+id/viewpager"
  42. android:layout_width="match_parent"
  43. android:layout_height="match_parent"
  44. android:flipInterval="30"
  45. android:persistentDrawingCache="animation"/>
  46. </LinearLayout>

这样功能就基本实现了。发现还可以再美化。
5、加入沉浸式效果
现在很多应用都实现了沉浸式状态栏,这个小小的改变确实使应用看起来不那么变扭。在网上查找到一种实现。
在MainActivity中加入两行代码:
  1. //透明状态栏
  2. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  3. //透明导航栏
  4. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
xml布局中加入:
  1. android:fitsSystemWindows="true"
  2. android:clipToPadding="true"
看看效果:



源码地址:http://download.csdn.net/detail/wen_wu_shuang_quan/9203297

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/778940
推荐阅读
相关标签
  

闽ICP备14008679号