广告图片滚动播放ViewPage

来源：互联网发布：netbeans python插件编辑：程序博客网时间：2024/05/01 03:41

本案例实现一个广告滚播的效果

实现步骤如下：

第一步：xml布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    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="150dp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignBottom="@id/viewpager"        android:background="#33000000"        android:orientation="vertical"        android:padding="5dp" >        <TextView            android:id="@+id/tv_bannertext"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:padding="5dp"            android:text="我是第一个广告语"            android:textColor="@android:color/white" />        <LinearLayout            android:id="@+id/points"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center_horizontal"            android:orientation="horizontal" >        </LinearLayout>    </LinearLayout></RelativeLayout>

第二步实现

小圆圈的样式，这里有2个xml，一个是选择状态，一个是空白状态

正常状态

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <corners android:radius="0.5dp" />    <solid android:color="#55000000" /></shape>小圆圈正常状态

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <corners android:radius="0.5dp" />    <solid android:color="#AAFFFFFF" /></shape>小圆圈选中状态

选中背景效果

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/point_bg_enable" android:state_enabled="true"></item>    <item android:drawable="@drawable/point_bg_normal" android:state_enabled="false"></item></selector>小圆圈背景效果

　既然我们使用到了VierPager，那么必须要给它设置一个适配器来装载我们所要展示的广告图，这里需要注意的是getCount()这个方法，正常情况下，我们让它返回的是数据源的长度大小，但这里我们需要实现"无限循环"的效果，这么我们可以返回一个比较大的是比如：Integer.MAX_VALUE，这个数值可是20亿，用户再怎么滑到也不会滑到上亿次级别的吧。然后避免出现空指针异常，我们在下面addView和removeView的时候就不能再直接使用position去索引资源了，我们应该取余item的总数量，这样索引位置就不会超过资源数据的数量，例如1%777=1,1%999=1。

package com.lcw.rabbit.banner;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;/** * ViewPager适配器 * @author Rabbit_Lee * */public class BannerAdapter extends PagerAdapter {    //数据源    private List<ImageView> mList;    public BannerAdapter(List<ImageView> list) {        this.mList = list;    }    @Override    public int getCount() {        //取超大的数，实现无线循环效果        return Integer.MAX_VALUE;    }    @Override    public boolean isViewFromObject(View arg0, Object arg1) {        return arg0 == arg1;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(mList.get(position%mList.size()));        return mList.get(position%mList.size());    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mList.get(position%mList.size()));    }}

主代码

　根据广告图的资源长度在给定的LinearLayout里去添加圆圈点View。然后我们需要给它一个pointIndex标志位，用它来记录当前所在的页面位置，初始为0，再每次滑动的时候根据这个标志位来切换小圆圈的状态。

再来说下我们最开始的页面位置，我们不可以设置为0（第一页），如果我们设置为0，那么便不能向左滑动了。由于我们在适配器的getCount返回了Integer.MAX_VALUE ，我们可以取它的中间点来作为起始点，用setCurrentItem来出发VierPager的监听器里的onPageSelected的方法，那么左右就都可以滑动了。

　　最后就是定时器SystemClock了，我们这里开辟了一条新的线程通过while永true来达到这个效果，让其每隔2秒执行一次设置当前页面的动作，每次只需要简单设置页面+1即可，最后要留意的是我们需要给这个定时器设定一个开关，在我们切换退出该页面的时候要停止掉定时器的操作，也就是去重写我们的onDestroy方法，这里把开关关掉即可。

package com.lcw.rabbit.banner;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.os.SystemClock;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.LinearLayout.LayoutParams;import android.widget.TextView;public class MainActivity extends Activity {    // 声明控件    private ViewPager mViewPager;    private List<ImageView> mlist;    private TextView mTextView;    private LinearLayout mLinearLayout;    // 广告图素材    private int[] bannerImages = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4 };    // 广告语    private String[] bannerTexts = { "因为专业 所以卓越", "坚持创新 行业领跑", "诚信 专业 双赢", "精细 和谐 大气 开放" };    // ViewPager适配器与监听器    private BannerAdapter mAdapter;    private BannerListener bannerListener;    // 圆圈标志位    private int pointIndex = 0;    // 线程标志    private boolean isStop = false;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();        initAction();        // 开启新线程，2秒一次更新Banner        new Thread(new Runnable() {            @Override            public void run() {                while (!isStop) {                    SystemClock.sleep(2000);                    runOnUiThread(new Runnable() {                        @Override                        public void run() {                            mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);                        }                    });                }            }        }).start();    }    /**     * 初始化事件     */    private void initAction() {        bannerListener = new BannerListener();        mViewPager.setOnPageChangeListener(bannerListener);        //取中间数来作为起始位置        int index = (Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2 % mlist.size());        //用来出发监听器        mViewPager.setCurrentItem(index);        mLinearLayout.getChildAt(pointIndex).setEnabled(true);    }    /**     * 初始化数据     */    private void initData() {        mlist = new ArrayList<ImageView>();        View view;        LayoutParams params;        for (int i = 0; i < bannerImages.length; i++) {            // 设置广告图            ImageView imageView = new ImageView(MainActivity.this);            imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));            imageView.setBackgroundResource(bannerImages[i]);            mlist.add(imageView);            // 设置圆圈点            view = new View(MainActivity.this);            params = new LayoutParams(5, 5);            params.leftMargin = 10;            view.setBackgroundResource(R.drawable.point_background);            view.setLayoutParams(params);            view.setEnabled(false);            mLinearLayout.addView(view);        }        mAdapter = new BannerAdapter(mlist);        mViewPager.setAdapter(mAdapter);    }    /**     * 初始化View操作     */    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mTextView = (TextView) findViewById(R.id.tv_bannertext);        mLinearLayout = (LinearLayout) findViewById(R.id.points);    }    //实现VierPager监听器接口    class BannerListener implements OnPageChangeListener {        @Override        public void onPageScrollStateChanged(int arg0) {        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageSelected(int position) {            int newPosition = position % bannerImages.length;            mTextView.setText(bannerTexts[newPosition]);            mLinearLayout.getChildAt(newPosition).setEnabled(true);            mLinearLayout.getChildAt(pointIndex).setEnabled(false);            // 更新标志位            pointIndex = newPosition;        }    }    @Override    protected void onDestroy() {        // 关闭定时器        isStop = true;        super.onDestroy();    }}

参考：http://www.cnblogs.com/lichenwei/p/4657126.html

0 0