android轮播图效果

作者: 我妈叫我二乖 | 来源:发表于2016-10-12 14:58 被阅读695次

先上效果图：

viewpager.gif

viewpager+handler+runnableTask实现轮播图效果。可以自动轮播，左右无限滑动。

数据我就不提供啦，我用的是公司的数据。页面跳转取消轮播，页面返回，继续轮播。使用eventbus对轮播图点击事件进行处理。

package com.example.sunxiaokun.retrofixandrxjava;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.example.sunxiaokun.retrofixandrxjava.utils.MyViewPager;

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

import de.greenrobot.event.EventBus;
import de.greenrobot.event.Subscribe;
import de.greenrobot.event.ThreadMode;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

/**
 * Created by sxk on 2016/9/29.
 */
public class SecondActivity extends Activity {

    private MyViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        EventBus.getDefault().register(this);

        mViewPager = (MyViewPager) findViewById(R.id.mvp);
        List<String> list = new ArrayList<>();
        list.add("");
        list.add("");
        list.add("");
        list.add("");
        mViewPager.setTList(list);

    }

    @Override
    protected void onRestart() {
        super.onRestart();
        mViewPager.setStartRoll();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mViewPager.setCancleHandle();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        EventBus.getDefault().unregister(this);
    }

    @Subscribe(threadMode = ThreadMode.MainThread)
    public void onClick(String info){
        Toast.makeText(this,info,Toast.LENGTH_SHORT).show();
    }
 
}

xml.布局

<?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:orientation="vertical">

    <com.example.sunxiaokun.retrofixandrxjava.utils.MyViewPager
        android:id="@+id/mvp"
        android:layout_width="match_parent"
        android:layout_height="230dp"/>
</LinearLayout>

自定义view

package com.example.sunxiaokun.retrofixandrxjava.utils;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by sxk on 2016/10/10.
 */
public class MyViewPager<T> extends FrameLayout {

    private ViewPager mViewPager;
    private MyIndicator mMyIndicator;
    private MyPagerAdapter mMyPagerAdapter;
    private List<T> mTList;
    private ImageView mImageView;
    private Context mContext;
    public MyViewPager(Context context) {
        super(context);
        init(context);
    }

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init(context);
    }

    public MyViewPager(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mViewPager = new ViewPager(context);
        FrameLayout.LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        mViewPager.setLayoutParams(layoutParams);
        addView(mViewPager);

        mMyIndicator = new MyIndicator(context);
        FrameLayout.LayoutParams inLayoutParams =
                new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mMyIndicator.setGravity(Gravity.BOTTOM);
        addView(mMyIndicator,inLayoutParams);

        mMyPagerAdapter = new MyPagerAdapter(context,mTList, mViewPager);
        mViewPager.setAdapter(mMyPagerAdapter);
    }

    public void setTList(List<T> list){
        mMyPagerAdapter.setList(list);
        mMyIndicator.init(mContext, 4, mViewPager);
    }

    public void setCancleHandle(){
        mMyPagerAdapter.cancleHandle();
    }

    public void setStartRoll(){
        mMyPagerAdapter.startRoll();
    }
}

pageradapter:

package com.example.sunxiaokun.retrofixandrxjava.utils;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.example.sunxiaokun.retrofixandrxjava.R;

import java.util.List;

import de.greenrobot.event.EventBus;

/**
 * Created by sxk on 2016/10/10.
 */
public class MyPagerAdapter <T> extends PagerAdapter {
    private Context mContext;
    private List<T> list;
    private ViewPager mViewPager;
    private int curretPosition;
    private RunnableTask runnableTask;

    public MyPagerAdapter(Context context, List<T> list, ViewPager viewPager) {
        this.mContext = context;
        this.list = list;
        this.mViewPager = viewPager;
    }

