android viewpager实现轮播「建议收藏」

android viewpager实现轮播「建议收藏」本文是基于ViewPager实现的无限自动轮播banner分为三步:第一部分是有限手动轮播;第二部分是无限轮播;第三部分是自动轮播;第四部分是指示器适配有限手动轮播实现:布局:<androidx.viewpager.widget.ViewPagerandroid:id=”@+id/banner”android:layout_width=”match_parent”android:layout_height=”wrap_content”andro

大家好,又见面了,我是你们的朋友全栈君。

本文是基于ViewPager实现的无限自动轮播banner:

android viewpager实现轮播「建议收藏」

分为四步去实现:

第一步是有限手动轮播;

第二步是无限轮播;

第三步是自动轮播;

第四步是指示器适配

第一步:有限手动轮播实现

布局:

<androidx.viewpager.widget.ViewPager
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="12dp"
    android:layout_marginEnd="12dp" />

adapter实现:

public class BannerAdapter extends PagerAdapter {
    
    private List<String> bannerList;

    public BannerAdapter(List<String> bannerList) {
        this.bannerList = bannerList;
    }

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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView bannerImageView = new ImageView(container.getContext());
        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        bannerImageView.setLayoutParams(lp);
        bannerImageView.setScaleType(ImageView.ScaleType.FIT_XY);
        Glide.with(container.getContext()).load(bannerList.get(position)).into(bannerImageView);

        container.addView(bannerImageView);
        return bannerImageView;
    }

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

Activity中:

// scrollview中viewpager一定要设置高度,此处根据图片的宽高比来设定高度

int bannerWidth = (Utils.getScreenWidth(getContext()) - Utils.dip2pixel(getContext(), 24));
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) bannerView.getLayoutParams();
lp.width = LinearLayout.LayoutParams.MATCH_PARENT;
lp.height = (int) (bannerWidth * 90f / 345);
bannerView.setLayoutParams(lp);

bannerView.setAdapter(new BannerAdapter(getUrlList()));

注意:ScrollView包裹ViewPager时,ViewPager的高度一定要有确定值,否则内容无法加载出来,可以在xml中指定,也可以代码设定,但一定要有确定值。

第二步:无限轮播

无限轮播只需要在有限轮播的基础上,做以下两个改动点,修改getCount返回值且在加载数据时获取正确的数据源即可

public class BannerAdapter extends PagerAdapter {

    private List<String> bannerList;

    public BannerAdapter(List<String> bannerList) {
        this.bannerList = bannerList;
    }

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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView bannerImageView = new ImageView(container.getContext());
        int realPosition = position % bannerList.size(); // 获取要加载数据的真实位置
        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        bannerImageView.setLayoutParams(lp);
        bannerImageView.setScaleType(ImageView.ScaleType.FIT_XY);
//        Glide.with(container.getContext()).load(bannerList.get(position)).into(bannerImageView); // before
        Glide.with(container.getContext()).load(bannerList.get(realPosition)).into(bannerImageView); // now

        container.addView(bannerImageView);
        return bannerImageView;
    }

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

修改完发现banner只能向右无限轮播,第一次左滑滑不动,这个时候我们强制设置viewpager位置在中间就可以解决这个问题了

bannerView.setAdapter(new BannerAdapter(getUrlList()));
bannerView.setCurrentItem(getUrlList().size() * 5);

第三步:自动轮播

handler每隔轮播间隔发送消息,设置viewpager为下一个位置

