android基础-----ViewPager实现简单的轮播图

最新推荐文章于 2024-04-22 20:55:23 发布

SundaySunshine

最新推荐文章于 2024-04-22 20:55:23 发布

阅读量931

点赞数 1

分类专栏： android

本文链接：https://blog.youkuaiyun.com/sundaysunshine/article/details/53674188

版权

android 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用android.support.v4.view.ViewPager实现简单的轮播图。ViewPager作为一个视图容器，可以从其Adapter获取数据并支持左右滑动切换。通常与Fragment配合使用，并提供FragmentPagerAdapter和FragmentStatePagerAdapter。此外，还提及了如何设置官方提供的视图切换动画。

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

ViewPager实现简单的轮播图

关于ViewPager实现轮播图

1.介绍：
android.support.v4.view.ViewPager
ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view。
1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。
4）geogle官方提供了view切换时的动画，当然我们也可以自定义动画，用ViewPager.setPageTransformer(boolean arg0,PageTransformer arg1)
arg0 为true，切换时childview 顺序，反之倒叙，区别就是切换时新页面（childView）到底是在顶层还是在原来就页面（viewParent）的底下。

geogle官方提供的view切换时的动画

package com.briup.viewpager;

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;


public class DepthPageTransformer implements PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (positn <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

1.先写好布局文件main_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp" >

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
        
        <ImageView
             android:id="@+id/lan_Iv"
             android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lan_bg"/>
        
    </RelativeLayout>

    <Button 
        android:id="@+id/btn"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"/>
    
</RelativeLayout>

2.为viewpager写一个适配器

package com.example.mydemo;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MyAdapther extends PagerAdapter {

	private ArrayList<ImageView> list;
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return list.size();
	}

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

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		// TODO Auto-generated method stub
		View view = list.get(position);
		container.addView(view);
		return view;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(list.get(position));
	}

	public MyAdapther(ArrayList<ImageView> list) {
		super();
		this.list = list;
	}

	public MyAdapther() {
		super();
		// TODO Auto-generated constructor stub
	}

}

3.写一个切换动画（有时间可以自己写这里直接用官方的）

4.装配并实现viewpager，同时获取每一次圆点移动的距离

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 放在setContentView()之前运行
		requestWindowFeature(Window.FEATURE_NO_TITLE);//设置全屏显示，无标题栏状态
		
		setContentView(R.layout.activity_main);

		initView();

		for (int i = 0; i < images.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setScaleType(ScaleType.FIT_XY);//设置图片拉伸方式
			iamgeList.add(imageView);

			// 根据图片的个数去放置相应数量的小灰点
			ImageView huiImageView = new ImageView(this);
			huiImageView.setImageResource(R.drawable.hui_bg);
            
 			
			LinearLayout.LayoutParams layoutParams=
					new LinearLayout.LayoutParams
					(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
			huiImageView.setLayoutParams(layoutParams);
			
			if(i>0){
				//给边距
				layoutParams.leftMargin=20;
			}
			
			linearLayout.addView(huiImageView);
		}

		
		
		
		viewPager.setAdapter(new MyAdapter());

5.为蓝色圆点添加时间监听。

//我们的代码现在都写在onCreate方法中，onCreate在调用的时候，界面底层的绘制工作还没有完成。所有，如果我们直接在onCreate方法里去拿距离，拿不到
	//dOnGlobalLayoutListener：在视图树全部都绘制完成的时候调用
		lan_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			
			@Override
			public void onGlobalLayout() {
				// TODO Auto-generated method stub
				/**
				 * 获取圆心每次要移动的距离
				 */
				pointWidth=linearLayout.getChildAt(1).getLeft()-linearLayout.getChildAt(0).getLeft();
		        System.out.println("pointWidth="+pointWidth);
			}
		});

6.当然你也可以将所有代码写在一起。例如：

package com.briup.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ToggleButton;

/**
 * 使用ViewPager来制作新手导航界面 
 * 1.ViewPager该怎么使用 
 * 1.1-布局文件中定义ViewPager 1.2-声明实例
 * 1.3-为ViewPager去指定一个PagerAdapter 1.3.1-自己写个类去继承PagerApdater
 * 1.3.2-实现里面的方法（默认需要我们实现两个，但是其实我们需要实现四个） 1.3.3-为ViewPager去指定一个PagerAdapter
 * 2.下面那几个小圆点怎么能够跟随着ViewPager发生改变 3.那么按钮是怎么实现的
 * 
 * @author wengshaobo
 * 
 */
