ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页，每个标签页可以有独立的布局及响应。

activity_main.xml

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical">
  7. <LinearLayout
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:orientation="horizontal">
  11. <TextView
  12. android:id="@+id/tv_guid1"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:layout_weight="1.0"
  16. android:gravity="center"
  17. android:text="特性1"
  18. android:textSize="18sp"/>
  19. <TextView
  20. android:id="@+id/tv_guid2"
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_weight="1.0"
  24. android:gravity="center"
  25. android:text="特性2"
  26. android:textSize="18sp"/>
  27. <TextView
  28. android:id="@+id/tv_guid3"
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:layout_weight="1.0"
  32. android:gravity="center"
  33. android:text="特性3 "
  34. android:textSize="18sp"/>
  35. <TextView
  36. android:id="@+id/tv_guid4"
  37. android:layout_width="wrap_content"
  38. android:layout_height="wrap_content"
  39. android:layout_weight="1.0"
  40. android:gravity="center"
  41. android:text="特性4"
  42. android:textSize="18sp"/>
  43. </LinearLayout>
  44. <ImageView
  45. android:id="@+id/cursor"
  46. android:layout_width="wrap_content"
  47. android:layout_height="wrap_content"
  48. android:scaleType="matrix"
  49. android:src="@drawable/cursor"/>
  50. <android.support.v4.view.ViewPager
  51. android:id="@+id/viewpager"
  52. android:layout_width="fill_parent"
  53. android:layout_height="fill_parent"
  54. android:flipInterval="30"
  55. android:persistentDrawingCache="animation"/>
  56. </LinearLayout>

MainActivity.Java

[java] view plaincopy
  1. package com.example.viewpagernfragment;
  2. import java.util.ArrayList;
  3. import android.graphics.BitmapFactory;
  4. import android.graphics.Matrix;
  5. import android.os.Bundle;
  6. import android.support.v4.app.Fragment;
  7. import android.support.v4.app.FragmentActivity;
  8. import android.support.v4.view.ViewPager;
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;
  10. import android.util.DisplayMetrics;
  11. import android.view.Menu;
  12. import android.view.View;
  13. import android.view.animation.Animation;
  14. import android.view.animation.TranslateAnimation;
  15. import android.widget.ImageView;
  16. import android.widget.TextView;
  17. import android.widget.Toast;
  18. public class MainActivity extends FragmentActivity {
  19. private ViewPager mPager;
  20. private ArrayList<Fragment> fragmentList;
  21. private ImageView image;
  22. private TextView view1, view2, view3, view4;
  23. private int currIndex;//当前页卡编号
  24. private int bmpW;//横线图片宽度
  25. private int offset;//图片移动的偏移量
  26. @Override
  27. protected void onCreate(Bundle savedInstanceState) {
  28. super.onCreate(savedInstanceState);
  29. setContentView(R.layout.activity_main);
  30. InitTextView();
  31. InitImage();
  32. InitViewPager();
  33. }
  34. /*
  35. * 初始化标签名
  36. */
  37. public void InitTextView(){
  38. view1 = (TextView)findViewById(R.id.tv_guid1);
  39. view2 = (TextView)findViewById(R.id.tv_guid2);
  40. view3 = (TextView)findViewById(R.id.tv_guid3);
  41. view4 = (TextView)findViewById(R.id.tv_guid4);
  42. view1.setOnClickListener(new txListener(0));
  43. view2.setOnClickListener(new txListener(1));
  44. view3.setOnClickListener(new txListener(2));
  45. view4.setOnClickListener(new txListener(3));
  46. }
  47. public class txListener implements View.OnClickListener{
  48. private int index=0;
  49. public txListener(int i) {
  50. index =i;
  51. }
  52. @Override
  53. public void onClick(View v) {
  54. // TODO Auto-generated method stub
  55. mPager.setCurrentItem(index);
  56. }
  57. }
  58. /*
  59. * 初始化图片的位移像素
  60. */
  61. public void InitImage(){
  62. image = (ImageView)findViewById(R.id.cursor);
  63. bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();
  64. DisplayMetrics dm = new DisplayMetrics();
  65. getWindowManager().getDefaultDisplay().getMetrics(dm);
  66. int screenW = dm.widthPixels;
  67. offset = (screenW/4 - bmpW)/2;
  68. //imgageview设置平移，使下划线平移到初始位置（平移一个offset）
  69. Matrix matrix = new Matrix();
  70. matrix.postTranslate(offset, 0);
  71. image.setImageMatrix(matrix);
  72. }
  73. /*
  74. * 初始化ViewPager
  75. */
  76. public void InitViewPager(){
  77. mPager = (ViewPager)findViewById(R.id.viewpager);
  78. fragmentList = new ArrayList<Fragment>();
  79. Fragment btFragment= new ButtonFragment();
  80. Fragment secondFragment = TestFragment.newInstance("this is second fragment");
  81. Fragment thirdFragment = TestFragment.newInstance("this is third fragment");
  82. Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");
  83. fragmentList.add(btFragment);
  84. fragmentList.add(secondFragment);
  85. fragmentList.add(thirdFragment);
  86. fragmentList.add(fourthFragment);
  87. //给ViewPager设置适配器
  88. mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
  89. mPager.setCurrentItem(0);//设置当前显示标签页为第一页
  90. mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器
  91. }
  92. public class MyOnPageChangeListener implements OnPageChangeListener{
  93. private int one = offset *2 +bmpW;//两个相邻页面的偏移量
  94. @Override
  95. public void onPageScrolled(int arg0, float arg1, int arg2) {
  96. // TODO Auto-generated method stub
  97. }
  98. @Override
  99. public void onPageScrollStateChanged(int arg0) {
  100. // TODO Auto-generated method stub
  101. }
  102. @Override
  103. public void onPageSelected(int arg0) {
  104. // TODO Auto-generated method stub
  105. Animation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移动画
  106. currIndex = arg0;
  107. animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态
  108. animation.setDuration(200);//动画持续时间0.2秒
  109. image.startAnimation(animation);//是用ImageView来显示动画的
  110. int i = currIndex + 1;
  111. Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();
  112. }
  113. }
  114. @Override
  115. public boolean onCreateOptionsMenu(Menu menu) {
  116. // Inflate the menu; this adds items to the action bar if it is present.
  117. getMenuInflater().inflate(R.menu.main, menu);
  118. return true;
  119. }
  120. }

