Android:快速上手好看简约的轮播图

这篇具有很好参考价值的文章主要介绍了Android:快速上手好看简约的轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

创作不易,点个赞再走吧,谢谢!

目录

前言

一、如何引入

二、使用步骤

1、我们首先在xml文件中引入布局,设置我们喜欢的样式,大小,下面我给出示例:

2、然后我们需要在actvity或者fragment中设置banner的图片资源,样式等。

总结


前言

本期介绍Android的一项比较好用的轮播图,这是github上一个比较优秀的开源库,今天带大家来学习一下,这个开源库的基本用法。

先上演示视频:

QQ视频20230618211556


一、如何引入

首先我们先将这个轮播图的依赖导入进我们的项目:

implementation 'com.youth.banner:banner:1.4.10'

二、使用步骤

1、我们首先在xml文件中引入布局,设置我们喜欢的样式,大小,下面我给出示例:

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        custom:cardCornerRadius="10dp"
        >

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        custom:indicator_height="5dp"
        custom:indicator_margin="5dp"
        custom:indicator_width="5dp"
        custom:title_height="20dp"
        custom:title_textcolor="@color/white"
        custom:title_textsize="16sp"/>
    </com.google.android.material.card.MaterialCardView>

做个简要的说明:我这边是使用 MaterialCardView作为banner的外布局,因为卡片设置圆角比较方便,我就采用了这种布局。

2、然后我们需要在actvity或者fragment中设置banner的图片资源,样式等。

    private void initPlayer() {
        //初始化图片数据
        List images = new ArrayList();
        images.add(R.drawable.b1);
        images.add(R.drawable.b2);
        images.add(R.drawable.b3);

        //初始化标题数据
        List titles = new ArrayList();
        titles.add("线下");
        titles.add("线上");
        titles.add("签到");


        //设置图片加载器
        banner.setImageLoader(new MyImageLoader());
        //设置图片集合
        banner.setImages(images);
        //设置标题集合(当banner样式有显示title时)
        banner.setBannerTitles(titles);
        //设置轮播的动画效果 ZoomOutSlide
        banner.setBannerAnimation(Transformer.DepthPage);
        //设置自动轮播,默认为true
        banner.isAutoPlay(true);
        //设置轮播时间(设置2.5秒切换下一张图片)
        banner.setDelayTime(2000);
        //设置banner显示样式(带标题的样式)
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置指示器位置(当banner模式中有指示器时)
        banner.setIndicatorGravity(BannerConfig.RIGHT);
        //增加监听事件
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {

            }
        });
        //banner设置方法全部调用完毕时最后调用
        banner.start();
    }

大家可以清楚的看到 ,代码中每一步的注释, 写的是比较详细的,都是一些基本的用法,希望大家可以学到一些东西。


总结

本次分享的是一个关于Android轮播图的一种实现方法,希望大家可以有所收获。文章来源地址https://www.toymoban.com/news/detail-662606.html

到了这里,关于Android:快速上手好看简约的轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Jetpack Compose实现轮播图效果

    在最近思索如何使用Compose方式改进我的开源TMDB电影列表应用程序的主屏幕时,一个激动人心的概念浮现在我的脑海中——为什么不整合一个吸引人的轮播图来展示即将上映的电影呢?在本文中,我将分享我的开发和实现自定义轮播图的经历,提供涉及不同步骤的见解。 首先

    2024年02月08日
    浏览(106)
  • 【Android】使用ViewPager2实现轮播图效果,手动/自动轮播图

    这里使用Gilde进行加载图片:Glide 使用Gilde可以加载网络图片还可以提高图片加载性能。 接下来新建一个子布局item_image,加载viewPage2的子布局。 ViewPage2就是使用recyclerView实现的,所以这里使用方法其实类似。 这里直接继承RecyclerView.Adapter即可,代码很简单不必多说。 创建一个

    2024年02月03日
    浏览(50)
  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(94)
  • 优化大屏组件DataV的轮播表

    1、前提: 当我们开发大屏的时候,为了快速开发,我们选用了一些组件。例如DataV。例如选用了轮播表组件 2、优化: 但是它的数据格式却是这样的(如下图),非常不符合我们平时的开发格式,因此我在此优化了一下 首先优化了: 1、header的格式 原本的: 优化的: 2、对

    2024年02月15日
    浏览(43)
  • 【微信小程序入门到精通】— 轮播图你会了么?快速拿下 swiper 和 swiper-item

    对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设此专栏,在我学习的同时也将其分享给大家! 本篇文章主要介绍我们微信小程序常用的视图容器类组件,对于 swiper 和 swiper-item 我们将逐一讲解。 如果在往下阅读

    2024年02月20日
    浏览(54)
  • 视觉差缓动效果的轮播--React版

    效果如下(图片帧率低看起来有点卡顿,看个大概就行): 分享一下思路: 1.正常引入一个轮播组件(站在巨人肩膀省时省力),去除指示点、引导箭头等不需要的元素,有些组件支持配置,不支持就手动覆盖CSS样式了 2.找到组件中用于显示展示当前图片的类名 3.添加trans

    2024年02月05日
    浏览(45)
  • 不到200行用Vue实现类似Swiper.js的轮播组件

    大家在开发过程中,或多或少都会用到轮播图之类的组件,PC和Mobile上使用 Swiper.js ,小程序上使用swiper组件等。 本文将详细讲解如何用 Vue 一步步实现的类似 Swiper.js 的功能,无任何第三方依赖,干货满满。 在线预览:https://zyronon.github.io/douyin/ 项目源代码:https://github.com/

    2024年04月23日
    浏览(34)
  • 前端项目-05-轮播图banner和Floor组件开发-全局轮播图组件抽取

    目录 1-轮播图模块数据开发 2-floor组件开发 3-抽取全局轮播图组件 轮播图需要用到swiper插件,先安装5.4.5版本的swiper: npm  install --save swiper@^5.4.5 --force 模拟从服务器获取数据; 1-编写mockRequests的js文件和之前编写的request的js文件类似,就修改一下baseURL,我们模拟的数据请求路

    2023年04月08日
    浏览(49)
  • ❤️创意网页:打造简洁美观的网页轮播图(HTML简单实现轮播图)操作简单可以直接使用

    ✨ 博主: 命运之光 🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月17日
    浏览(47)
  • Android UI - 实现广告Banner轮播效果,Android MVP模式详解

    android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:layout_marginTop=“10dip” android:layout_gravity=“bottom|center_horizontal” android:layout_marginBottom=“10dp” android:gravity=“center” View android:id=“@+id/v_dot0” style=“@style/dot_style” android:background=“@drawable/dot_focused” android:vi

    2024年04月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包