rxjava實(shí)現(xiàn)viwepage輪播圖,Glide,手勢(shì)操作,事件監(jiān)聽等

上一篇博客寫了類型QQ看圖片的輪播功能,其實(shí)有一點(diǎn)沒有講到,Android使用序列化接口Parcelable忌傻、Serializable.這個(gè)抽空更新下博客;
今天的主題是viewpage輪播圖,老生長談了,先來看下效果圖吧!

viewpager實(shí)現(xiàn)輪播圖有兩種思路,我這里主要用的思路是
原來的處理方式:圖1兆蕉，圖2体箕，圖3
現(xiàn)在的處理方式:新圖3姜凄、圖1、圖2暖璧、圖3弄喘、新圖1。
這樣的思路實(shí)現(xiàn)起來是很方便的;
來看具體實(shí)現(xiàn)的代碼吧!
布局文件其實(shí)就簡單viewpage和小滑點(diǎn)LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    tools:context="com.cs.test_rx3.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />
    <LinearLayout
        android:id="@+id/ll_ponit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:paddingBottom="12dp"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        >
    </LinearLayout>
</RelativeLayout>```
定制viewpage之前需要去設(shè)置適配器,這個(gè)方法是載入布局的時(shí)候需要用到
```    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        View view=mViews.get(position);
        if (myViewListenner != null){
            view.setOnClickListener(new View.OnClickListener() {
                // 處理極端情況贡蓖，此情況出現(xiàn)在輪播最后一張圖切換到第一張圖曹鸠，ViewPaper實(shí)現(xiàn)輪播原理決定的。
                //因?yàn)関iew層次和數(shù)據(jù)層次進(jìn)行分開處理了,所有需要額外寫下
                @Override
                public void onClick(View view) {
                    vPonsiton = position;
                    //  如果不寫size!=0會(huì)報(bào)異常java.lang.ArithmeticException: divide by zero size為0的情況下
                    if (vPonsiton >size && size!=0) {
                        vPonsiton = vPonsiton % size;
                    }
                    myViewListenner.onItemClick(vPonsiton);
                }
            });
        }
        container.addView(view);
        return view;
    }

