此文,仅做为个人学习Android,记录成长以及方便复习!
实现ViewPager实现类似微信的页面切换,此文通过Fragment适配器实现
首先在布局文件 Activity _main.xml添加ViewPager
ViewPager是页面,PagerTabStrip和 PagerTitleStrip是设置标题的
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="#34;
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="#34;
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="#34;
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="#34;
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 savedInstance state ) {
//布局文件转成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有
效果如下图