首页 > 系统 > Android > 正文

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

2019-10-22 18:10:50
字体:
来源:转载
供稿:网友

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

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

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

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

<?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

<?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

<?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

<?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

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

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

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

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

 

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,页面切换

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表