*主代碼文件

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    // 默認(rèn)輪播時(shí)間
    private int delay = 3000;
    private MyAdapter myAdapter;
    // 輪播當(dāng)前位置
    private int mCurrentPosition = 0;
    private LinearLayout ponit;
    private String[] Imgs = {
            "http://ww3.sinaimg.cn/large/610dc034jw1f9em0sj3yvj20u00w4acj.jpg",
            "http://ww3.sinaimg.cn/large/610dc034jw1f9nuk0nvrdj20u011haci.jpg",
            "http://ww3.sinaimg.cn/large/610dc034jw1f9rc3qcfm1j20u011hmyk.jpg",
            "http://ww3.sinaimg.cn/large/610dc034jw1f9em0sj3yvj20u00w4acj.jpg"
    };
    private int size;
    private List<View> mViews = new ArrayList<>();
    private ImageView imageView;
    private View view;
    private Subscription subscribe;
    private ImageView[] mIndicators;
    private int ponitpos;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        Log.d("TAG", size + "");
    }
    /**
     * 加載views
     * 加載url數(shù)據(jù),
     * 綁定
     * 偷天換日
     */
    private void initView() {
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        ponit = (LinearLayout) findViewById(R.id.ll_ponit);
        myAdapter = new MyAdapter(this, mViews, size);
        viewpager.setAdapter(myAdapter);
        mViews.clear();
        //載入圖片的時(shí)候需要用的item,默認(rèn)用網(wǎng)絡(luò)圖片進(jìn)行加載
        view = LayoutInflater.from(this).inflate(R.layout.item, null);
        imageView = (ImageView) view.findViewById(R.id.image);
        Glide.with(this)
                .load(Imgs[Imgs.length - 1])
                .centerCrop()
                .into(imageView);
        mViews.add(view);

        for (int i = 0; i < Imgs.length; i++) {
            view = LayoutInflater.from(this).inflate(R.layout.item, null);
            imageView = (ImageView) view.findViewById(R.id.image);
            Glide.with(this)
                    .load(Imgs[i])
                    .centerCrop()
                    .into(imageView);
            mViews.add(view);
        }

        view = LayoutInflater.from(this).inflate(R.layout.item, null);
        imageView = (ImageView) view.findViewById(R.id.image);
        Glide.with(this)
                .load(Imgs[0])
                .centerCrop()
                .into(imageView);
        mViews.add(view);
        myAdapter.notifyDataSetChanged();
        //加入小圓點(diǎn)
        size = Imgs.length;
        mIndicators = new ImageView[size];
        for (int i = 0; i < size; i++) {
            mIndicators[i] = new ImageView(this);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(10,10);
            lp.setMargins(10, 0, 10, 0);
            mIndicators[i].setLayoutParams(lp);
            mIndicators[i].setBackgroundResource(R.drawable.selector_home_banner_points);
            ponit.addView(mIndicators[i]);

        }

        //進(jìn)行監(jiān)聽
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int max = mViews.size() - 1;
                mCurrentPosition = position;
                if (position == 0) {
                    mCurrentPosition = max - 1;
                } else if (position == max) {
                    mCurrentPosition = 1;
                }
                ponitpos = mCurrentPosition - 1;
                int c = viewpager.getCurrentItem();
                Log.e("c",c+"");
                for (int i = 0; i <mViews.size(); i++) {
                    if(c==0||c==mViews.size()-1){
                        break;
                    }else{
                        c = c-1;
                        break;
                    }
                }
                /*switch (c){
                    case 0:
                        break;
                    case 1:
                        c =0;
                        break;
                    case 2:
                        c = 1;
                        break;
                    case 3:
                        c =2;
                        break;
                    case 4:
                        break;
                }*/
                Log.e("c",c+"");

                // TODO: 2016/11/17  這里實(shí)現(xiàn)的方式有兩種,從不同思路去實(shí)現(xiàn),有興趣可以參考以上代碼,新手會(huì)遇到坑
                for (int i = 0; i < mIndicators.length; i++) {
                    //mIndicators[i].setSelected(c==i);
                    mIndicators[i].setSelected(ponitpos==i);
                }

            }
            @Override
            public void onPageScrollStateChanged(int state) {
                if (state == 0) {
                    viewpager.setCurrentItem(mCurrentPosition, false);
                }
            }
        });

        //調(diào)用rxjava來執(zhí)行
        subscribe = Observable.interval(delay, TimeUnit.MILLISECONDS)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<Long>() {
                    @Override
                    public void call(Long aLong) {
                        mCurrentPosition++;
                        if (viewpager != null)
                            viewpager.setCurrentItem(mCurrentPosition, false);
                    }
                });
        viewpager.setCurrentItem(1, false);
        // 初始化指示器圖片集合
        myAdapter.setMyViewListenner(new MyAdapter.MyViewListenner() {
            @Override
            public void onItemClick(int possiton) {
                Toast.makeText(MainActivity.this, "你點(diǎn)擊了第" + possiton + "個(gè)", Toast.LENGTH_SHORT).show();
            }
        });
    }
    //    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                // 手指按下或者滑動(dòng)的過程中停止輪播
                // 手指按下或者滑動(dòng)的過程中停止輪播
                subscribe.unsubscribe();
                break;
            case MotionEvent.ACTION_UP:
                // 手指離開屏幕開始輪播
                subscribe = Observable.interval(delay, TimeUnit.MILLISECONDS)
                        .subscribeOn(Schedulers.io())
                        .observeOn(AndroidSchedulers.mainThread())
                        .subscribe(new Action1<Long>() {
                            @Override
                            public void call(Long aLong) {
                                mCurrentPosition++;
                                if (viewpager != null)
                                    viewpager.setCurrentItem(mCurrentPosition, false);
                            }
                        });

                break;
        }
        return super.dispatchTouchEvent(ev);
    }

}

