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实现广告轮播效果

现在主流的App都会有一个轮播的广告图片控件,为了提高自己的能力,决定也来实现一下。经过一天努力,终于实现了。效果如下:实现方法:ViewPager+Handle 实现过程:public class...

ViewPager实现广告轮播效果

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

一.简介 广告轮播我们在很多应用软件上都可以看到,其实现原理也都大致相同。今天就分享一下自己写的一个广告轮播的demo,以后也方便自己看。 二.实现 首先先看一下实现之后的效果图,本人比较懒没用图片直...

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

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

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

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

Android 广告轮播效果实现

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

Android广告轮播图效果实现

效果如下:首先看下一下布局文件:<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns...

ViewPager实现广告轮播

ViewPager可以实现屏幕间的切换,而轮播广告就是不同的视图的切换,由此我们确定程序主体使用ViewPager辅佐其他功能实现广告的轮播。广告轮播是要实现的是:1.各个广告图片的不停切换。 2....

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

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

ViewPager实现广告轮播

使用V4包中的viewPaper组件自定义轮播广告条效果。 实现viewpaper的滑动切换和定时自动切换效果。 上效果图 布局文件 ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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