Android基于ViewPager實(shí)現(xiàn)類(lèi)似微信頁(yè)面切換效果
更新時(shí)間：2018年05月21日 11:44:50 作者：qqazl001
這篇文章主要介紹了Android基于ViewPager實(shí)現(xiàn)類(lèi)似微信頁(yè)面切換效果，通過(guò)Fragment適配器實(shí)現(xiàn)頁(yè)面切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
此文，僅做為個(gè)人學(xué)習(xí)Android，記錄成長(zhǎng)以及方便復(fù)習(xí)！
實(shí)現(xiàn)ViewPager實(shí)現(xiàn)類(lèi)似微信的頁(yè)面切換，此文通過(guò)Fragment適配器實(shí)現(xiàn)
首先在布局文件activity_main.xml添加ViewPager
ViewPager是頁(yè)面，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"> <!--頁(yè)卡--> <android.support.v4.view.ViewPager android:id="@+id/view1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <!--頁(yè)卡標(biāo)題--> <!--PagerTitleStrip和PagerTabStrip功能差不多一致，使用了PagerTitleStrip那PagerTabStrip會(huì)失效--> <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個(gè)布局文件，給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個(gè)類(lèi)繼承Fragment，通過(guò)Fragment實(shí)現(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對(duì)象，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對(duì)象，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對(duì)象，false為不
View view = inflater.inflate(R.layout.view3,container,false);
return view;
}
}
創(chuàng)建適配器，新建類(lèi)（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)題名稱(chēng)
return listTab.get(position);
}
@Override
public Fragment getItem(int position) {
//返回頁(yè)面內(nèi)容
return listFragment.get(position);
}
@Override
public int getCount() {
//一共多少個(gè)頁(yè)面
return listFragment.size();
}
}
在Activity實(shí)例化組件和適配器并添加監(jiān)聽(tīng)，添加各種數(shù)據(jù)源等
監(jiān)聽(tīng)實(shí)現(xiàn)接口OnPageChangeListener
ViewPager，添加監(jiān)聽(tīng)方法 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)聽(tīng)，并實(shí)現(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);
//實(shí)例化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("第一頁(yè)");
listTab.add("第二頁(yè)");
listTab.add("第三頁(yè)");
//為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)題下的短粗線顏色
//實(shí)例化適配器
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),listFragment,listTab);
//實(shí)例化ViewPager
viewPager = (ViewPager) findViewById(R.id.view1);
//為viewPager加載適配器
viewPager.setAdapter(myAdapter);
//加載監(jiān)聽(tīng)事件
viewPager.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// position-點(diǎn)擊滑動(dòng)的界面的位置
// positionOffset-點(diǎn)擊頁(yè)面占整個(gè)屏幕的百分比
// positionOffsetPixels-屏幕像素的位置
}
@Override
public void onPageSelected(int position) {
//滑動(dòng)到第幾頁(yè)
Toast.makeText(MainActivity.this,"第"+(position+1)+"頁(yè)",Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
//state:滑動(dòng)狀態(tài)
//當(dāng)頁(yè)面停止的時(shí)候該參數(shù)為0，頁(yè)面開(kāi)始滑動(dòng)的時(shí)候變成了1，
//當(dāng)手指從屏幕上抬起變?yōu)榱?（無(wú)論頁(yè)面是否從1跳到了2），當(dāng)頁(yè)面靜止后又變成了0
//只在0，1，2三個(gè)數(shù)字之間切換.
}
}
PS:以上很多都使用了 android.support.v4.* 這個(gè)包下的類(lèi)，是為了向下兼容
ViewPager有三個(gè)適配器,適配不同的數(shù)據(jù)源。
1、繼承自PagerAdapter的適配器適配List<View>的數(shù)據(jù)
2、繼承自FragmentAdapter的適配器適配List<Fragment>的數(shù)據(jù)
3、繼承自FragmentStateAdapter的適配器適配List<Fragment>的數(shù)據(jù)
其中后兩種的區(qū)別是:2沒(méi)有創(chuàng)建和銷(xiāo)毀的過(guò)程,3有
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
大家好，本篇文章主要講的是Android最新?tīng)顟B(tài)欄處理介紹，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下，方便下次瀏覽2021-12-12
Android筆記之:深入為從右向左語(yǔ)言定義復(fù)雜字串的詳解
本篇文章是對(duì)Android中為從右向左語(yǔ)言定義復(fù)雜字串進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Android實(shí)現(xiàn)定時(shí)任務(wù)及鬧鐘
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)定時(shí)任務(wù)及鬧鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了android事件總線EventBus3.0使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Android判斷手機(jī)是否聯(lián)網(wǎng)及自動(dòng)跳轉(zhuǎn)功能(收藏版)
這篇文章主要介紹了Android判斷手機(jī)是否聯(lián)網(wǎng)及自動(dòng)跳轉(zhuǎn)功能(收藏版),在一些手機(jī)端連接wifi我們經(jīng)常會(huì)遇到這樣的功能，今天小編通過(guò)實(shí)例截圖給大家介紹下，需要的朋友可以參考下2019-11-11
Android中RecyclerView布局代替GridView實(shí)現(xiàn)類(lèi)似支付寶的界面
RecyclerView比GridView來(lái)得更加強(qiáng)大,不僅是在分割線的繪制方面,在條目的編輯上也做得同樣出色,下面就來(lái)看一下Android中RecyclerView布局代替GridView實(shí)現(xiàn)類(lèi)似支付寶的界面的實(shí)例2016-06-06
Android小程序?qū)崿F(xiàn)音樂(lè)播放列表
這篇文章主要為大家詳細(xì)介紹了Android小程序?qū)崿F(xiàn)音樂(lè)播放列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
一步步實(shí)現(xiàn)Viewpager卡片翻頁(yè)效果
一步步實(shí)現(xiàn)Viewpager卡片翻頁(yè)效果，文章很精彩，實(shí)現(xiàn)步驟很詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了Android中自定義一個(gè)View的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android中自定義View的具體步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-07-07
Android自定義收音機(jī)搜臺(tái)控件RadioRulerView
這篇文章主要為大家詳細(xì)介紹了Android自定義收音機(jī)搜臺(tái)控件RadioRulerView的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04