Android基于ViewPager實現(xiàn)類似微信頁面切換效果

2019-12-12 00:52:07

字體：大中小

供稿：網(wǎng)友

此文，僅做為個人學(xué)習(xí)Android，記錄成長以及方便復(fù)習(xí)！

實現(xiàn)ViewPager實現(xiàn)類似微信的頁面切換，此文通過Fragment適配器實現(xiàn)

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

ViewPager是頁面，PagerTabStrip和 PagerTitleStrip是設(shè)置標(biāo)題的

<?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">   <!--頁卡標(biāo)題-->   <!--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>

接下里創(chuàng)建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>

創(chuàng)建3個類繼承Fragment，通過Fragment實現(xiàn)onCreateView方法把view.xml布局轉(zhuǎn)換成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) {   //布局文件轉(zhuǎn)成View   //參數(shù)1：Fragment需要加載的布局文件   //參數(shù)2：加載layout的父ViewGroup   //參數(shù)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) {   //布局文件轉(zhuǎn)成View   //參數(shù)1：Fragment需要加載的布局文件   //參數(shù)2：加載layout的父ViewGroup   //參數(shù)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) {   //布局文件轉(zhuǎn)成View   //參數(shù)1：Fragment需要加載的布局文件   //參數(shù)2：加載layout的父ViewGroup   //參數(shù)1：是否返回父ViewGroup對象，false為不   View view = inflater.inflate(R.layout.view3,container,false);   return view;  } }

創(chuàng)建適配器，新建類（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) {   //返回標(biāo)題名稱   return listTab.get(position);  }   @Override  public Fragment getItem(int position) {   //返回頁面內(nèi)容   return listFragment.get(position);  }   @Override  public int getCount() {   //一共多少個頁面   return listFragment.size();  } }

在Activity實例化組件和適配器并添加監(jiān)聽，添加各種數(shù)據(jù)源等

監(jiān)聽實現(xiàn)接口OnPageChangeListener

ViewPager，添加監(jiān)聽方法 setOnPageChangeListener() 方法已經(jīng)被 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; //調(diào)用接口監(jiān)聽，并實現(xiàn)方法 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,存放標(biāo)題   @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());   //標(biāo)題加入list   listTab = new ArrayList<String>();   listTab.add("第一頁");   listTab.add("第二頁");   listTab.add("第三頁");    //為PagerTabStrip設(shè)置屬性   pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagerTabStrip);   //pagerTabStrip.setBackgroundColor(color.white); 設(shè)置背景色   pagerTabStrip.setTextColor(Color.RED); //設(shè)置標(biāo)題文字顏色   pagerTabStrip.setDrawFullUnderline(false);//是否顯示一條橫線   pagerTabStrip.setTabIndicatorColor(Color.GREEN);//標(biāo)題下的短粗線顏色    //實例化適配器   MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),listFragment,listTab);   //實例化ViewPager   viewPager = (ViewPager) findViewById(R.id.view1);   //為viewPager加載適配器   viewPager.setAdapter(myAdapter);   //加載監(jiān)聽事件   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:滑動狀態(tài)    //當(dāng)頁面停止的時候該參數(shù)為0，頁面開始滑動的時候變成了1，    //當(dāng)手指從屏幕上抬起變?yōu)榱?（無論頁面是否從1跳到了2），當(dāng)頁面靜止后又變成了0    //只在0，1，2三個數(shù)字之間切換.  } }

PS:以上很多都使用了 android.support.v4.* 這個包下的類，是為了向下兼容

ViewPager有三個適配器,適配不同的數(shù)據(jù)源。

1、繼承自PagerAdapter的適配器適配List<View>的數(shù)據(jù)

2、繼承自FragmentAdapter的適配器適配List<Fragment>的數(shù)據(jù)

3、繼承自FragmentStateAdapter的適配器適配List<Fragment>的數(shù)據(jù)

其中后兩種的區(qū)別是:2沒有創(chuàng)建和銷毀的過程,3有