跟我思路看下吧
首先第一步應(yīng)該是viewpage三部曲
找到viewpage的id,載入data,綁定adpter;
這里需要說明的在載入data;
原來的處理方式:圖1斥铺，圖2彻桃，圖3
現(xiàn)在的處理方式:新圖3、圖1仅父、圖2、圖3浑吟、新圖1笙纤。
所以這里在更新的時(shí)候會(huì)清空mViews,重新進(jìn)行載入的時(shí)候是根據(jù)數(shù)據(jù)源和
新圖3、圖1组力、圖2省容、圖3、新圖1
這樣的方式去載入

mViews.clear();
        //載入圖片的時(shí)候需要用的item,默認(rèn)用網(wǎng)絡(luò)圖片進(jìn)行加載
        view = LayoutInflater.from(this).inflate(R.layout.item, null);
        imageView = (ImageView) view.findViewById(R.id.image);
        Glide.with(this)
                .load(Imgs[Imgs.length - 1])
                .centerCrop()
                .into(imageView);
        mViews.add(view);

        for (int i = 0; i < Imgs.length; i++) {
            view = LayoutInflater.from(this).inflate(R.layout.item, null);
            imageView = (ImageView) view.findViewById(R.id.image);
            Glide.with(this)
                    .load(Imgs[i])
                    .centerCrop()
                    .into(imageView);
            mViews.add(view);
        }

        view = LayoutInflater.from(this).inflate(R.layout.item, null);
        imageView = (ImageView) view.findViewById(R.id.image);
        Glide.with(this)
                .load(Imgs[0])
                .centerCrop()
                .into(imageView);
        mViews.add(view);
        myAdapter.notifyDataSetChanged();

這樣就實(shí)現(xiàn)轉(zhuǎn)換機(jī)制,接下來就是實(shí)現(xiàn)對(duì)viewpager的監(jiān)聽,實(shí)現(xiàn)三個(gè)方法
onPageSelected(int position)：
這個(gè)方法有一個(gè)參數(shù)position燎字，代表哪個(gè)頁面被選中腥椒。* 當(dāng)用手指滑動(dòng)翻頁的時(shí)候阿宅，如果翻動(dòng)成功了（滑動(dòng)的距離夠長），手指抬起來就會(huì)立即執(zhí)行這個(gè)方法笼蛛，position就是當(dāng)前滑動(dòng)到的頁面洒放。* 如果直接setCurrentItem翻頁，那position就和setCurrentItem的參數(shù)一致滨砍，這種情況在onPageScrolled執(zhí)行方法前就會(huì)立即執(zhí)行往湿。*

而實(shí)現(xiàn) 新圖3、圖1惋戏、圖2领追、圖3、新圖1 這樣的效果就在這里實(shí)現(xiàn)
這里需要好好體會(huì)下


            @Override
            public void onPageSelected(int position) {
                int max = mViews.size() - 1;
                mCurrentPosition = position;
                if (position == 0) {
                    mCurrentPosition = max - 1;
                } else if (position == max) {
                    mCurrentPosition = 1;
                }

onPageScrollStateChanged(int state)
這個(gè)方法在手指操作屏幕的時(shí)候發(fā)生變化响逢。有三個(gè)值：0（END）,1(PRESS) , 2(UP) 绒窑。當(dāng)用手指滑動(dòng)翻頁時(shí)，手指按下去的時(shí)候會(huì)觸發(fā)這個(gè)方法舔亭，state值為1些膨，手指抬起時(shí)，如果發(fā)生了滑動(dòng)（即使很蟹中）傀蓉，這個(gè)值會(huì)變?yōu)?，然后最后變?yōu)? 职抡。總共執(zhí)行這個(gè)方法三次葬燎。一種特殊情況是手指按下去以后一點(diǎn)滑動(dòng)也沒有發(fā)生，這個(gè)時(shí)候只會(huì)調(diào)用這個(gè)方法兩次缚甩，state值分別是1,0 谱净。當(dāng)setCurrentItem翻頁時(shí)，會(huì)執(zhí)行這個(gè)方法兩次擅威，state值分別為2 , 0 壕探。
setCurrentItem(mCurrentPosition, false);方法其實(shí)就是跳轉(zhuǎn)到指定的頁碼,后面那個(gè)參數(shù)是動(dòng)畫效果

 @Override
            public void onPageScrollStateChanged(int state) {
                if (state == 0) {
                    viewpager.setCurrentItem(mCurrentPosition, false);
                }
            }
        });

