Android基于ViewPager實現(xiàn)類似微信頁面切換效果
更新時間：2018年05月21日 11:44:50 作者：qqazl001
這篇文章主要介紹了Android基于ViewPager實現(xiàn)類似微信頁面切換效果，通過Fragment適配器實現(xiàn)頁面切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
此文，僅做為個人學習Android，記錄成長以及方便復習！
實現(xiàn)ViewPager實現(xiàn)類似微信的頁面切換，此文通過Fragment適配器實現(xiàn)
首先在布局文件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>
接下里創(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) {
//返回標題名稱
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,存放標題
@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);
//加載監(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)
//當頁面停止的時候該參數(shù)為0，頁面開始滑動的時候變成了1，
//當手指從屏幕上抬起變?yōu)榱?（無論頁面是否從1跳到了2），當頁面靜止后又變成了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有
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
大家好，本篇文章主要講的是Android最新狀態(tài)欄處理介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
本篇文章是對Android中為從右向左語言定義復雜字串進行了詳細的分析介紹，需要的朋友參考下2013-05-05
這篇文章主要為大家詳細介紹了Android實現(xiàn)定時任務及鬧鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細介紹了android事件總線EventBus3.0使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Android判斷手機是否聯(lián)網(wǎng)及自動跳轉(zhuǎn)功能(收藏版)
這篇文章主要介紹了Android判斷手機是否聯(lián)網(wǎng)及自動跳轉(zhuǎn)功能(收藏版),在一些手機端連接wifi我們經(jīng)常會遇到這樣的功能，今天小編通過實例截圖給大家介紹下，需要的朋友可以參考下2019-11-11
Android中RecyclerView布局代替GridView實現(xiàn)類似支付寶的界面
RecyclerView比GridView來得更加強大,不僅是在分割線的繪制方面,在條目的編輯上也做得同樣出色,下面就來看一下Android中RecyclerView布局代替GridView實現(xiàn)類似支付寶的界面的實例2016-06-06
這篇文章主要為大家詳細介紹了Android小程序?qū)崿F(xiàn)音樂播放列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
一步步實現(xiàn)Viewpager卡片翻頁效果，文章很精彩，實現(xiàn)步驟很詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了Android中自定義一個View的方法,結(jié)合實例形式較為詳細的分析了Android中自定義View的具體步驟與相關(guān)注意事項,需要的朋友可以參考下2016-07-07
Android自定義收音機搜臺控件RadioRulerView
這篇文章主要為大家詳細介紹了Android自定義收音機搜臺控件RadioRulerView的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04