服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android基于ViewPager实现类似微信页面切换效果

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

2022-02-23 15:12qqazl001 Android

这篇文章主要介绍了Android基于ViewPager实现类似微信页面切换效果，通过Fragment适配器实现页面切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

此文，仅做为个人学习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

  • Android
  • ViewPager
  • 页面切换

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    拉伸效果 　 PopupWindow 　 descendantFocusability 　 Andorid 　 退出程序 　 触屏震动 　 响应接口 　 自定义标题 　 图片居中 　 程序退出 　 binder 　 图片翻转动画 　 横竖屏切换 　 适配 　 dialog 　 preferenceactivity 　 SharedPreferences 　 MultiDex 　 tablelayout 　 RadioGroup 　 颜色编辑器 　 OnCreate 　 ImageView 　 Gallery 　 缩放动画 　 TextView 　 asynctask 　 Notification 　 NotificationManager 　 RelativeLayout 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图