public class MainActivity extends Activity {

	private int[] images = {R.drawable.guide_1, R.drawable.guide_2,
			R.drawable.guide_3, R.drawable.guide_4};
	private ViewPager viewPager;

	private List<ImageView> iamgeList;
	// 放4个小灰点的线性布局
	private LinearLayout linearLayout;
	private ImageView lan_Iv;
	
	private int pointWidth;
	
	private Button btn;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// 放在setContentView()之前运行
		requestWindowFeature(Window.FEATURE_NO_TITLE);//设置全屏显示，无标题栏状态
		
		setContentView(R.layout.activity_main);

		initView();

		for (int i = 0; i < images.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setScaleType(ScaleType.FIT_XY);//设置图片拉伸方式
			iamgeList.add(imageView);

			// 根据图片的个数去放置相应数量的小灰点
			ImageView huiImageView = new ImageView(this);
			huiImageView.setImageResource(R.drawable.hui_bg);
            
 			
			LinearLayout.LayoutParams layoutParams=
					new LinearLayout.LayoutParams
					(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
			huiImageView.setLayoutParams(layoutParams);
			
			if(i>0){
				//给边距
				layoutParams.leftMargin=20;
			}
			
			linearLayout.addView(huiImageView);
		}

		//我们的代码现在都写在onCreate方法中，onCreate在调用的时候，界面底层的绘制工作还没有完成。所有，如果我们直接在onCreate方法里去拿距离，拿不到
	//dOnGlobalLayoutListener：在视图树全部都绘制完成的时候调用
		lan_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			
			@Override
			public void onGlobalLayout() {
				// TODO Auto-generated method stub
				/**
				 * 获取圆心每次要移动的距离
				 */
				pointWidth=linearLayout.getChildAt(1).getLeft()-linearLayout.getChildAt(0).getLeft();
		        System.out.println("pointWidth="+pointWidth);
			}
		});
		
		
		
		
		viewPager.setAdapter(new MyAdapter());

		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			//滑动完成时触发的函数
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				if(position==images.length-1){
					btn.setVisibility(View.VISIBLE);
				}else {
					btn.setVisibility(View.GONE);

				}
			}
			
			@Override
			//在Viewpger的界面不断滑动的时候会触发
			//position：当前滑到了第几页
			
			public void onPageScrolled(int position, float offset, int arg2) {
				// TODO Auto-generated method stub
				
				RelativeLayout.LayoutParams layoutParams=(RelativeLayout.LayoutParams)lan_Iv.getLayoutParams();
				/**
				 * 动态改变指针的位置
				 */
				layoutParams.leftMargin=(int)(pointWidth*offset+position*pointWidth);
				lan_Iv.setLayoutParams(layoutParams);
				System.out.println("当前滑动的百分比   "+offset);
				
			}
			
			@Override
			public void onPageScrollStateChanged(int state) {
				// TODO Auto-generated method stub
				
			}
		});
		
		viewPager.setPageTransformer(true, new DepthPageTransformer());

	}
    /**
     * 用于初始化相关控件的方法
     */
	private void initView() {
		lan_Iv=(ImageView)findViewById(R.id.lan_Iv);
		linearLayout = (LinearLayout) findViewById(R.id.ll);
		btn=(Button)findViewById(R.id.btn);
		viewPager = (ViewPager) findViewById(R.id.vp);
		iamgeList = new ArrayList<ImageView>();
	}

	class MyAdapter extends PagerAdapter {

		@Override
		// 返回ViewPager里面有几页
		public int getCount() {
			// TODO Auto-generated method stub
			return images.length;
		}

		@Override
		// 用于判断是否有对象生成界面
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			/*
			 * 代码写的有问题，每次翻页的时候都需要new出新的ImageView，太浪费资源 ImageView imageView = new
			 * ImageView(MainActivity.this);
			 * imageView.setImageResource(images[position]);
			 * imageView.setScaleType(ScaleType.FIT_XY);
			 * container.addView(imageView);
			 */
			ImageView imageView = iamgeList.get(position);
			imageView.setImageResource(images[position]);
			container.addView(imageView);

			return imageView;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
			container.removeView((View) object);
		}

	}

}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。viewpager博大精深，只有用实践才能体会它所带来的视觉体验。。