自定义控件——实战项目：广告轮播

=======================================================================================================

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 自定义的广告轮播条，需要使用全路径 -->
    <com.example.myapplication.widget.BannerPager
        android:id="@+id/banner_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="10dp"
        android:text="上面的广告图片会自动轮播"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RadioGroup
        android:id="@+id/rg_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/icon_point_n" />
    <item android:state_checked="true" android:drawable="@drawable/icon_point_c" />
</selector>

BannerPager 

package com.example.myapplication.widget;

import android.content.Context;
import android.os.Handler;
import android.os.Looper;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager.widget.ViewPager.SimpleOnPageChangeListener;
import com.example.myapplication.R;
import com.example.myapplication.util.Utils;
import java.util.ArrayList;
import java.util.List;

public class BannerPager extends RelativeLayout implements View.OnClickListener
{

    private static final String TAG = "BannerPager";
    private Context mContext; // 声明一个上下文对象
    private ViewPager vp_banner; // 声明一个翻页视图对象
    private RadioGroup rg_indicator; // 声明一个单选组对象
    private List<ImageView> mViewList = new ArrayList<ImageView>(); // 声明一个图像视图列表
    private int mInterval = 2000; // 轮播的时间间隔，单位毫秒

    public BannerPager(Context context)
    {

        this(context, null);
    }

    public BannerPager(Context context, AttributeSet attrs)
    {

        super(context, attrs);
        mContext = context;
        initView(); // 初始化视图
    }

    // 开始广告轮播
    public void start()
    {

        mHandler.postDelayed(mScroll, mInterval); // 延迟若干秒后启动滚动任务
    }

    // 停止广告轮播
    public void stop() {
        mHandler.removeCallbacks(mScroll); // 移除滚动任务
    }

    // 设置广告轮播的时间间隔
    public void setInterval(int interval) {
        mInterval = interval;
    }

    // 设置广告图片列表
    public void setImage(List<Integer> imageList) {
        int dip_15 = Utils.dip2px(mContext, 15);
        // 根据图片列表生成图像视图列表
        for (int i = 0; i < imageList.size(); i++) {
            Integer imageResId = imageList.get(i); // 获取图片的资源编号
            ImageView iv = new ImageView(mContext); // 创建一个图像视图对象
            iv.setLayoutParams(new LayoutParams(
                    LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            iv.setImageResource(imageResId); // 设置图像视图的资源图片
            iv.setOnClickListener(this);
            mViewList.add(iv); // 往视图列表添加新的图像视图
        }
        // 设置翻页视图的图像适配器
        vp_banner.setAdapter(new ImageAdapater());
        // 给翻页视图添加简单的页面变更监听器，此时只需重写onPageSelected方法
        vp_banner.addOnPageChangeListener(new SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                setSelectedButton(position); // 高亮显示该位置的指示按钮
            }
        });
        // 根据图片列表生成指示按钮列表
        for (int i = 0; i < imageList.size(); i++) {
            RadioButton radio = new RadioButton(mContext); // 创建一个单选按钮对象
            radio.setLayoutParams(new RadioGroup.LayoutParams(dip_15, dip_15));
            radio.setButtonDrawable(R.drawable.indicator_selector); // 设置单选按钮的资源图片
            rg_indicator.addView(radio); // 往单选组添加新的单选按钮
        }
        vp_banner.setCurrentItem(0); // 设置翻页视图显示第一页
        setSelectedButton(0); // 默认高亮显示第一个指示按钮
    }

    // 设置选中单选组内部的哪个单选按钮
    private void setSelectedButton(int position) {
        ((RadioButton) rg_indicator.getChildAt(position)).setChecked(true);
    }

    // 初始化视图
    private void initView() {
        // 根据布局文件banner_pager.xml生成视图对象
        View view = LayoutInflater.from(mContext).inflate(R.layout.banner_pager, null);
        // 从布局文件中获取名叫vp_banner的翻页视图
        vp_banner = view.findViewById(R.id.vp_banner);
        // 从布局文件中获取名叫rg_indicator的单选组
        rg_indicator = view.findViewById(R.id.rg_indicator);
        addView(view); // 将该布局视图添加到广告轮播条
    }

    private Handler mHandler = new Handler(Looper.myLooper()); // 声明一个处理器对象
    // 定义一个广告滚动任务
    private Runnable mScroll = new Runnable() {
        @Override
        public void run() {
            int index = vp_banner.getCurrentItem() + 1; // 获得下一张广告图的位置
            if (index >= mViewList.size()) { // 已经到末尾了，准备重头开始
                index = 0;
            }
            vp_banner.setCurrentItem(index); // 设置翻页视图显示第几页
            mHandler.postDelayed(this, mInterval); // 延迟若干秒后继续启动滚动任务
        }
    };

    // 定义一个图像翻页适配器
    private class ImageAdapater extends PagerAdapter {

        // 获取页面项的个数
        public int getCount() {
            return mViewList.size();
        }

        // 判断当前视图是否来自指定对象
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        // 从容器中销毁指定位置的页面
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));
        }

        // 实例化指定位置的页面，并将其添加到容器中
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }
    }

    @Override
    public void onClick(View v) {
        int position = vp_banner.getCurrentItem(); // 获取翻页视图当前页面项的序号
        mListener.onBannerClick(position); // 触发点击监听器的onBannerClick方法
    }

    // 设置广告图的点击监听器
    public void setOnBannerListener(BannerClickListener listener) {
        mListener = listener;
    }

    // 声明一个广告图点击的监听器对象
    private BannerClickListener mListener;

    // 定义一个广告图片的点击监听器接口
    public interface BannerClickListener {
        void onBannerClick(int position);
    }

}

 

MainActivity

package com.example.myapplication;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.example.myapplication.util.Utils;
import com.example.myapplication.widget.BannerPager;
import java.util.ArrayList;
import java.util.List;

@SuppressLint("DefaultLocale")
public class MainActivity extends AppCompatActivity implements BannerPager.BannerClickListener
{
    private static final String TAG = "BannerPagerActivity";
    private TextView tv_pager;

    private List<Integer> getImageList() {
        ArrayList<Integer> imageList = new ArrayList<Integer>();
        imageList.add(R.drawable.banner_1);
        imageList.add(R.drawable.banner_2);
        imageList.add(R.drawable.banner_3);
        imageList.add(R.drawable.banner_4);
        imageList.add(R.drawable.banner_5);
        return imageList; // 返回默认的广告图片列表
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv_pager = findViewById(R.id.tv_pager);
        // 从布局文件中获取名叫banner_pager的广告轮播条
        BannerPager banner = findViewById(R.id.banner_pager);
        // 获取广告轮播条的布局参数
        LayoutParams params = (LayoutParams) banner.getLayoutParams();
        params.height = (int) (Utils.getScreenWidth(this) * 250f / 640f);
        banner.setLayoutParams(params); // 设置广告轮播条的布局参数
        banner.setImage(getImageList()); // 设置广告轮播条的广告图片列表
        banner.setOnBannerListener(this); // 设置广告轮播条的广告点击监听器
        banner.start(); // 开始广告图片的轮播滚动
    }

    // 一旦点击了广告图，就回调监听器的onBannerClick方法
    public void onBannerClick(int position) {
        String desc = String.format("您点击了第%d张图片", position + 1);
        tv_pager.setText(desc);
    }

}