Android基础之首页广告轮播效果

最新推荐文章于 2024-06-16 11:17:26 发布

一枚-狗子

最新推荐文章于 2024-06-16 11:17:26 发布

阅读量2.3k

点赞数 3

分类专栏： Android基础文章标签： android 广告 viewpager 图片

本文链接：https://blog.csdn.net/chenliguan/article/details/50977808

版权

Android基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

1 我们经常打开一个App会看到有广告图片轮播的效果，首先上效果图

广告图片轮播

2 实现的过程

2.1 轮播页面他是一个ViewPager

2.2 然后我们使用RelativeLayout来把小圆点放置在图片上，然后滑动时动态修改小圆点的背景，就产生了滑动的效果

2.3 自动滑动的效果，我们可以利用ScheduledExecutorService这个类来实现，他可以周期性的执行任务，这样就可以自动滑动了

3 要点说明

3.1 public void onPageScrollStateChanged(int arg0) {}

通过网上查找发现当ViewPager页面滑动时，arg0有三种不同的参数
①当arg0 =1使表示手势滑动
②当arg0 =2时表示页面自动滑动
④当arg0 =3,表示滑动到最后一页

3.2 通过这些参数，我们就可以然手动滑动的时候关闭自动滑动功能

3.3 当滑动到最后一面时，把ViewPager当前项设置到第一页

3.4 在写这个功能的时候，把高分辨率的图片放在了自定义的mipmap文件夹下，这样如果图片一些，就会引发内存溢出异常，当图片一大，这样程序就会需要很多的内存来加载，这在android中是不行，所以我们应该把图片放在对应的drawable文件下，就可避免这种情况，系统应该在后台自动处理了

4 下面填出实现的源代码，在最后会有完整源码的下载链接

4.1 MainActivity

import android.app.ActionBar.LayoutParams;

public class MainActivity extends Activity {

    private LayoutInflater inflater;
    private ViewPager mviewPager;
    private LinearLayout dotLayout;//底部Layout布局

    private List<ImageView> dotViewList;//用于小圆点图片
    private List<ImageView> list;//用于存放轮播效果图片
    private int currentItem = 0;//当前页面
    boolean isAutoPlay = true;//是否自动轮播

    private ScheduledExecutorService scheduledExecutorService;//定时周期执行指定的任务

    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 100) {
                mviewPager.setCurrentItem(currentItem);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        inflater = LayoutInflater.from(MainActivity.this);

        mviewPager = (ViewPager) findViewById(R.id.myviewPager);
        dotLayout = (LinearLayout) findViewById(R.id.dotLayout);
        dotLayout.removeAllViews();

        initView();

        if (isAutoPlay) {
            startPlay();
        }
    }

    public void initView() {
        dotViewList = new ArrayList<ImageView>();
        list = new ArrayList<ImageView>();

        for (int i = 0; i < 4; i++) {
            ImageView dotView = new ImageView(MainActivity.this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new LayoutParams(
                    LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));

            params.leftMargin = 15;//设置小圆点的外边距
            params.rightMargin = 15;

            params.height = 40;//设置小圆点的大小
            params.width = 40;

            if (i == 0) {
                dotView.setBackgroundResource(R.mipmap.point_pressed);
            } else {
                dotView.setBackgroundResource(R.mipmap.point_unpressed);
            }
            dotLayout.addView(dotView, params);
            dotViewList.add(dotView);
            //上面是动态添加了四个小圆点
        }

        ImageView img1 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
        ImageView img2 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
        ImageView img3 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);
        ImageView img4 = (ImageView) inflater.inflate(R.layout.scroll_vew_item, null);

        img1.setBackgroundResource(R.mipmap.main_img1);
        img2.setBackgroundResource(R.mipmap.main_img2);
        img3.setBackgroundResource(R.mipmap.main_img3);
        img4.setBackgroundResource(R.mipmap.main_img4);

        list.add(img1);
        list.add(img2);
        list.add(img3);
        list.add(img4);

        ImagePaperAdapter adapter = new ImagePaperAdapter((ArrayList) list);

        mviewPager.setAdapter(adapter);
        mviewPager.setCurrentItem(0);
        mviewPager.setOnPageChangeListener(new MyPageChangeListener());

    }

    /**
     * 开始轮播图切换
     */
    private void startPlay() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        //根据他的参数说明，第一个是执行的任务，第二个是第一次执行的间隔，第三个是执行任务的间隔，第三个是计时单位；
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 2, TimeUnit.SECONDS);
    }

    /**
     * 执行轮播图切换任务
     */
    private class SlideShowTask implements Runnable {

        @Override
        public void run() {
            synchronized (mviewPager) {
                currentItem = (currentItem + 1) % list.size();
                handler.sendEmptyMessage(100);
            }
        }
    }

    /**
     * ViewPager的监听器
     * 当ViewPager中页面的状态发生改变时调用
     */
    private class MyPageChangeListener implements OnPageChangeListener {

        boolean isAutoPlay = false;

        @Override
        public void onPageScrollStateChanged(int arg0) {
            switch (arg0) {
                case 1:// 手势滑动，空闲中
                    isAutoPlay = false;
                    System.out.println(" 手势滑动，空闲中");
                    break;
                case 2:// 界面切换中
                    isAutoPlay = true;
                    System.out.println(" 界面切换中");
                    break;
                case 0:// 滑动结束，即切换完毕或者加载完毕
                    // 当前为最后一张，此时从右向左滑，则切换到第一张
                    if (mviewPager.getCurrentItem() == mviewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
                        mviewPager.setCurrentItem(0);
                        System.out.println(" 滑动到最后一张");
                    }
                    // 当前为第一张，此时从左向右滑，则切换到最后一张
                    else if (mviewPager.getCurrentItem() == 0 && !isAutoPlay) {
                        mviewPager.setCurrentItem(mviewPager.getAdapter().getCount() - 1);
                        System.out.println(" 滑动到第一张");
                    }
                    break;
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int pos) {
            //这里面动态改变小圆点的被背景，来实现效果
            currentItem = pos;
            for (int i = 0; i < dotViewList.size(); i++) {
                if (i == pos) {
                    ((View) dotViewList.get(pos)).setBackgroundResource(R.mipmap.point_pressed);
                } else {
                    ((View) dotViewList.get(i)).setBackgroundResource(R.mipmap.point_unpressed);
                }
            }
        }
    }
}