到這里還不能實(shí)現(xiàn)圖片輪播,因?yàn)闆]有一個(gè)時(shí)間異步操作;
一般這里都會(huì)用Handler來操作,有了rxjava之后其實(shí)可以更加清晰的看出來

//調(diào)用rxjava來執(zhí)行
        subscribe = Observable.interval(delay, TimeUnit.MILLISECONDS)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<Long>() {
                    @Override
                    public void call(Long aLong) {
                        mCurrentPosition++;
                        if (viewpager != null)
                            viewpager.setCurrentItem(mCurrentPosition, false);
                    }
                });

對(duì)于不熟悉rxjava和rxandroid的小伙伴可以去其他博客看看;
到這里就基本實(shí)現(xiàn)了圖片輪播效果,不添加效果圖了;

那么還有比較重要的一塊,指示器
對(duì)的,指示器也非常重要
因?yàn)槲业乃悸肥莢iew層和data層分開,在構(gòu)造方法中加入,這樣是為了方便加入點(diǎn)擊事件,詳情看代碼;
加入指示器或者小圓點(diǎn)實(shí)際上很簡單
其實(shí)ponit根布局也可以用代碼寫,只是覺得太麻煩了 ,所以寫在布局里面

 size = Imgs.length;
        mIndicators = new ImageView[size];
        for (int i = 0; i < size; i++) {
            mIndicators[i] = new ImageView(this);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(10,10);
            lp.setMargins(10, 0, 10, 0);
            mIndicators[i].setLayoutParams(lp);
            mIndicators[i].setBackgroundResource(R.drawable.selector_home_banner_points);
            ponit.addView(mIndicators[i]);

        }

這里添下布局文件的代碼,省得小伙伴們自己去寫

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/bannertrue"
          android:state_selected="true"/>
    <item android:drawable="@mipmap/bannerfalse"/>

</selector>

我們后面回去調(diào)用這個(gè)布局
這里最關(guān)鍵的是 android:state_selected="true"
java調(diào)用到這個(gè)方法

   mIndicators[i].setSelected(ponitpos==i);

關(guān)于小園點(diǎn)走向有兩種思路;
我先說下整體的思路小圓點(diǎn)的走向應(yīng)給是viewpage滑動(dòng)的走向
那么怎么得到滑動(dòng)的走向
其實(shí)在之前代碼里面已經(jīng)寫了
ponitpos = mCurrentPosition - 1;
回過頭去看看這行,理解了就能知道

 ponitpos = mCurrentPosition - 1;
 for (int i = 0; i < mIndicators.length; i++) {
                 
                    mIndicators[i].setSelected(ponitpos==i);
                }

相對(duì)來說第二種思路是比較好理解,但其實(shí)就是第一種思路
viewpager.getCurrentItem();是獲取當(dāng)前頁碼的數(shù)量
新圖3(0)、圖1(1)郊丛、圖2(2)李请、圖3(3)、新圖1(4)

 int c = viewpager.getCurrentItem();
                Log.e("c",c+"");
                for (int i = 0; i <mViews.size(); i++) {
                    if(c==0||c==mViews.size()-1){
                        break;
                    }else{
                        c = c-1;
                        break;
                    }
                }
 for (int i = 0; i < mIndicators.length; i++) {
                
                    mIndicators[i].setSelected(c==i);
                }