    @Override
    public int getCount() {
        if(list == null || list.size() == 0)
            return 0;
        else if(list.size() == 1)
            return 1;
        return Integer.MAX_VALUE;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        int index = list.size();
        position = position % index;
        // 加网络下载下来的图片
        View view = View.inflate(mContext, R.layout.viewpager_item, null);
        ImageView image = (ImageView) view.findViewById(R.id.image);
        // 通过Glide提供的工具类异步下载缓存图片
        Glide.with(mContext).load(list.get(position)).
                placeholder(R.drawable.home_top_default_bg_banner).into(image);
        container.addView(view);
        view.setOnTouchListener(new View.OnTouchListener() {
            private int downX;
            private int downY;
            private long downTime;

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        // 轮播图不再滚动,取消维护的任务,发送的消息
                        handler.removeCallbacksAndMessages(null);
                        // 1,按下的坐标点
                        downX = (int) event.getX();
                        downY = (int) event.getY();
                        downTime = System.currentTimeMillis();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        break;
                    case MotionEvent.ACTION_UP:
                        // 让轮播图再次滚动起来
                        if (System.currentTimeMillis() - downTime < 500) {
                            EventBus.getDefault().post("点击啦");
                        }
                        startRoll();
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        startRoll();
                        break;
                }
                return true;
            }
        });
        return view;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            // 让viewpager按照维护的索引去指向界面
            mViewPager.setCurrentItem(curretPosition);
            // 一直去维护runnable任务去滚动起来
            startRoll();
        }
    };

    public void startRoll() {
        notifyDataSetChanged();
        // 2,滚动起来(1,定时器2,handler)
        handler.postDelayed(runnableTask, 3000);
    }

    class RunnableTask implements Runnable {
        @Override
        public void run() {
            curretPosition = mViewPager.getCurrentItem() + 1;
            // 发送消息api
            handler.obtainMessage().sendToTarget();
        }
    }

    public void setList(List<T> list){
        this.list = list;
        mViewPager.setCurrentItem(list.size()*1000);
        notifyDataSetChanged();
        if(list != null && list.size() > 0 && runnableTask == null){
            runnableTask = new RunnableTask();
            startRoll();
        }

    }

    public void cancleHandle(){
        handler.removeCallbacksAndMessages(null);
    }
}

指示器：

package com.example.sunxiaokun.retrofixandrxjava.utils;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.example.sunxiaokun.retrofixandrxjava.R;

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

/**
 * Created by sunxiaokun on 2016/10/10.
 */
public class MyIndicator extends RelativeLayout {
    public MyIndicator(Context context) {
        super(context);
    }

    public MyIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    public void init(Context mContext, final int size, ViewPager viewPager){
        FrameLayout.LayoutParams indicatorLayoutParams
                = new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                UICommonUtil.dip2px(mContext, 30));
        LinearLayout linearLayout = new LinearLayout(mContext);
        linearLayout.setGravity(Gravity.BOTTOM| Gravity.CENTER_HORIZONTAL);

        linearLayout.setBackgroundColor(R.color.colorPrimaryDark);
        addView(linearLayout, indicatorLayoutParams);
        final List<View> viewList = new ArrayList<View>();
        for (int i = 0; i < size; i++) {
            View view = new View(mContext);
            view.setBackgroundResource(i == 0 ? R.drawable.selected : R.drawable.unselected);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(UICommonUtil.dip2px(mContext, 6), UICommonUtil.dip2px(mContext, 6));
            layoutParams.setMargins(0, 0, UICommonUtil.dip2px(mContext, 6), UICommonUtil.dip2px(mContext, 12));
            linearLayout.addView(view, layoutParams);
            viewList.add(view);
            //小于一张图片数轮播点不显示
            linearLayout.setVisibility(size <= 1 ? INVISIBLE : VISIBLE);

        }


        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                if (size != 0) {
                    int index = arg0 % size;
                    for (int i = 0; i < size; i++) {
                        View view = viewList.get(i);
                        view.setBackgroundResource(index == i? R.drawable.selected : R.drawable.unselected);
                    }
                }
            }

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

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }
}

小圆圈：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 白色小圆圈 -->
    <corners android:radius="3dp" />

    <solid android:color="#ffffff" />

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 灰色小圆圈 -->
    <corners android:radius="3dp" />

    <solid android:color="#474747" />

</shape>

android轮播图效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android

Android开发

ps

Android技术知识

Android知识

Android开发

程序员