Banner的封裝--實(shí)現(xiàn)ViewPager的循環(huán)輪播效果

關(guān)于Banner

很多的項(xiàng)目中都需要實(shí)現(xiàn)Banner位滾動(dòng)展示圖片的效果旺拉,我這里使用了ViewPager和RadioGroup封裝了一個(gè)帶指示器功能的Banner視圖灶搜,大家一起交流學(xué)習(xí)体斩。
先上效果圖

banner.gif

自定義Banner視圖

自定義視圖的方法一般來(lái)說(shuō)有三種汇鞭,這里使用了繼承ViewGroup(Relativelayout)的方法封裝ViewPager和RadioGroup

Banner布局文件的設(shè)置

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <RadioGroup
            android:id="@+id/radiogroup"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="15dp"
            android:gravity="center"
            android:orientation="horizontal"></RadioGroup>
    </RelativeLayout>

</merge>

在構(gòu)造方法中應(yīng)用布局文件婆廊,初始化布局控件

   View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);
        //滾動(dòng)顯示ViewPager
        viewPager = (ViewPager) view.findViewById(R.id.viewpager);
        radioGroup = (RadioGroup) view.findViewById(R.id.radiogroup);

ViewPager的設(shè)置

適配器的設(shè)置

ViewPager本身支持視圖的左右滑動(dòng)帜讲,如果想實(shí)現(xiàn)無(wú)限輪播的效果需要在適配器中做一些設(shè)置其弊。

ViewPager從最后一位切換到首位會(huì)有一個(gè)快速滑動(dòng)中間視圖的效果,這樣在顯示效果上并不是太好膀斋。這里的處理方式是將適配器的數(shù)據(jù)源設(shè)置成一個(gè)最大值梭伐。

 /**
     * ViewPager的適配器
     */
    class BannerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            //將count設(shè)置成整數(shù)最大值,虛擬實(shí)現(xiàn)無(wú)線輪播
            return Integer.MAX_VALUE;
        }

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

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position % views.size()));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = views.get(position % views.size());
            ViewGroup parent = (ViewGroup) view.getParent();
            //如果當(dāng)前要顯示的view有父布局先將父布局移除(view只能有一個(gè)父布局)
            if (parent != null) {
                parent.removeView(view);
            }
            container.addView(view);
            return view;
        }
    }

輪播效果的實(shí)現(xiàn)

通過(guò)Handler嵌套發(fā)送消息實(shí)現(xiàn)視圖的切換效果

  /**
     * 通過(guò)嵌套發(fā)送消息循環(huán)滾動(dòng)viewpager
     *
     * @param delayMillis 輪播圖片的時(shí)間
     */
    public void bannerPlay(final long delayMillis) {
//        設(shè)置顯示的初始位置概页,模擬向左無(wú)限滑動(dòng)(設(shè)置合適的值就行籽御,一般人也不會(huì)滑動(dòng)很多)
        pagerPosition = views.size() * 100;
        if (handler == null) {
            handler = new Handler() {
                @Override
                public void handleMessage(Message msg) {

                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            viewPager.setCurrentItem(++pagerPosition);
                        }
                    });
                    Message message = handler.obtainMessage(0);
                    handler.sendMessageDelayed(message, delayMillis);
                }
            };
            Message message = handler.obtainMessage(0);
            handler.sendMessageDelayed(message, delayMillis);
        }
    }

數(shù)據(jù)源的設(shè)置和指示器的聯(lián)動(dòng)

數(shù)據(jù)源的設(shè)置

這里通過(guò)setData(Object ...data)來(lái)設(shè)置數(shù)據(jù)源,參數(shù)類(lèi)型是Object的可變數(shù)組惰匙,可以傳遞圖片的ID或者圖片的鏈接等來(lái)設(shè)置數(shù)據(jù)源冠王。