基本到這里就實(shí)現(xiàn)了圖片的輪播和小圓點(diǎn)的加入
那么最后一些補(bǔ)充
手勢(shì)操作的判斷不解釋了

 //    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                // 手指按下或者滑動(dòng)的過程中停止輪播
                // 手指按下或者滑動(dòng)的過程中停止輪播
                subscribe.unsubscribe();
                break;
            case MotionEvent.ACTION_UP:
                // 手指離開屏幕開始輪播
                subscribe = Observable.interval(delay, TimeUnit.MILLISECONDS)
                        .subscribeOn(Schedulers.io())
                        .observeOn(AndroidSchedulers.mainThread())
                        .subscribe(new Action1<Long>() {
                            @Override
                            public void call(Long aLong) {
                                mCurrentPosition++;
                                if (viewpager != null)
                                    viewpager.setCurrentItem(mCurrentPosition, false);
                            }
                        });

                break;
        }
        return super.dispatchTouchEvent(ev);
    }

最后就是默認(rèn)加載試圖是從1開始加載的;
這個(gè)很重要
還有一種實(shí)現(xiàn)方式,等下篇博客吧,用Handler來實(shí)現(xiàn)!
差點(diǎn)忘了代碼地址https://github.com/Chenshuai770/test_rx3.git
我是小帥,一起進(jìn)步啊!

最后編輯于：2017.12.04 13:17:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末厉熟，一起剝皮案震驚了整個(gè)濱河市导盅，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌揍瑟，老刑警劉巖白翻，帶你破解...
沈念sama閱讀 222,681評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異绢片，居然都是意外死亡滤馍，警方通過查閱死者的電腦和手機(jī)岛琼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,205評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來巢株，“玉大人槐瑞，你說我怎么就攤上這事〈啃” “怎么了随珠？”我有些...
開封第一講書人閱讀 169,421評(píng)論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長猬错。經(jīng)常有香客問我窗看，道長，這世上最難降的妖魔是什么倦炒？我笑而不...
開封第一講書人閱讀 60,114評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任显沈，我火速辦了婚禮，結(jié)果婚禮上逢唤，老公的妹妹穿的比我還像新娘拉讯。我一直安慰自己，他們只是感情好鳖藕，可當(dāng)我...
茶點(diǎn)故事閱讀 69,116評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布魔慷。她就那樣靜靜地躺著，像睡著了一般著恩。火紅的嫁衣襯著肌膚如雪院尔。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,713評(píng)論 1贊 312
城市分裂傳說
那天喉誊，我揣著相機(jī)與錄音邀摆，去河邊找鬼。笑死伍茄，一個(gè)胖子當(dāng)著我的面吹牛栋盹，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播敷矫，決...
沈念sama閱讀 41,170評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼例获，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了曹仗？” 一聲冷哼從身側(cè)響起榨汤，我...
開封第一講書人閱讀 40,116評(píng)論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎整葡，沒想到半個(gè)月后件余，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讥脐，經(jīng)...
沈念sama閱讀 46,651評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡遭居，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,714評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年啼器，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俱萍。...
茶點(diǎn)故事閱讀 40,865評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡端壳，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出枪蘑，到底是詐尸還是另有隱情损谦，我是刑警寧澤，帶...
沈念sama閱讀 36,527評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布岳颇，位于F島的核電站照捡，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏话侧。R本人自食惡果不足惜栗精，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,211評(píng)論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望瞻鹏。院中可真熱鬧悲立，春花似錦、人聲如沸新博。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,699評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽赫悄。三九已至原献，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間涩蜘，已是汗流浹背嚼贡。一陣腳步聲響...
開封第一講書人閱讀 33,814評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留同诫，地道東北人粤策。一個(gè)月前我還...
沈念sama閱讀 49,299評(píng)論 3贊 379
代替公主和親
正文我出身青樓，卻偏偏與公主長得像误窖，于是被迫代替她去往敵國和親叮盘。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,870評(píng)論 2贊 361

rxjava實(shí)現(xiàn)viwepage輪播圖,Glide,手勢(shì)操作,事件監(jiān)聽等

推薦閱讀更多精彩內(nèi)容