private Runnable bannerRunnable = new Runnable() {
        @Override
        public void run() {
            bannerView.setCurrentItem(bannerView.getCurrentItem() + 1);
            mHandler.postDelayed(bannerRunnable, 3000);
        }
    };

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

            }

            @Override
            public void onPageSelected(int position) {
                // 手滑动到某一位置,重新开始计时
                start();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

private void start() {
        mHandler.removeCallbacksAndMessages(null);
        mHandler.postDelayed(bannerRunnable, 3000);
    }

第四步:添加指示器

指示器样式及表现可以自己去根据需求实现,以相对简单和常见的小圆圈指示器为例,添加和banner数量相同的小圆圈,小圆圈设置selector,在选中时为黑色选中样式,在非选中时为灰色默认样式,根据当前选中的banner的实际position,设置指示器的selected属性,从而展示不同的样式

private void initIndicator() {
        for (int i = 0; i < getUrlList().size(); i++) {
            View view = new View(getActivity());
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(Utils.dip2pixel(getActivity(), 6), Utils.dip2pixel(getActivity(), 6));
            lp.rightMargin = Utils.dip2pixel(getActivity(), 8);
            view.setLayoutParams(lp);
            view.setBackgroundResource(R.drawable.selector_indicator_view);
            view.setSelected(i == 0);
            llIndicatorView.addView(view);
        }
    }


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

            }

            @Override
            public void onPageSelected(int position) {
                // 手滑动到某一位置,重新开始计时
                realPosition = 0;
                realPosition = position % getUrlList().size();
                // 根据当前滑动到的banner设置指示器的状态
                for (int i = 0; i < llIndicatorView.getChildCount(); i++) {
                    llIndicatorView.getChildAt(i).setSelected(i == realPosition);
                }
                start();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

附:Utils文件

public class Utils {
    public static void setFullScreen(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
        }
    }

    public static int dip2pixel(Context context, float n) {
        int value = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, n, context.getResources().getDisplayMetrics());
        return value;
    }

    /**
     * 获取屏幕宽度
     * @param context
     * @return 屏幕宽度
     */
    public static int getScreenWidth(Context context) {
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163191.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mysql全文索引实现搜索功能(关键词查询)

    mysql全文索引实现搜索功能(关键词查询)最近在做一个关键词查询功能。所以开始了解mysql的全文索引技术。接下来我将一步一步告诉大家。我是如何一步一步实现关键词检索的。1.了解到mysql全文检索是以词为基础的。MySQL默认的分词是所有非字母和数字的特殊符号都是分词符。所以我存在数据库的样子是这样的。(左边的字段用于显示,右边的字段用于全文查询)2.全文检索的sqlSELECT*FROMtbk_item_coupon…

  • pycharm 2021.2.3激活码(已测有效)

    pycharm 2021.2.3激活码(已测有效),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • python动态心形代码简单_python 心形

    python动态心形代码简单_python 心形0.最终效果1.绘制一条心形曲线最近看到个视频,打算绘制个心型动态的曲线。1.1Matlab确定图像及其函数网上有很多关于心形曲线的资料,各种各样的形状,但是我比较倾心于桃心形。先在Matlab里简单看一下是什么样的。桃心形曲线的方程如下x=16sin^3(t)y=13cos(t)-5cos(2t)-2cos(3t)-cos(4t)Matlab绘制效果如下:Matlab程序如下。clcc…

  • loadrunner-11安装+激活成功教程+汉化(提供安装包,激活成功教程方式,汉化包)

    loadrunner-11安装+激活成功教程+汉化(提供安装包,激活成功教程方式,汉化包)loadrunner-11安装+激活成功教程+汉化(提供安装包,激活成功教程方式,汉化包)一、loadrunner-11安装下载地址: 链接:https://pan.baidu.com/s/10meUz5DfkS8WleLSOalCtQ 提取码:iw0p      由于LR11安装包三个多G,没办法上传到CSDN上,就用百度云去下载,注意下载时选择足够的盘符空间;      …

  • grid数据格式_echarts grid属性

    grid数据格式_echarts grid属性显示图片grid.Column(null,”图片”,format:p=>Html.Raw(string.Format(“<imgsrc='{0}’/>”,p.ImageUrl)),style:”g-img”),日期格式:grid.Column(“EditDate”,”修改日期”,(p)=>string.F…

  • CPU 流水线的前世今生[通俗易懂]

    CPU 流水线的前世今生[通俗易懂]title:CPU流水线的前世今生date:2021-11-2121:56:40author:gatiemetags:-linux-architecture-intelcategories:-技术积累thumbnail:blogexcerpt:CPU流水线的探秘之旅本作品采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可,转载请注明出处,谢谢合作因本人技术水平和知识面有限,内容如有纰漏或者需要修正的地方,欢迎大家指正,鄙.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号