/**
     * 設(shè)置顯示的資源
     *
     * @param data
     */


    public void setData(Object... data) {
        int id[] = new int[data.length];
        for (int i = 0; i < id.length; i++) {
            id[i] = i;
        }
        for (int i = 0; i < data.length; i++) {
            View view = LayoutInflater.from(getContext()).inflate(R.layout.banner_item_layout, viewPager, false);
            ImageView imageView = (ImageView) view.findViewById(R.id.iv_banner_item);
            if (data[i] instanceof Integer) {

                imageView.setImageResource((Integer) data[i]);
            } else {
//                TODO 如果設(shè)置的數(shù)據(jù)源為圖片地址或者其他類(lèi)型匀归,根據(jù)具體情況為imageView設(shè)置圖片源
            }
            views.add(view);
            //指示器小圓點(diǎn)的設(shè)置
            View indicator = LayoutInflater.from(getContext()).inflate(R.layout.indicator_item_layout, viewPager, false);
            radioButton = (RadioButton) indicator.findViewById(R.id.radioButton);
            radioButton.setId(id[i]);// 為radioButton設(shè)置一個(gè)id,不設(shè)置的話第一個(gè)radiobutton總是沒(méi)法設(shè)置成選中中狀態(tài)(不太清楚好像是個(gè)bug)
            if (i == 0) {
                radioButton.setChecked(true); //將第一個(gè)指示器設(shè)置為選中
            }
            RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(dip2px(getContext(), 10f), dip2px(getContext(), 10f));
            layoutParams.leftMargin = dip2px(getContext(), 20);
            radioGroup.addView(radioButton, layoutParams);
        }
        bannerAdapter.notifyDataSetChanged();


    }


設(shè)置ViewPager和指示器的聯(lián)動(dòng)效果

    //設(shè)置viewpager的滾動(dòng)監(jiān)聽(tīng)
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                //改變當(dāng)前顯示的pager的位置
                pagerPosition = position;
                position = position % views.size();
                //改變被選中的指示器的狀態(tài)
                for (int i = 0; i < radioGroup.getChildCount(); i++) {
                    ((RadioButton) radioGroup.getChildAt(i)).setChecked(i == position);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

Git源碼下載

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末却妨,一起剝皮案震驚了整個(gè)濱河市耻陕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绘盟,老刑警劉巖鸠真,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異龄毡,居然都是意外死亡吠卷,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)沦零,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)祭隔,“玉大人,你說(shuō)我怎么就攤上這事路操〖部剩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵屯仗,是天一觀的道長(zhǎng)搞坝。 經(jīng)常有香客問(wèn)我,道長(zhǎng)魁袜,這世上最難降的妖魔是什么桩撮? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮峰弹,結(jié)果婚禮上距境,老公的妹妹穿的比我還像新娘。我一直安慰自己垮卓,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布师幕。 她就那樣靜靜地躺著粟按,像睡著了一般诬滩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上灭将,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天疼鸟,我揣著相機(jī)與錄音,去河邊找鬼庙曙。 笑死空镜,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的捌朴。 我是一名探鬼主播吴攒,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼砂蔽!你這毒婦竟也來(lái)了洼怔?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤左驾,失蹤者是張志新(化名)和其女友劉穎镣隶,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體诡右,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡安岂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帆吻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片域那。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖桅锄,靈堂內(nèi)的尸體忽然破棺而出琉雳,到底是詐尸還是另有隱情,我是刑警寧澤友瘤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布翠肘,位于F島的核電站,受9級(jí)特大地震影響辫秧,放射性物質(zhì)發(fā)生泄漏束倍。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一盟戏、第九天 我趴在偏房一處隱蔽的房頂上張望绪妹。 院中可真熱鬧,春花似錦柿究、人聲如沸邮旷。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)婶肩。三九已至办陷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間律歼,已是汗流浹背民镜。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留险毁,地道東北人制圈。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像畔况,于是被迫代替她去往敵國(guó)和親鲸鹦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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