**(注:本篇文章的例子使用的是ConstraintLayout布局方式)
ViewPage有两种使用方式,一是直接加载布局文件(使用PagerAdapter),二是加载fragment(使用FragmentPagerAdapter)。**
效果图:
一、直接加载布局文件
1.在主布局中加入ViewPage
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.test.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPage"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"></android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>
2.新建三个layout
为了方便我们新建三个基本一样的layout。
layout1:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:text="layout1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"
android:layout_marginLeft="0dp" />
</android.support.constraint.ConstraintLayout>
layout2:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:text="layout2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"
android:layout_marginLeft="0dp"
app:layout_constraintHorizontal_bias="0.0" />
</android.support.constraint.ConstraintLayout>
layout3:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:text="layout3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1"
android:layout_marginLeft="0dp" />
</android.support.constraint.ConstraintLayout>
这三个布局是添加到ViewPage中的,里面的内容非常简单,当然我们只是为了测试,你可以在其中加入更多的东西。
3.适配器PagerAdapter
新建ViewPageAdapter继承自PagerAdapter:
package com.example.test;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by Administrator on 2017/7/11.
*/
public class ViewPageAdapter extends PagerAdapter {
private List<View> list;
public ViewPageAdapter(List<View> list) {
this.list = list;
}
/**
* @return 返回要滑动的VIew的个数
*/
@Override
public int getCount() {
return list.size();
}
/**
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* @param container
* @param position
* @return 做了两件事,第一:将当前视图添加到container中,第二:返回当前View
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
/**
* @param container 从当前container中删除指定位置(position)的View
* @param position
* @param object
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
}
4.在Activity中配置ViewPage
package com.example.test;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private View view1, view2, view3;
private ViewPager viewPager; //对应的viewPager
private List<View> viewList;//view数组
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPage);
LayoutInflater inflater=getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3, null);
viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
ViewPageAdapter adapter = new ViewPageAdapter(viewList);
viewPager.setAdapter(adapter);
}
}
上面的代码将layout加载到view中,把view放到数组中并设置到Adapter中,最后给ViewPage设置Adapter。到这里第一种方式实现ViewPage就完成了。
二、加载fragment
通过加载fragment设置ViewPage与第一种方式的前两步一样,加载主布局和新建三个layout这里省略直接进行第三步。
3.新建fragment
fragment1:
package com.example.test;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* A simple {@link Fragment} subclass.
*/
public class Fragment1 extends Fragment {
public Fragment1() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView=inflater.inflate(R.layout.layout1, container, false);
return rootView;
}
}
fragment2:
package com.example.test;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
*/
public class Fragment2 extends Fragment {
public Fragment2() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView=inflater.inflate(R.layout.layout2, container, false);
return rootView;
}
}
fragment3:
package com.example.test;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A simple {@link Fragment} subclass.
*/
public class Fragment3 extends Fragment {
public Fragment3() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView=inflater.inflate(R.layout.layout3, container, false);
return rootView;
}
}
代码很简单,这里新建了三个fragment,分别加载三个layout。
4.适配器FragmentPagerAdapter
新建ViewPageFragmentAdapter继承自FragmentPagerAdapter:
package com.example.test;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2017/7/11.
*/
public class ViewPageFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList = new ArrayList<>();
public ViewPageFragmentAdapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment) {
fragmentList.add(fragment);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
除了必须要实现的几个方法外,这里我自定义了一个方法addFragment(),用于将fragment传递进来。
5.在Activity中配置ViewPage
package com.example.test;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager; //对应的viewPager
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPage);
ViewPageFragmentAdapter adapter = new ViewPageFragmentAdapter(getSupportFragmentManager());
adapter.addFragment(new Fragment1());
adapter.addFragment(new Fragment2());
adapter.addFragment(new Fragment3());
viewPager.setAdapter(adapter);
}
}
新建适配器,将fragment加入到适配器中并给ViewPage设置适配器。到这里ViewPage的第二种使用方式也讲完了。我的下一篇文章会写ViewPage与TabLayout和BottomNavigationView的组合使用,有兴趣的小伙伴可以继续阅读。