ViewPager一屏显示多个子页面

多页面滑动切换的时候，有时我们想在一个屏幕上同时显示多个子页面，用于提示用户此处是有多个页面的，平时我们用ViewPger的时候，大多数情况都是一屏幕只显示一个子页面，但是偶尔有时候我们的开发要应付UI设计和项目的很多不同需求。废话不多说，下面我们看看ViewPager同事显示多个子页面的具体实现。

先上图，效果如下：

 


 

要实现这个效果，我们要用到ViewPager的一个属性clipChildren，当clipChildren为true时，系统会将超出当前View的子页面切掉，当clipChildren为false时，超出View的子页面，不会被切掉，仍然显示。注意使用clipChildren属性时，我们要把ViewPager以及它的父窗体都设置为android:clipChildren="false" 。

下面是具体的实现代码：

 

Activity布局文件 activity_main.xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="80dp"
android:clipChildren="false"
android:gravity="center_horizontal"
android:layerType="software"
android:orientation="horizontal" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false" >
</android.support.v4.view.ViewPager>

</LinearLayout>

ViewPager的子项布局viewitem.xml代码

<span style="font-size:14px;"><?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:background="#cccccc"
android:gravity="center_horizontal"
android:orientation="vertical" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="第一页" />

</RelativeLayout></span>

MainActivity 代码

<span style="font-size:14px;">package com.example.viewpagerclipchildren;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

private LinearLayout container;
private ViewPager viewpager;
private VpAdapter adapter;
private List<View> viewlist = new ArrayList<View>();

private int screenWidth = 0;
private String[] data = { "第一页", "第二页", "第三页", "第四页", "第五页", "第六页" };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 獲取屏幕寬度
DisplayMetrics dm = getResources().getDisplayMetrics();
screenWidth = dm.widthPixels;

initData();
initView();

}

private void initView() {
container = (LinearLayout) this.findViewById(R.id.container);
viewpager = (ViewPager) this.findViewById(R.id.viewpager);
viewpager.setOffscreenPageLimit(3); // viewpager缓存页数
viewpager.setPageMargin(30); // 设置各页面的间距

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
screenWidth / 3, LayoutParams.WRAP_CONTENT);
viewpager.setLayoutParams(params);

adapter = new VpAdapter(viewlist);
viewpager.setAdapter(adapter);
viewpager.setCurrentItem(1);

// 将父节点Layout事件分发给viewpager，否则只能滑动中间的一个view对象
container.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return viewpager.dispatchTouchEvent(event);
}
});
}

private void initData() {
int size = data.length;
for (int i = 0; i < size; i++) {
View view = LayoutInflater.from(this).inflate(R.layout.viewitem,
null);
viewlist.add(view);
}
}
}
</span>

VpAdapter 代码

<span style="font-size:14px;">package com.example.viewpagerclipchildren;

import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class VpAdapter extends PagerAdapter {
private List<View> viewlist;

public VpAdapter(List<View> viewlist) {
this.viewlist = viewlist;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return viewlist.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewlist.get(position), 0);
return viewlist.get(position);
}

}
</span>

代码中已经做了注释，剩下的就是自己撸代码测试了。