Android廣告條滾動效果

1、效果圖

2、主要技術點

　　1.ViewPager的使用

　　2.背景選擇器

　　3.自動播放

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);
    }
}