Android廣告輪播

效果圖：

布局：

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#33000000"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="廣告條"
            android:textColor="@android:color/white"
            android:textSize="18sp" />

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

    </LinearLayout>
</RelativeLayout>

           

訓示點：

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

    <size
        android:width="8dp"
        android:height="8dp" />
    <solid android:color="#aaFFFFFF" />

</shape>
           

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

    <size android:width="8dp" android:height="8dp" />
    <solid android:color="#ff0000" />

</shape>
           

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

    <item android:drawable="@drawable/point_focured" android:state_enabled="true" />
    <item android:drawable="@drawable/point_normal" />

</selector>
           

activity:

package com.example.xyh.banner;

import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

/**
 * 廣告輪播
 */
public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;

    private TextView tvTitle;

    private LinearLayout pointGroup;

    private List<ImageView> list;

    // 上一個頁面的位置
    protected int lastPosition;

    // 圖檔資源ID
    private final int[] imageIds = {R.drawable.a, R.drawable.b, R.drawable.c,
            R.drawable.d, R.drawable.e};

    //圖檔标題集合
    private final String[] title = {
            "鞏俐不低俗，我就不能低俗",
            "撲樹又回來啦！再唱經典老歌引萬人大合唱",
            "揭秘北京電影如何更新",
            "樂視網TV版大派送",
            "熱血屌絲的反殺"
    };

    //判斷是否在自動滾動
    private boolean isRunning = false;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            //讓viewPager 滑動到下一頁
            mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
            if (isRunning) {
                // 繼續發送延時2 秒的消息, 形成類似遞歸的效果, 使廣告一直循環切換
                mHandler.sendEmptyMessageDelayed(0, 3000);
            }
        }
    };

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

        findViews();
        init();
        initListener();

        isRunning = true;
        mHandler.sendEmptyMessageDelayed(0, 3000);
    }


    private void init() {
        list = new ArrayList<>();
        for (int i = 0; i < imageIds.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            list.add(imageView);

            //動态添加訓示點
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_bg);
            pointGroup.addView(point);

            //布局參數
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            if (i > 0) {
                params.leftMargin = 20;
            }
            point.setLayoutParams(params); //設定布局參數

            if (i == 0) {
                point.setEnabled(true);
            } else {
                point.setEnabled(false);
            }

        }

        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(list);
        mViewPager.setAdapter(myPagerAdapter);

        tvTitle.setText(title[0]);

        //把目前頁面設定為中間的，這樣左右都有很多頁面
        mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % list.size()));
    }

    private void initListener() {
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                position = position % list.size();
                //設定訓示點狀态
                pointGroup.getChildAt(position).setEnabled(true);
                pointGroup.getChildAt(lastPosition).setEnabled(false);
                lastPosition = position;

                tvTitle.setText(title[position]);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void findViews() {
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        tvTitle = (TextView) findViewById(R.id.tv_title);
        pointGroup = (LinearLayout) findViewById(R.id.point_group);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        isRunning = false;
    }
}

           

擴充卡：

package com.example.xyh.banner;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by xiaoyehai on 2018/5/22/022.
 */

public class MyPagerAdapter extends PagerAdapter {

    private List<ImageView> list;

    public MyPagerAdapter(List<ImageView> list) {
        this.list = list;
    }

    @Override
    public int getCount() {
        //return list.size();
        return Integer.MAX_VALUE;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = list.get(position % list.size());
        container.addView(imageView);
        //實作按下停止輪播
		imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                    switch (motionEvent.getAction()){
                        case MotionEvent.ACTION_DOWN:
                            handler.removeCallbacksAndMessages(null);
                            break;
                        case MotionEvent.ACTION_MOVE:
                            break;
                        case MotionEvent.ACTION_UP:
                            handler.removeCallbacksAndMessages(null);
                            handler.sendEmptyMessageDelayed(0,3000);
                            break;
                    }
                    return true;
                }
            });


        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        object = null;
    }
}

           

圖檔輪播也可以采用計時器的方式實作

第三方的圖檔輪播XBanner

第三方的圖檔輪播banner