Android 轮播图无限轮播以及下方的原点点击显示以及源码

天天很忙

已于 2023-04-29 22:09:38 修改

阅读量558

点赞数

文章标签： android android studio java

于 2023-04-27 10:04:35 首次发布

本文链接：https://blog.csdn.net/jht2667796626/article/details/130398765

版权

实现效果

第一步：activity的xml文件布局

第二步：radio.xml 设置原点选中状态和未选中状态

第三步：先定义变量

第四步：做循环把圆点都添加到 LinearLayout里面

实现效果

轮播图可以左右滑动到最后一个页面向右滑动时回跳到第一个页面，点击下方的小圆点图标将会跳到对应的图片页面

第一步：activity的xml文件布局

<?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=".MainActivity">
    
    
<!--    这是设置圆角显示图片-->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.viewpager.widget.ViewPager
                android:id="@+id/viewpage"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            
<!--            设置小圆点-->
            <LinearLayout
                android:id="@+id/line_r"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:orientation="horizontal">

            </LinearLayout>
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

第二步：radio.xml 设置原点选中状态和未选中状态

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
    <shape android:shape="oval">
        <solid android:color="#787878"/>
    </shape>
</item>
    <item android:state_selected="false">
    <shape android:shape="oval">
        <solid android:color="#DEDEDE"/>
    </shape>
</item>

</selector>

第三步：先定义变量

    //存放图片的List
    int[] imageList = new int[]{
            R.drawable.im1,
            R.drawable.im2,
            R.drawable.im3,
            R.drawable.im5,
    };
    //定义变量 用于取消上一个的选中状态
    int pos = 0;
    //全局Viewpage
    ViewPager viewPager;

第四步：做循环把圆点都添加到 LinearLayout里面

        viewPager = findViewById(R.id.viewpage);
        LinearLayout layout_r = findViewById(R.id.line_r);
        for (int i = 0; i < imageList.length; i++) {
            View view = new View(getApplicationContext());
            //添加圆点
            view.setBackgroundResource(R.drawable.radio);
            int finalI = i;
            //圆点点击跳对对应的页面
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewPager.setCurrentItem(finalI);
                }
            });
            //设置圆点的大小
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //除了第一个不设置 其他的设置圆点的间距 
            if (i != 0) {
                layoutParams.leftMargin = 40;
            }
            //都添加到LinearLayout里面
            layout_r.addView(view, layoutParams);
        }

第五步：设置选中状态

        layout_r.getChildAt(0).setSelected(true);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //因为是无限轮播 所以要去一个范围轮播
                int oldPosition = position % imageList.length;
                //取消上一个选中
                layout_r.getChildAt(pos).setSelected(false);
                //选中当前的
                layout_r.getChildAt(oldPosition).setSelected(true);
                
                pos = oldPosition;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

第六步：设置Adapter 显示图片

        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                //如果设置Integer.MAX_VALUE 的话 点击小圆点就会有 闪退的结果 
                //要是有根好的方法的话 请大佬指教
                return 200000;
            }

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

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

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                int oldPosition = position % imageList.length;
                //设置ImageView
                ImageView imageView = new ImageView(getApplicationContext());
                imageView.setImageResource(imageList[oldPosition]);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                container.addView(imageView);
                return imageView;
            }
        });

第七部：实现自动轮播

    Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            int current = viewPager.getCurrentItem();
            viewPager.setCurrentItem(++current, true);
            handler.postDelayed(this, 3000);
        }
    };
    //页面显示轮播
    @Override
    protected void onStart() {
        super.onStart();
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                handler.post(runnable);
            }
        }, 3000);
    }
    //页面不显示停止
    @Override
    protected void onStop() {
        super.onStop();
        handler.removeCallbacks(runnable);
    }

全部代码：

package com.example.banner_view;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    //存放图片的List
    int[] imageList = new int[]{
            R.drawable.im1,
            R.drawable.im2,
            R.drawable.im3,
            R.drawable.im5,
    };
    //定义变量 用于取消上一个的选中状态
    int pos = 0;
    //全局Viewpage
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.viewpage);
        LinearLayout layout_r = findViewById(R.id.line_r);
        for (int i = 0; i < imageList.length; i++) {
            View view = new View(getApplicationContext());
            //添加圆点
            view.setBackgroundResource(R.drawable.radio);
            int finalI = i;
            //圆点点击跳对对应的页面
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    viewPager.setCurrentItem(finalI);
                }
            });
            //设置圆点的大小
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(30, 30);
            //除了第一个不设置 其他的设置圆点的间距
            if (i != 0) {
                layoutParams.leftMargin = 40;
            }
            //都添加到LinearLayout里面
            layout_r.addView(view, layoutParams);
        }
        //页面刚启动时 首先让第一个圆点选中状态
        layout_r.getChildAt(0).setSelected(true);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //因为是无限轮播 所以要去一个范围轮播
                int oldPosition = position % imageList.length;
                //取消上一个选中
                layout_r.getChildAt(pos).setSelected(false);
                //选中当前的
                layout_r.getChildAt(oldPosition).setSelected(true);

                pos = oldPosition;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                //如果设置Integer.MAX_VALUE 的话 点击小圆点就会有 闪退的结果
                //要是有根好的方法的话 请大佬指教
                return 200000;
            }

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

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

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                int oldPosition = position % imageList.length;
                //设置ImageView
                ImageView imageView = new ImageView(getApplicationContext());
                imageView.setImageResource(imageList[oldPosition]);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                container.addView(imageView);
                return imageView;
            }
        });
    }

    Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            int current = viewPager.getCurrentItem();
            viewPager.setCurrentItem(++current, true);
            handler.postDelayed(this, 3000);
        }
    };
    //页面显示轮播
    @Override
    protected void onStart() {
        super.onStart();
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                handler.post(runnable);
            }
        }, 3000);
    }
    //页面不显示停止
    @Override
    protected void onStop() {
        super.onStop();
        handler.removeCallbacks(runnable);
    }
}

需要源码请私信