(自定义MyBanner)小圆点设置,及viewpager图片轮播

本文介绍如何在Android应用中实现自定义的Banner轮播图功能,包括创建attrs.xml文件来定义样式属性、设计小圆点指示器、布局文件配置及代码实现自动轮播效果等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.Values下创建attrs.xml文件,内容如下,

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Banner">
        <attr name="size" format="dimension"></attr>
        <attr name="margin" format="dimension"></attr>
    </declare-styleable>
</resources>

2.drawable文件夹下画小圆点,如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@android:color/holo_blue_bright"></solid>
<size android:height="10dp" android:width="10dp"></size>

</shape>

3.布局部分

①banner_activity

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
    
    <LinearLayout
        android:id="@+id/LL"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center"
        ></LinearLayout>
</FrameLayout>

②main_activity

?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bwie.viewpagerautobanner.MainActivity">

   <com.bwie.viewpagerautobanner.banner.Banner
       android:id="@+id/banner"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"

       ></com.bwie.viewpagerautobanner.banner.Banner>

</LinearLayout>

4.代码部分

①Banner类

public class Banner extends FrameLayout implements ViewPager.OnPageChangeListener{

    private  BannerClicklistener mBannerClicklistener;
    private  Context context;
    private List<String> mUrls;
    private List<ImageView> mViewPagers;
    private List<ImageView> mDotImages;
    private int size;
    private int margin;
    private int count;
    private LinearLayout ll;
    private ViewPager viewPager;
    private  int currentItem;
    Handler handler=new Handler();


    public Banner(@NonNull Context context) {
        super(context);
        init(context,null);
    }



    public Banner(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public Banner(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    /**
     * 初始化数据
     * @param context
     * @param attrs
     */
    private void init(Context context, AttributeSet attrs) {
        this.context=context;

        //图片地址集合
        mUrls = new ArrayList<>();
        //图片集合
        mViewPagers = new ArrayList<>();
        //圆点集合
        mDotImages = new ArrayList<>();

        //拿到自定义的属性数组
        TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.Banner);

        //得到数组里的自定义size
        size = typedArray.getDimensionPixelSize(R.styleable.Banner_size, 10);
        margin = typedArray.getDimensionPixelSize(R.styleable.Banner_size, 10);

        typedArray.recycle();

        View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);

        viewPager = view.findViewById(R.id.vp_img);

        ll = view.findViewById(R.id.LL);

        viewPager.addOnPageChangeListener(this);

    }

    /**
     * 绘制自定义view的所有元素
     */
    public void  display(){
        //绘制viewpager
        drawViewPager();
    
        //绘制圆点
        drowDot();
    
        //设置自动滚动
        setAuto();
        
    }

    /**
     * 设置自动滚动
     */
    private void setAuto() {
        handler.postDelayed(mTask,3000);
    }

    Runnable mTask=new Runnable() {
        @Override
        public void run() {
            currentItem++;
            if(currentItem>=count){
                currentItem=0;
            }
            viewPager.setCurrentItem(currentItem);
            handler.postDelayed(this,3000);
        }
    };

    /**
     * 传入url
     */
    public void loadData(List<String> mUrls){
        this.mUrls=mUrls;
        this.count=mUrls.size();

    }

    /**
     * 绘制圆点
     */
    private void drowDot() {


        for (int i = 0; i <count ; i++) {
            ImageView iv=new ImageView(context);
            //设置圆点的尺寸
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(size,size);
            params.leftMargin=margin;
            params.rightMargin=margin;
            iv.setLayoutParams(params);

            mDotImages.add(iv);

            if(i==0){
                iv.setImageResource(R.drawable.dot_selected);
            }else{
                iv.setImageResource(R.drawable.dot_normal);
            }
            ll.addView(iv);
        }
    
    }

    //绘制ViewPager
    private void drawViewPager() {
        for (int i = 0; i < count; i++) {

            ImageView iv=new ImageView(context);
            iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            mViewPagers.add(iv);

        }
        if(mViewPagers!=null){
            viewPager.setAdapter(new
                    MyViewPager());

        }

    }

    /**
     * 动画监听
     * @param position
     * @param positionOffset
     * @param positionOffsetPixels
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < count; i++) {
            if(i==position){
                mDotImages.get(i).setImageResource(R.drawable.dot_selected);
            }else{
                mDotImages.get(i).setImageResource(R.drawable.dot_normal);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        int action = ev.getAction();
        if(action==MotionEvent.ACTION_DOWN || action==MotionEvent.ACTION_MOVE){
            stopAuto();
        }else if(action==MotionEvent.ACTION_UP){
            setAuto();
        }

        return super.dispatchTouchEvent(ev);
    }

    /**
     * 取消自动轮播
     */
    private void stopAuto() {
    handler.removeCallbacks(mTask);
    }

    class MyViewPager extends PagerAdapter{

        @Override
        public int getCount() {
            return mViewPagers.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {

            ImageView imageView = mViewPagers.get(position);
            container.addView(imageView);

/**
*轮播图的点击监听
*
/
 imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    mBannerClicklistener.OnClickListener(position);
                }
            });

            ImageLoader.getInstance().displayImage(mUrls.get(position),imageView);

            return imageView;
        }

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

    //取消轮播任务
    public void cancel(){
        handler.removeCallbacks(mTask);
    }

    /**
     * 供外部调用者调用的接口类
     */
    public  interface  BannerClicklistener{
        public void  OnClickListener(int pos);
    }

    /**
     * 供外部调用者初始化接口对象
     */

    public void SetBannerClicklistener(BannerClicklistener bannerClicklistener){
        this.mBannerClicklistener=bannerClicklistener;

    }



}

②MainAcitvty类

public class MainActivity extends AppCompatActivity {

    private Banner banner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = (Banner) findViewById(R.id.banner);

        ArrayList<String> url=new ArrayList<>();
        url.add("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2725778448,2804208073&fm=117&gp=0.jpg");
        url.add("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=184848620,87883237&fm=117&gp=0.jpg");
        url.add("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2549608950,3092127346&fm=117&gp=0.jpg");

        banner.loadData(url);
        banner.display();

        banner.SetBannerClicklistener(new Banner.BannerClicklistener() {
            @Override
            public void OnClickListener(int pos) {
                Toast.makeText(MainActivity.this, "点击一下...", Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(banner!=null){
            banner.cancel();
            banner=null;
        }
    }
}





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值