viewpager實現畫廊(一屏多個Fragment)效果

本文主要介紹如何利用ViewPager實現Gallery的畫廊效果，即一屏顯示多個Fragment。

效果圖如下：

在使用Gallery的時候大家會發現有幾個問題(1). 無法控制每次滑動只滑動一頁, (2). Gallery預設第一個item居中，無法修改它與Gallery的左間距。ViewPager可以方便的解決上面兩個問題，但預設卻無法在螢幕上顯示多個Fragment。
下面介紹如何利用ViewPager及android:clipChildren屬性解決這個問題。
1、定義xml

<font face="Georgia,"><b><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:layerType="software" >
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="250dp"
android:layout_height="450dp"
android:layout_gravity="center"
android:clipChildren="false" />
</RelativeLayout></b></font>

複製程式碼

發現上面的RelativeLayout(可以用其它layout替換)和ViewPager的android:clipChildren都設定為了false。android:clipChildren表示是否限制子View在其範圍內，在animations動畫以及本文的情況下可以發揮很大的作用。預設為true。 2、Java部分
這裡我們主要完成
(1). ViewPager設定
需要setOnPageChangeListener，在onPageScrolled(int position, float positionOffset, int positionOffsetPixels)函式中不斷重新整理layout。
還可以

viewPager.setOffscreenPageLimit(TOTAL_COUNT);
viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));

複製程式碼

setOffscreenPageLimit表示設定快取，這樣左右拖動即可看見後面的Fragment。setPageMargin表示設定Fragment之間的間距 (2). FrameLayout設定
需要setOnTouchListener函式中將滑動滑動事件傳遞給viewPager，否則只有viewPager中間的view可以滑動，設定後整個viewPager都可以滑動。
具體程式碼如下：

package com.trinea.android.demo;
import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
/**
* ViewPager實現畫廊效果
*
* @author Trinea 2013-04-03
*/
public class ViewPagerMulTiFragmentDemo extends FragmentActivity {
private static int TOTAL_COUNT = 3;
private RelativeLayout viewPagerContainer;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view_pager_multi_fragment_demo);
viewPager = (ViewPager)findViewById(R.id.view_pager);
viewPagerContainer = (RelativeLayout)findViewById(R.id.pager_layout);
viewPager.setAdapter(new MyPagerAdapter());
// to cache all page, or we will see the right item delayed
viewPager.setOffscreenPageLimit(TOTAL_COUNT);
viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin));
MyOnPageChangeListener myOnPageChangeListener = new MyOnPageChangeListener();
viewPager.setOnPageChangeListener(myOnPageChangeListener);
viewPagerContainer.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view.
return viewPager.dispatchTouchEvent(event);
}
});
}
/**
* this is a example fragment, just a imageview, u can replace it with your needs
*
* @author Trinea 2013-04-03
*/
class MyPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return TOTAL_COUNT;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(ViewPagerMulTiFragmentDemo.this);
imageView.setImageResource(R.drawable.image1 + position);
((ViewPager)container).addView(imageView, position);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView((ImageView)object);
}
}
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// to refresh frameLayout
if (viewPagerContainer != null) {
viewPagerContainer.invalidate();
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}

複製程式碼

可能執行後出現viewpager的部分Fragment無法看見或是突然消失的問題，請確保RelativeLayout和ViewPager的 android:clipChildren都設定為了false並且 viewPager.setOffscreenPageLimit(TOTAL_COUNT);其中TOTAL_COUNT大於0. 當然子Fragment本身不能是match_parent的。viewpager設定了paddingTop也會導致無法實現畫廊而只是顯示一屏。

viewpager實現畫廊(一屏多個Fragment)效果

相關文章