无限轮播

最新推荐文章于 2018-06-04 20:18:43 发布

hyl411136528

最新推荐文章于 2018-06-04 20:18:43 发布

阅读量485

点赞数 1

分类专栏：初始页面-动态展示内文章标签： viewpager 轮播无限轮播

本文链接：https://blog.csdn.net/hyl411136528/article/details/52690343

版权

初始页面-动态展示内专栏收录该内容

0 篇文章 0 订阅

订阅专栏

轮播 ———–与———无限轮播

应用情景

无限轮播常见的应用有新闻类app，其对新闻进行滚动，点击后跳转到该新闻页面

无限轮播还常见于动态展示图片，丰富界面

轮播常见于手机app导航页面，跳转后进入主页面，再次进入后显示单个图片，自动或手动跳转

注意事项

1.网络加载注意添加internet 方法。

主要技术

采用技术主要有 ViewPager,viewPager的setOnPageChangeListener事件，imageView的OnTouchListener()事件，xUtils中BitmapUtils 的display()方法或者ImageLoader 的展示图片的方法，动态加载图片，自定义 shape。

主要功能实现

无限轮播，本地图片展示思路

1.页面布局，常用 FrameLayout,里面设置ViewPager和展示小原点的父布局

2.1初始化控件，初始化viewPager和小圆点的父布局，一般为线性布局

2.2初始化小圆点

3.初始化数据设置图片来源，为本地图片还是网络请求地址，采用不同的方式处理

4.设置适配器

5.设置相应的事件

功能点

1.轮播功能

设置初始位置

vp.setCurrentItem(10000*datas.length);
- Integer.MAX_VALUE 设置最大数，ViewPager就能不会滑到头
- 实例化ImageView,往ViewPager添加数据；由于图片源少，而展示个数posstion多，取余实现图片源和posstion 匹配
  
  ImageView image=new ImageView(MainActivity.this); int index=position%datas.length; //设置图片源 image.setImageResource(datas[index]); image.setScaleType(ImageView.ScaleType.CENTER_CROP); //设置宽高 image.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); container.addView(image);

2.自动播放

`Handler mHandler=new Handler(){
    public void handleMessage(android.os.Message msg) {
        int item = vp.getCurrentItem();
        vp.setCurrentItem(++item);
        mHandler.sendEmptyMessageDelayed(0, 1000);
    };
};`

oncreat()方法中，初次调用

`mHandler.sendEmptyMessageDelayed(0, 1000);`

3.自动轮播，点击图片暂停，离开后继续自动播放

实现触摸监听事件，效果为点击不进行自动播放

    `
    image.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mHandler.removeCallbacksAndMessages(null);
                break;
            case MotionEvent.ACTION_UP:
                mHandler.sendEmptyMessageDelayed(0, 1000);
                break;
            case MotionEvent.ACTION_CANCEL:
                mHandler.sendEmptyMessageDelayed(0, 1000);
                break;

            default:
                break;
            }
            return true;
        }
    });

4.网络图片处理现主要为两种方式，一种为 xUtils, 一为 ImageLoader

`BitmapUtils bitmapUtils=new BitmapUtils(context);
    bitmapUtils.display(img, list.get(index));` 

`ImageLoader.getInstance().displayImage(list.get(position), img,options);`

完整代码

布局

`<FrameLayout 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"
 >
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
    <LinearLayout 
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="center"
        ></LinearLayout>

</FrameLayout>`

原点一,聚焦的圆点

`<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#ff7575"/>

</shape>`

原点二，正常的圆点

`<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#c7c7e2"/>
</shape>`

主要代码

`import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    private List<ImageView> list;
private int []datas=new int[]{R.drawable.guide1,R.drawable.guide11,R.drawable.guide12,R.drawable.guide13,R.drawable.guide2,R.drawable.guide3};
    Handler mHandler=new Handler(){
        public void handleMessage(android.os.Message msg) {
            int item = vp.getCurrentItem();
            vp.setCurrentItem(++item);
            mHandler.sendEmptyMessageDelayed(0, 1000);
        };
    };
    private ViewPager vp;
    private LinearLayout ll;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        //初始化控件

        vp = (ViewPager) findViewById(R.id.vp);
        ll = (LinearLayout) findViewById(R.id.ll);
        vp.setAdapter(new MyAdapter());
        vp.setCurrentItem(10000*datas.length);
        mHandler.sendEmptyMessageDelayed(0, 1000);
        //初始化 View
        initDot();
        //设置监听事件
        vp.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                for(int i=0;i<list.size();i++){
                    int j=arg0%list.size();
                    if(j==i){
                        list.get(i).setImageResource(R.drawable.dot_focus);
                    }else{
                        list.get(i).setImageResource(R.drawable.dot_nomal);
                    }
                }

            }

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

            }

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

            }
        });
    }
    private void initDot() {
        list=new ArrayList<ImageView>();
        for(int i=0;i<datas.length;i++){
            ImageView img=new ImageView(this);
            img.setLayoutParams(new ViewGroup.MarginLayoutParams(20, 20));
            //设置默认
            if(i==0){
                img.setImageResource(R.drawable.dot_focus);
            }else{
                img.setImageResource(R.drawable.dot_nomal);
            }
            list.add(img);
            ll.addView(img);
        }

    }
    class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0==arg1;
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView image=new ImageView(MainActivity.this);
            int index=position%datas.length;
            //设置图片源
            image.setImageResource(datas[index]);
            image.setScaleType(ImageView.ScaleType.CENTER_CROP);
            //设置宽高
            image.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            container.addView(image);
            image.setOnTouchListener(new OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mHandler.removeCallbacksAndMessages(null);
                        break;
                    case MotionEvent.ACTION_UP:
                        mHandler.sendEmptyMessageDelayed(0, 1000);
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        mHandler.sendEmptyMessageDelayed(0, 1000);
                        break;

                    default:
                        break;
                    }
                    return true;
                }
            });
            return image;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((ImageView)object);
        }

    }
}

`

hyl411136528

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限轮播

轮播 ———–与———无限轮播应用情景无限轮播常见的应用有新闻类app，其对新闻进行滚动，点击后跳转到该新闻页面无限轮播还常见于动态展示图片，丰富界面轮播常见于手机app导航页面，跳转后进入主页面，再次进入后显示单个图片，自动或手动跳转注意事项1.网络加载注意添加internet 方法。主要技术采用技术主要有 ViewPager,viewPager的setOnPage
复制链接

扫一扫