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

相关文章推荐

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

第一步:用viewpager实现滑动。  首先是页面布局fragment_home.xml,只定义了一个Viewpager,代码如下: xmlns:android="http://schema...

Tornado.web.Application的settings参数

Tornado.web.Application的settings参数 传递给构造器的附加关键字参数保存在 settings 字典中, 并经常在文档中被称为”application settings”....
  • ljphilp
  • ljphilp
  • 2015年07月28日 13:05
  • 605

使用ViewPager实现广告条自动无限轮播效果

一、效果如图所示: 二、实现步骤: 1、布局和准备工作; 2、改变页面描述文字; 3、动态添加指示点; 4、实现左右无限循环; 5、实现页面自动切换; 三、具体实...

Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View

原文出处:http://www.it165.NET/pro/html/201406/16227.html# 最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己...

利用ViewPager实现广告栏广告页面轮播效果

效果展示: 不废话,直接上代码: 1.MainActivity类的代码:public class MainActivity extends AppCompatActivity { pr...

ViewPager实现广告轮播效果

package com.example.testviewpager; import java.util.ArrayList; import java.util.List; import andro...

Android使用ViewPager实现左右循环滑动及轮播效果

ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候会看到一个不能翻页的动画,可能影响用户体验。此外,某些区域性的Vie...

android TV开发:使用ViewPager实现图片自动轮播效果

1.实现效果:可以ViewPager的子view响应点击事件+遥控器按键从子view直接跳到旁边控件(由于gif最大只能是2M,就只能录屏时间短一点,建议csdn可以上传容量更大的图片)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android 使用viewpager实现广告轮播效果
举报原因:
原因补充:

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