谷歌官方认为，ViewPager应该和Fragment一起使用时，此时ViewPager的适配器是FragmentPagerAdapter，当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:

getCount()

getItem()

如果ViewPager没有和Fragment一起，ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，当你实现一个PagerAdapter,你必须至少覆盖以下方法:

  • instantiateItem(ViewGroup, int)
  • destroyItem(ViewGroup, int, Object)
  • getCount()
  • isViewFromObject(View, Object)
[java] view plaincopy
  1. package com.example.viewpagernfragment;
  2. import java.util.ArrayList;
  3. import android.support.v4.app.Fragment;
  4. import android.support.v4.app.FragmentManager;
  5. import android.support.v4.app.FragmentPagerAdapter;
  6. public class MyFragmentPagerAdapter extends FragmentPagerAdapter{
  7. ArrayList<Fragment> list;
  8. public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {
  9. super(fm);
  10. this.list = list;
  11. }
  12. @Override
  13. public int getCount() {
  14. return list.size();
  15. }
  16. @Override
  17. public Fragment getItem(int arg0) {
  18. return list.get(arg0);
  19. }
  20. }
[java] view plaincopy
  1. package com.example.viewpagernfragment;
  2. import android.os.Bundle;
  3. import android.support.v4.app.Fragment;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.Button;
  8. import android.widget.Toast;
  9. public class ButtonFragment extends Fragment{
  10. Button myButton;
  11. @Override
  12. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  13. Bundle savedInstanceState) {
  14. View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件
  15. myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到button
  16. //设置按键监听事件
  17. myButton.setOnClickListener(new View.OnClickListener() {
  18. @Override
  19. public void onClick(View v) {
  20. // TODO Auto-generated method stub
  21. Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();
  22. }
  23. });
  24. return rootView;
  25. }
  26. }
[java] view plaincopy
  1. package com.example.viewpagernfragment;
  2. import android.os.Bundle;
  3. import android.support.v4.app.Fragment;
  4. import android.util.Log;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.TextView;
  9. public class TestFragment extends Fragment {
  10. private static final String TAG = "TestFragment";
  11. private String hello;// = "hello android";
  12. private String defaultHello = "default value";
  13. static TestFragment newInstance(String s) {
  14. TestFragment newFragment = new TestFragment();
  15. Bundle bundle = new Bundle();
  16. bundle.putString("hello", s);
  17. newFragment.setArguments(bundle);
  18. //bundle还可以在每个标签里传送数据
  19. return newFragment;
  20. }
  21. @Override
  22. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
  23. Log.d(TAG, "TestFragment-----onCreateView");
  24. Bundle args = getArguments();
  25. hello = args != null ? args.getString("hello") : defaultHello;
  26. View view = inflater.inflate(R.layout.guide_2, container, false);
  27. TextView viewhello = (TextView) view.findViewById(R.id.tv);
  28. viewhello.setText(hello);
  29. return view;
  30. }
  31. }
