PagerView实现翻页效果

最新推荐文章于 2025-08-07 23:59:18 发布

iteye_6233

最新推荐文章于 2025-08-07 23:59:18 发布

阅读量115

点赞数

文章标签：移动开发

本文详细介绍了如何使用Android SDK中的View Pager组件创建一个简要的介绍页面，通过左右滑动展示应用的基本情况和使用方法。通过XML布局文件定义不同页面的内容，并使用自定义适配器和监听器实现页面切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在很多应用都在第一次启动时提供一个简要的介绍，以左右滑动的效果来介绍应用的使用和基本情况。下面将实现一个简单的Demo

首先到SDK的extra目录下找到android-support-v4.jar

首先看一下工程结构：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guidePages"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="15dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

然后新建page1.xml文件

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical" >  
      
    <ImageView    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:background="@drawable/a" >    
    </ImageView>  
      
</LinearLayout>

page2.xml、page3.xml一样，只要改变图片路径就行

然后编辑Activity

public class ViewPagerActivity extends Activity {
	
	private ViewPager viewPager;    
    private ArrayList<View> pageViews;    
    private ViewGroup main;
    private ViewGroup group;
    private ImageView imageView;    
    private ImageView[] imageViews;   
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.main);
        
        LayoutInflater inflater = getLayoutInflater();
        pageViews = new ArrayList<View>();
        pageViews.add(inflater.inflate(R.layout.page1, null));
        pageViews.add(inflater.inflate(R.layout.page2, null));
        pageViews.add(inflater.inflate(R.layout.page3, null));
        
        imageViews = new ImageView[pageViews.size()];
        
        main = (ViewGroup)inflater.inflate(R.layout.main, null);
        
        //group是底部导航小圆点的布局
        group = (ViewGroup)main.findViewById(R.id.viewGroup);
        
        viewPager = (ViewPager)main.findViewById(R.id.guidePages);    
        
        for (int i = 0; i < pageViews.size(); i++) {    
            imageView = new ImageView(ViewPagerActivity.this);    
            imageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));    
            imageViews[i] = imageView;    
            if (i == 0) {    
                //默认选中第一张图片  
                imageViews[i].setBackgroundResource(R.drawable.indicator_f);    
            } else {    
                imageViews[i].setBackgroundResource(R.drawable.indicator);    
            }    
            group.addView(imageViews[i]);    
        }    
    
        setContentView(main);    
    
        viewPager.setAdapter(new ViewPagerAdapter());    
        viewPager.setOnPageChangeListener(new ViewPagerChangeListener());
        
    }
    
    class ViewPagerAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return pageViews.size();
		}

		@Override    
        public boolean isViewFromObject(View arg0, Object arg1) {    
            return arg0 == arg1;    
        }    
    
        @Override    
        public void destroyItem(View arg0, int arg1, Object arg2) {    
            ((ViewPager) arg0).removeView(pageViews.get(arg1));    
        }    
    
        @Override    
        public Object instantiateItem(View arg0, int arg1) {    
            ((ViewPager) arg0).addView(pageViews.get(arg1));    
            return pageViews.get(arg1);    
        }    
    
    }
    
    class ViewPagerChangeListener implements OnPageChangeListener
    {

		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public void onPageSelected(int position) {
			for (int i = 0; i < imageViews.length; i++) {    
                imageViews[position].setBackgroundResource(R.drawable.indicator_f);    
                if (position != i) {    
                    imageViews[i].setBackgroundResource(R.drawable.indicator);    
                }    
            }  
		}
    }
}

运行，效果图如下，不是很美观，实际使用替换图片就行，需要源码的童鞋可以联系我。我的新浪微博唐韧_Ryan