android 使用viewpager实现广告轮播效果

原创 2017年01月03日 17:42:52

一.简介

广告轮播我们在很多应用软件上都可以看到,其实现原理也都大致相同。今天就分享一下自己写的一个广告轮播的demo,以后也方便自己看。

二.实现

1.布局部分代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/dot_container"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignBottom="@+id/view_pager"
        android:orientation="horizontal"
        android:background="@color/banner_bg_color"
        android:gravity="center">

    </LinearLayout>
</RelativeLayout>
2.自定义PagerAdapter
public class BannerAdapter extends PagerAdapter{

    private List<ImageView>mList;
    public BannerAdapter(List<ImageView>list) {
        mList = list;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView image = mList.get(position);
        container.addView(image);
        return image;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView(mList.get(position));
    }
}
3.activity代码实现部分

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private ViewPager mViewPager;
    //线性布局用于存放圆点
    private LinearLayout mDotContainer;
    //viewpager容器内图片资源,这里就用了五个color,有图片可以直接掉图片id,网络加载的就要把加载的图片放到数组里然后再设置给ImageView
    int[] colors = {R.color.color1, R.color.color2, R.color.color3, R.color.color4, R.color.color5};
    //viewpager容器里放得ImageView列表
    private List<ImageView> mList;
    //记录下上一页的position
    private int mPreviousPosition;
    //子线程给handler发送的消息
    private final int CHAGE_PAGE = 1;
    //控制线程内部是否执行
    private boolean play = false;
    //执行定时任务
    ScheduledExecutorService executor = Executors.newScheduledThreadPool(1);

    //处理子线程发送过来的消息
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case CHAGE_PAGE:
                    int position = (mPreviousPosition + 1) % mList.size();
                    Log.e(TAG, "handleMessage: " + position);
                    mViewPager.setCurrentItem(position);
                    break;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUi();
        initListener();
        initData();
    }

    //初始化UI
    private void initUi() {
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mDotContainer = (LinearLayout) findViewById(R.id.dot_container);
    }

    private void initData() {
        initViewPagerData();
        BannerAdapter adaper = new BannerAdapter(mList);
        mViewPager.setAdapter(adaper);
        play = true;
        play();
    }

    //设置延时自动播放
    private void play() {
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {

                if(play){
                    handler.sendEmptyMessage(CHAGE_PAGE);
                }

            }
        });
        executor.scheduleAtFixedRate(thread,3,3, TimeUnit.SECONDS);
    }

    //初始化Viewpager里的数据
    private void initViewPagerData() {
        mList = new ArrayList<>();
        for (int i = 0; i < colors.length; i++) {
            ImageView image = new ImageView(this);
            image.setImageResource(colors[i]);
            mList.add(image);

            TextView textview = new TextView(this);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(15, 15);
            if (i == 0) {
                textview.setSelected(true);
            } else {
                lp.leftMargin = 10;
            }
            textview.setLayoutParams(lp);
            textview.setBackgroundResource(R.drawable.banner_dot);
            mDotContainer.addView(textview);
        }
    }

    private void initListener() {

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                if(mPreviousPosition != position){
                    mDotContainer.getChildAt(mPreviousPosition).setSelected(false);
                    mDotContainer.getChildAt(position).setSelected(true);
                    mPreviousPosition = position;
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        mViewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        play = false;
                        break;
                    case MotionEvent.ACTION_UP:
                        play = true;
                        break;
                }
                return false;
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        executor.shutdown();
    }
}
4.其中用到的color资源
<color name="banner_bg_color">#80dbd8d8</color>

<color name="color1">#ff0000</color>
<color name="color2">#00ff00</color>
<color name="color3">#0000ff</color>
<color name="color4">#ffff00</color>
<color name="color5">#00ffff</color>

<color name="dot_unselector">#999999</color>
<color name="dot_selector">#ff0000</color>
5.圆点banner_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="false">
        <shape android:shape="oval">
            <solid android:color="@color/dot_unselector"/>
        </shape>
    </item>

    <item android:state_selected="true">

        <shape android:shape="oval">
            <solid android:color="@color/dot_selector"/>
        </shape>

    </item>
</selector>
好了所有实现的代码都在这里,希望大家都能看懂。看不懂的可以自己研究一下运行过程。

三.最后

写的demo大家可以去下载下来运行看看,地址:http://download.csdn.net/detail/jianlipp/9727919

巧用ViewPager 打造不一样的广告轮播切换效果

转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/51339751; 本文出自:【张鸿洋的博客】 一、概述如果大家关注了...
  • lmj623565791
  • lmj623565791
  • 2016年05月09日 08:47
  • 59355

Viewpager实现小圆点无限轮播

//Mainpackage com.example.viewpagerw; import java.util.ArrayList; import com.lidroid.xutils.view.a...
  • RuningLING
  • RuningLING
  • 2016年08月15日 18:28
  • 985

Android 广告轮播效果实现

使用ViewPager实现Android的广告轮播效果,广告轮播是很多电商网站的必备,比如淘宝、京东的顶部广告轮播条,今天我们就是一步步利用ViewPager来实现广告轮播效果! 界面布局 资源文件编...
  • u014022205
  • u014022205
  • 2016年06月14日 20:02
  • 515

android 使用viewpager实现广告轮播效果

第一步:用viewpager实现滑动。  首先是页面布局fragment_home.xml,只定义了一个Viewpager,代码如下: xmlns:android="http://schema...
  • qq_21200053
  • qq_21200053
  • 2016年12月15日 14:23
  • 289

小圆点和Viewpager+fragment实现轮播

MainActivity.class private int[] imgs = {R.drawable.aaa,R.drawable.bbb,R.drawable.ccc,R.drawable.dd...
  • sky_is_very_green
  • sky_is_very_green
  • 2016年05月08日 15:31
  • 860

ViewPager实现广告轮播效果

package com.example.testviewpager; import java.util.ArrayList; import java.util.List; import andro...
  • u013680097
  • u013680097
  • 2015年12月01日 10:44
  • 241

viewpager做一个3d轮播图

以前找过这方面的控件。认为应该很难。看了鸿洋大神的博客发现也太简单了吧 效果图: 代码: /** * 用viewpager做一个3d效果的轮播图 * soeasy * 给viewpager...
  • yang_niuxxx
  • yang_niuxxx
  • 2016年11月09日 15:26
  • 1039

Android 中使用ViewPager实现画廊效果

Android 中使用ViewPager实现画廊效果
  • qq_33523706
  • qq_33523706
  • 2016年11月14日 16:06
  • 758

android viewpager实现3d画廊效果

一 缓存设置 修改viewPager的缓存页面数量 viewPager.setOffscreenPageLimit(int numbers); viewpager当前页面两侧缓存/预加载的...
  • musk6
  • musk6
  • 2016年12月20日 11:22
  • 850

ViewPager 实现画廊效果

有图有真相我们先看图上代码了:初始化: private void initView() { WindowManager wm = (WindowManager) this.getSyst...
  • qichuangguo
  • qichuangguo
  • 2017年07月12日 14:37
  • 1294
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android 使用viewpager实现广告轮播效果
举报原因:
原因补充:

(最多只允许输入30个字)