Android广告条滚动效果

浏览数：26 / 时间：2015年06月11日

一、效果图

二、主要技术点

　　1.ViewPager的使用

　　2.背景选择器

　　3.自动播放

三、示例代码

　　1.布局文件：activity_main.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="200dp" >

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#33000000"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题" 
            android:textSize="16sp"
            android:textColor="#FFFFFFFF"/>

        <LinearLayout
            android:id="@+id/ll_viewgroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

　　2.图片下面的指示点背景imageview_point_normal.xml，imageview_point_focused.xml，imageview_selector.xml

　　（1）imageview_point_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <size
        android:height="5dp"
        android:width="5dp" />

    <solid android:color="#55000000" />

</shape>

　　（2）imageview_point_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <size
        android:height="5dp"
        android:width="5dp" />

    <solid android:color="#AAFFFFFF" />

</shape>

　　（3）imageview_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/imageview_point_focused" android:state_enabled="true"></item>
    <item android:drawable="@drawable/imageview_point_normal" android:state_enabled="false"></item>

</selector>

　　3.主页面MainActivity.java

package com.gnnuit.banner;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity {
    private ViewPager vp_show;
    private TextView tv_description;
    private LinearLayout ll_viewgroup;

    private final int[] ids = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };
    private final String[] descriptions = { "巩俐不低俗，我就不能低俗", "扑树又回来啦！再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" };
    private List<ImageView> imageViewList = new ArrayList<ImageView>();
    private int lastposition = 0;// 记录上一个页面的位置
    private boolean isRunning = false;// 记录ViewPager正在播放

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vp_show = (ViewPager) findViewById(R.id.vp_show);
        tv_description = (TextView) findViewById(R.id.tv_description);
        ll_viewgroup = (LinearLayout) findViewById(R.id.ll_viewgroup);

        // 初始化资源
        for (int i = 0; i < ids.length; i++) {
            // 初始化图片资源
            ImageView iv = new ImageView(this);
            iv.setBackgroundResource(ids[i]);
            imageViewList.add(iv);

            // 初始化指示点
            ImageView iv_point = new ImageView(this);
            LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.rightMargin = px2dip(this, 10);
            params.topMargin = px2dip(this, 5);
            iv_point.setLayoutParams(params);
            iv_point.setBackgroundResource(R.drawable.imageview_selector);
            iv_point.setEnabled(false);
            ll_viewgroup.addView(iv_point);
        }
        tv_description.setText(descriptions[0]);
        ll_viewgroup.getChildAt(0).setEnabled(true);

        // 设置ViewPager的Adapter
        vp_show.setAdapter(new MyAdapter());

        // 设置ViewPager的OnPageChangeListener事件
        vp_show.setOnPageChangeListener(new OnPageChangeListener() {

            /**
             * 显示一个新的页面时执行
             */
            @Override
            public void onPageSelected(int position) {
                tv_description.setText(descriptions[position]);
                ll_viewgroup.getChildAt(position).setEnabled(true);
                ll_viewgroup.getChildAt(lastposition).setEnabled(false);
                lastposition = position;
            }

            /**
             * 页面正在滑动时调用
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            /**
             * 页面状态发生变化时调用
             */
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        isRunning = true;
        myHandler.sendEmptyMessageDelayed(0, 2000);
    }

    private Handler myHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            vp_show.setCurrentItem((vp_show.getCurrentItem() + 1)%imageViewList.size());
            if (isRunning) {
                myHandler.sendEmptyMessageDelayed(0, 2000);
            }
        };
    };

    private class MyAdapter extends PagerAdapter {

        /**
         * 获得页面的总数
         */
        @Override
        public int getCount() {
            return imageViewList.size();
        }

        /**
         * 判断View和Object的对应关系
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        /**
         * 获得相应位置上的View
         * 
         * @param container
         *            View的容器，其实就是ViewPager自身
         * @param position
         *            相应的位置
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(imageViewList.get(position));
            return imageViewList.get(position);
        }

        /**
         * 销毁对应位置上的Object
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
            object = null;
        }
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}