在手机QQ上切换封面主题板块,以及在某些App Shop中,我们经常看见Gallery效果的影子,但Gallery以及被一起了,这里我们实现使用ViewPager实现Gallery效果
布局文件:
(注意,根布局和ViewPager都要使用android:clipChildren="false",表示当显示内容区域超过控件区域,
是否裁剪内容区域的宽度和高度,以实现遮盖超出区域,默认是true)
<?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"
android:id="@+id/gallery_viewpager_layout"
android:clipChildren="false"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/gallery_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:clipChildren="false"
/>
</LinearLayout>
代码文件
public class ViewPagerGallery extends Activity {
private ViewPager mGalleryViewPager;
private LinearLayout mViewPagerContainer;
private int pagerWidth = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_gallery);
mGalleryViewPager = (ViewPager)findViewById(R.id.gallery_viewpager);
mViewPagerContainer = (LinearLayout)findViewById(R.id.gallery_viewpager_layout);
pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels*3.0f/5.0f);
mGalleryViewPager.measure(0, 0);
LayoutParams lp = mGalleryViewPager.getLayoutParams();
if(lp==null)
{
lp = new LayoutParams(pagerWidth,LayoutParams.MATCH_PARENT);
}else{
lp.width = pagerWidth;
}
mGalleryViewPager.setLayoutParams(lp);//设置页面宽度为屏幕的3/5
mGalleryViewPager.setOffscreenPageLimit(4); //设置ViewPager至多缓存4个Pager页面,防止多次加载
mGalleryViewPager.setPageMargin(50); //设置Pager之间的间距
mGalleryViewPager.setAdapter(new GalleryPagerAdapter());
mGalleryViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
if (mViewPagerContainer != null)
{
mViewPagerContainer.invalidate(); //更新超出区域页面,否则会出现页面缓存,导致页面效果不佳
}
}
});
}
private class GalleryPagerAdapter extends PagerAdapter
{
@Override
public int getCount()
{
return 6;
}
@Override
public boolean isViewFromObject(View view, Object obj)
{
return view==obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView((ImageView)object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
int resId = getResources().getIdentifier("img0".concat(String.valueOf(position)), "drawable", getPackageName());
ImageView imageView = createImageView(resId);
((ViewPager)container).addView(imageView, position);
return imageView;
}
public ImageView createImageView(int resId)
{
ImageView iv = new ImageView(ViewPagerGallery.this);
LayoutParams lp = iv.getLayoutParams();
if(lp==null)
{
lp = new LayoutParams(pagerWidth, LayoutParams.MATCH_PARENT);
}else{
lp.width = pagerWidth;
lp.height = LayoutParams.MATCH_PARENT;
}
iv.setScaleType(ScaleType.FIT_CENTER);
iv.setImageResource(resId);
iv.setLayoutParams(lp);
return iv;
}
}
}
Try doing it;