Android基于ViewPager实现类似微信页面切换效果

时间：2022-03-14 14:48:08

此文，仅做为个人学习Android，记录成长以及方便复习！

实现ViewPager实现类似微信的页面切换，此文通过Fragment适配器实现

首先在布局文件activity_main.xml添加ViewPager

 ViewPager是页面，PagerTabStrip和 PagerTitleStrip是设置标题的

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <!--页卡-->
 <android.support.v4.view.ViewPager
  android:id="@+id/view1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <!--页卡标题-->
  <!--PagerTitleStrip和PagerTabStrip功能差不多一致，使用了PagerTitleStrip那PagerTabStrip会失效-->
  <android.support.v4.view.PagerTabStrip
   android:id="@+id/pagerTabStrip"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   />
 </android.support.v4.view.ViewPager>
 
</RelativeLayout>

接下里创建3个布局文件，给ViewPager的适配器引用

view1.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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">
 
 <ImageView
  android:id="@+id/img1"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:background="@drawable/img1"
  android:layout_marginLeft="30dp"/>
 
</LinearLayout>

view2.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
<?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">
 
 <ImageView
  android:id="@+id/img2"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:background="@drawable/img2"/>
 
</LinearLayout>

view3.xml

?
1
2
3
4
5
6
7
8
9
10
<?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">
 <ImageView
  android:id="@+id/img3"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:background="@drawable/img3"/>
</LinearLayout>

创建3个类继承Fragment，通过Fragment实现onCreateView方法把view.xml布局转换成View
MyFragment1.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.rui.viewpagerdemo;
 
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 qqazl001 on 2018/3/26.
 */
 
public class MyFragment1 extends Fragment{
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  //布局文件转成View
  //参数1：Fragment需要加载的布局文件
  //参数2：加载layout的父ViewGroup
  //参数1：是否返回父ViewGroup对象，false为不
  View view = inflater.inflate(R.layout.view1,container,false);
  return view;
 }
}

MyFragment2.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.rui.viewpagerdemo;
 
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 qqazl001 on 2018/3/26.
 */
 
public class MyFragment2 extends Fragment{
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  //布局文件转成View
  //参数1：Fragment需要加载的布局文件
  //参数2：加载layout的父ViewGroup
  //参数1：是否返回父ViewGroup对象，false为不
  View view = inflater.inflate(R.layout.view2,container,false);
  return view;
 }
}

MyFragment3.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.rui.viewpagerdemo;
 
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 qqazl001 on 2018/3/26.
 */
 
public class MyFragment3 extends Fragment{
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  //布局文件转成View
  //参数1：Fragment需要加载的布局文件
  //参数2：加载layout的父ViewGroup
  //参数1：是否返回父ViewGroup对象，false为不
  View view = inflater.inflate(R.layout.view3,container,false);
  return view;
 }
}

创建适配器，新建类（MyAdapter），继承FragmentPagerAdapter

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package com.rui.viewpagerdemo;
 
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * Created by qqazl001 on 2018/3/26.
 */
 
public class MyAdapter extends FragmentPagerAdapter{
 List<Fragment> listFragment;
 List<String> listTab = new ArrayList<String>();
 
 public MyAdapter(FragmentManager fm,List<Fragment> listFragment,List<String>listTab) {
  super(fm);
  this.listFragment=listFragment;
  this.listTab=listTab;
 }
 
 
 @Override
 public CharSequence getPageTitle(int position) {
  //返回标题名称
  return listTab.get(position);
 }
 
 @Override
 public Fragment getItem(int position) {
  //返回页面内容
  return listFragment.get(position);
 }
 
 @Override
 public int getCount() {
  //一共多少个页面
  return listFragment.size();
 }
}

在Activity实例化组件和适配器并添加监听，添加各种数据源等

监听实现接口OnPageChangeListener

ViewPager，添加监听方法 setOnPageChangeListener() 方法已经被 AS 移除了，建议使用 addOnPageChangeListener() 方法。

MainActivity.java

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
package com.rui.viewpagerdemo;
 
import android.annotation.SuppressLint;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
 
import java.util.ArrayList;
import java.util.List;
//调用接口监听，并实现方法
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
 private List<Fragment> listFragment;//声明List，存放Fagment
 private ViewPager viewPager;//声明ViewPager
 private PagerTabStrip pagerTabStrip;//声明PagerTabStrip
 private List<String> listTab;//声明List,存放标题
 
 @SuppressLint("ResourceType")
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //实例化List
  listFragment = new ArrayList<Fragment>();
  //view加入list
  listFragment.add(new MyFragment1());
  listFragment.add(new MyFragment2());
  listFragment.add(new MyFragment3());
  //标题加入list
  listTab = new ArrayList<String>();
  listTab.add("第一页");
  listTab.add("第二页");
  listTab.add("第三页");
 
  //为PagerTabStrip设置属性
  pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagerTabStrip);
  //pagerTabStrip.setBackgroundColor(color.white); 设置背景色
  pagerTabStrip.setTextColor(Color.RED); //设置标题文字颜色
  pagerTabStrip.setDrawFullUnderline(false);//是否显示一条横线
  pagerTabStrip.setTabIndicatorColor(Color.GREEN);//标题下的短粗线颜色
 
  //实例化适配器
  MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),listFragment,listTab);
  //实例化ViewPager
  viewPager = (ViewPager) findViewById(R.id.view1);
  //为viewPager加载适配器
  viewPager.setAdapter(myAdapter);
  //加载监听事件
  viewPager.addOnPageChangeListener(this);
 }
 
 
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  // position-点击滑动的界面的位置
 
  // positionOffset-点击页面占整个屏幕的百分比
 
  // positionOffsetPixels-屏幕像素的位置
 }
 
 @Override
 public void onPageSelected(int position) {
  //滑动到第几页
  Toast.makeText(MainActivity.this,"第"+(position+1)+"页",Toast.LENGTH_SHORT).show();
 }
 
 @Override
 public void onPageScrollStateChanged(int state) {
  //state:滑动状态
 
  //当页面停止的时候该参数为0，页面开始滑动的时候变成了1，
 
  //当手指从屏幕上抬起变为了2（无论页面是否从1跳到了2），当页面静止后又变成了0
 
  //只在0，1，2三个数字之间切换.
 }
}

PS:以上很多都使用了 android.support.v4.* 这个包下的类，是为了向下兼容

ViewPager有三个适配器,适配不同的数据源。

1、继承自PagerAdapter的适配器适配List<View>的数据

2、继承自FragmentAdapter的适配器适配List<Fragment>的数据

3、继承自FragmentStateAdapter的适配器适配List<Fragment>的数据

其中后两种的区别是:2没有创建和销毁的过程,3有

Android基于ViewPager实现类似微信页面切换效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/qqazl001/article/details/79701287

标签：

相关文章