[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:background="#ff0000ff" >
  6. <Button
  7. android:id="@+id/mybutton"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:text="hit me"
  11. android:gravity="center"/>
  12. </RelativeLayout>
[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. android:background="#158684" >
  7. <TextView
  8. android:id="@+id/tv"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:text="TextView" />
  12. </RelativeLayout>

ViewPager + Fragment实现滑动标签页相关推荐

  1. ViewPager和Fragment实现滑动标签页步骤以及方法总结

    要实现左右滑动的标签页其实有很多种办法,比如最外层一个FrameLayout,里面重叠几个View监听滑动事件来控制具体的展示效果以及相应的处理,还有其他很多种方式,但是呢各个方法的运行效率以及编码速 ...

  2. android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...

    在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android- ...

  3. 安卓开发之使用viewpager+fragment实现滚动tab页

    闲着.用viewpager+fragment实现了个滚动tab..轻拍,以后会陆续发先小东西出来..爱分享,才快乐.demo见附件.. Java代码   package com.example.dem ...

  4. Kotlin + AndroidX + Tablayout + ViewPager + Fragment 实现Tab切页

    1.前沿 Google已经受够了V4,V7包的各种冲突.所以直接不再维护V4,V7包了.以后就统一使用AndroidX. 2.gradle配置: 除了原有的androidX的库,还需要使用materi ...

  5. 实现ViewPager一次滑动多页（保持居中）

    项目中开发日历功能,需求是可以连续滑动多页,有列表的流畅.又要保持当前页居中显示. 参考文献:  http://www.open-open.com/lib/view/open1435026935638 ...

  6. Android ViewPager + Fragment实现滑动页面

    效果: PagerData类: 1 package com.cloud.viewpagerdemo; 2 3 import java.io.Serializable; 4 5 class PagerD ...

  7. 英语新闻app——TagLayout+ViewPager+Fragment实现分类切页功能

    效果图: Step1:首先在color.xml中添加常用颜色 <color name="red">#FF0000</color> <color nam ...

  8. Android viewpager+fragment实现无限滚动，左右有前/后一页的部分，并fragment显示的内容是activity传过去的数据

    背景:最近在做app的时候碰到一个这样的需求.1,将从网络上获取的json数组数据显示出来,每页显示一个数据源,并且可以左右翻页查看:2,中间显示一个完整页,两边分别还有上下一页的一点,:3,可无限循 ...

  9. 小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换

    昨夜西风凋碧树,独上高楼,望尽天涯路. 今天难得有时间,准备写一写我们在APP中经常用到的页面形式,废话不多说,直接一张图看看页面效果你就知道为啥是常用的页面形式.先看看逻辑和最后的效果是怎么样的: ...

最新文章

  1. 《对软件工程课程的期望》
  2. 港中文自动驾驶点云上采样方法
  3. 做一个基于python的树莓派MCU性能-温度监控仪表盘
  4. 运维太忙？那是你还没掌握 Ansible !
  5. 饿了么口碑实现超30亿美元融资，引领本地生活数字化升级...
  6. C语言课后习题(33)
  7. pytorch使用Ray-tune对原有训练模型的代码改写，自动调参（一）
  8. linux contos7防火墙加端口,Linux：centos7防火墙开放端口
  9. 罗永浩向老同事道歉；三星漏洞已波及四千万用户；Clojure 1.11 即将发布 | 极客头条...
  10. python 输出文件中返回码为200的接口的平均响应时间_python-处理日志文件，找出各个接口状态码为 200时的平均响应时间...
  11. [C++]出错member access into incomplete type
  12. python新浪微博爬虫_基于Python的新浪微博数据爬虫
  13. Word页面中底端如何画一条横线，再下端写文字？
  14. Python基础-不要对实例属性和类属性使用相同的名字
  15. 将自动化测试推向极限
  16. Linux 批量处理dos2unix
  17. Hibernate对象状态
  18. 【Linux工具】-vim介绍
  19. php概率计算_PHP 真实概率计算（百分比随机分配）
  20. 瓜子二手车html模板,以瓜子二手车为例，UI设计从C端到B端

热门文章

  1. 阿里云快速挂载硬盘教程
  2. https默认端口443_为什么选择80作为默认HTTP端口，选择443作为默认HTTPS端口？
  3. Http非80端口的解析问题
  4. pyinotify模块速查
  5. 蠕动泵的流量如何计算？
  6. windows远程连接发生身份验证错误，提示要求的函数不受支持
  7. modbus通讯失败_STM32 MODBUS通讯失败
  8. 机电工程常用材料（二）
  9. 武大数理金融学计算机吗,武汉大学50名数理经济与数理金融学子被国内外知名高校录取...
  10. 为什么跑完步了膝盖会疼痛？