ViewFlipper实现带圆点的banner轮播图

最新推荐文章于 2024-05-15 19:54:33 发布

henkun

最新推荐文章于 2024-05-15 19:54:33 发布

阅读量585

点赞数

分类专栏： Android 文章标签： banner viewflipper

本文链接：https://blog.csdn.net/henkun/article/details/89647385

版权

Android 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

1 布局文件定义ViewFlipper以及小圆点

         <RelativeLayout
                android:id="@+id/rl_banner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ViewFlipper
                    android:id="@+id/vf_banner"
                    android:layout_width="match_parent"
                    android:inAnimation="@anim/banner_push_left_in"
                    android:outAnimation="@anim/banner_push_left_out"
                    android:flipInterval="2000"
                    android:layout_height="200dp">

                </ViewFlipper>
                <LinearLayout
                    android:id="@+id/ll_banner_dot"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_alignParentBottom="true"
                    android:gravity="center">

                </LinearLayout>

            </RelativeLayout>

2 activity中先定义几个变量

@BindView(R.id.ll_banner_dot)
LinearLayout ll_banner_dot;//小圆点的父布局

@BindView(R.id.vf_banner)
ViewFlipper vf_banner;//viewflipper

private List<ImageView> dotlist;//圆点列表，将自定义的圆点imageview放到里边去
private int bannerCount;//轮播图数量
private int bannerIndex;//轮播图起始索引

3 根据服务器获取到的banner数据动态生成banner图的imageview和小圆点的imageview

for(BannerData bannerData:bannerlist){
           ImageView imageView = new ImageView(getContext());
           LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
           imageView.setLayoutParams(params);
           imageView.setScaleType(ImageView.ScaleType.FIT_XY);
           vf_banner.addView(imageView);
           Glide.with(this).load(bannerData.getImagePath()).into(imageView);

           //动态生成小圆点
           ImageView iv_banner = new ImageView(this.getContext());
           LinearLayout.LayoutParams params1=new LinearLayout.LayoutParams(35,35);
           params1.gravity= Gravity.CENTER;
           params1.leftMargin=10;
           iv_banner.setLayoutParams(params1);
           iv_banner.setBackgroundResource(R.drawable.dian);
           ll_banner_dot.addView(iv_banner);
           dotlist.add(iv_banner);
           

       }

4 通过实现viewflipper的getInAnimation().setAnimationListener()监听来同步改变小圆点的背景

vf_banner.getInAnimation().setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                if(bannerIndex>=dotlist.size()){
                    bannerIndex=0;//重置索引
                }
                
                for(int index=0;index<bannerCount;index++){
                    if(index!=bannerIndex){
                        //凡是索引不等于当前bannerindex的，小圆点背景都设置为默认
                        dotlist.get(index).setBackgroundResource(R.drawable.dian);
                    }else {
                       
//否则，为当前的小圆点设置一个不同的背景
dotlist.get(bannerIndex).setBackgroundResource(R.drawable.dian2);
                    }

                }
                bannerIndex++;
//                

            }