4.2 ImagePaperAdapter


public class ImagePaperAdapter extends PagerAdapter {

	private ArrayList<ImageView>list;
	public ImagePaperAdapter(ArrayList<ImageView> list) {
		this.list = list;
	}

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

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}
	
    @Override    
    public void destroyItem(ViewGroup container, int position,    
            Object object) {    
        //Warning：不要在这里调用removeView  
    }
	
	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		ImageView view = list.get(position) ;
		ViewParent vp =  view.getParent();
		if(vp != null){
			ViewGroup parent = (ViewGroup)vp;
			parent.removeView(view);
		}
		//上面这些语句必须加上，如果不加的话，就会产生则当用户滑到第四个的时候就会触发这个异常
		//原因是我们试图把一个有父组件的View添加到另一个组件。
		((ViewPager)container).addView(list.get(position));
		
		System.out.println("------------");
		return list.get(position);
	}
}

4.3 activity_main.xml

<LinearLayout 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="com.example.demo_image_scroll.MainActivity" >

    <RelativeLayout
        android:id="@+id/slideView"
        android:layout_width="match_parent"
        android:layout_height="160.0dip" >

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

        <LinearLayout
            android:id="@+id/dotLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="8dp" >

            <View
                android:id="@+id/v_dot1"
                android:layout_width="8dp"
                android:layout_height="8dp"
                android:background="@mipmap/point_pressed" />

            <View
                android:id="@+id/v_dot2"
                android:layout_width="8dp"
                android:layout_height="8dp"
                android:layout_marginLeft="5dp"
                android:background="@mipmap/point_unpressed" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

4.4 scroll_vew_item.xml

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:scaleType="fitXY" />

5 完整源码的下载链接

下载链接

一枚-狗子

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
Android基础之首页广告轮播效果

1 我们经常打开一个App会看到有广告图片轮播的效果，首先上效果图2 实现的过程2.1 轮播页面他是一个ViewPager2.2 然后我们使用RelativeLayout来把小圆点放置在图片上，然后滑动时动态修改小圆点的背景，就产生了滑动的效果2.3 自动滑动的效果，我们可以利用ScheduledExecutorService这个类来实现，他可以周期性的执行任务，这样就可以自动滑动了3 要点说明3.
复制链接

扫一扫

专栏目录