BannerSolution——Banner(轮播图、广告栏、展示栏 )一站式解决方案

标签: Banner 指示器 图片浏览 广告 轮播
43人阅读 评论(0) 收藏 举报
分类:

BannerSolution

  • Banner(轮播图、广告栏、展示栏 )一站式解决方案
    BannerSolution

依赖

先在 project的build.gradle 添加:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

然后在module的build.gradle 添加:

dependencies {
            //图片加载
    implementation('com.github.bumptech.glide:glide:4.4.0') {
        exclude group: 'com.android.support'
    }
    //依赖BannerView ViewPagerIndicator PictureBrowser
    //考虑support库可能冲突,请如下依赖
    compile ('com.github.LinweiJ:BannerView:0.0.1'){
        exclude group: 'com.android.support'
    }
    compile ('com.github.LinweiJ:ViewPagerIndicator:0.1.0'){
        exclude group: 'com.android.support'
    }
    compile ('com.github.LinweiJ:PictureBrowser:0.0.1'){
        exclude group: 'com.android.support'
    }
    }

BannerView(真无限循环轮播图)

  • 不同于设置一个较大个数的Viewpager,BannerView基于FragmentAdapter+Viewpager实现真无限循环
  • BannerView基于FrameLayout,便于添加指示器或其他显示控件
  • csdn: BannerView
  • github:BannerView

activity_main.xml

...
<com.lwj.widget.bannerview.BannerView
        android:id="@+id/BannerView"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#cdcdcd"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tv_hint"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#33000000"
            android:textColor="#ededed"
            android:padding="8dp"
            android:text="提示" />
</com.lwj.widget.bannerview.BannerView>
...

MainActivity.java


    private void setupBannerView(ArrayList<String> mUrlList) {

        mTv_hint = (TextView) findViewById(R.id.tv_hint);

        mBannerView = (BannerView) findViewById(R.id.BannerView);
        mBannerView.setFragmentManager(getSupportFragmentManager());
        mBannerView.setPictureUrl(mUrlList);
        mBannerView.setCircle(true);
        mBannerView.setDurationFavor(4.0f);
        mBannerView.setInitItem(0);
        mBannerView.setInterpolatorType(BannerInterpolator.ACCELERATE_DECELERATE);
        //图片加载方式,这里采用Glide
        mBannerView.setPictureLoader(new BannerPictureLoader() {
            @Override
            public void showPicture(Fragment fragment, ImageView pictureView, String pictureUrl) {
                Glide.with(fragment)
                        .load(pictureUrl)
                        .into(pictureView);
            }
        });
        //点击事件
        mBannerView.setPictureClickListener(new OnBannerPictureClickListener() {
            @Override
            public void onPictureClick(Fragment fragment, int position, List<String> pictureUrl) {
                Toast.makeText(MainActivity.this, "position:" + position + "pictureUrl" + pictureUrl.get(position),Toast.LENGTH_SHORT).show();
            }
        });
        mBannerView.setOnBannerPageSelectedListener(new OnBannerPageSelectedListener() {
            @Override
            public void onPageSelected(int position, String url) {
                mTv_hint.setText("position"+position+"\n"+url);
            }
        });
        //配置完成后,调用
        mBannerView.start();
    }

到这里,实现了一个轮播图,相对自己编写ViewPager+FragmentAdapter等,代码上简洁不少。

ViewPagerIndicator(轮播图指示器)

  • 支持一般Viewpager
  • 支持基于FragmentStateAdapter+Viewpager的伪无限循环轮播图
  • 支持 BannerView
  • 提供多种动画效果
  • 样式均在xml进行配置,java代码仅需配置关联的ViewPager
  • csdn:ViewPagerIndicator
  • github:ViewPagerIndicator

activity_main.xml

  <com.lwj.widget.bannerview.BannerView
       ...>
       ...
        <com.lwj.widget.viewpagerindicator.ViewPagerIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#00efefef"
            app:vpi_default_color="#efefef"
            app:vpi_distance="800dp"
            app:vpi_distanceType="BY_RADIUS"
            app:vpi_indicatorType="CIRCLE_LINE"
            app:vpi_length="24dp"
            app:vpi_radius="6dp"
            app:vpi_selected_color="#FF23EEF5"
            android:layout_gravity="bottom"
            android:layout_marginBottom="50dp"
            />
       ...
    </com.lwj.widget.bannerview.BannerView>

MainActivity.java

 private void setupIndicator() {

        mViewPagerIndicator = (ViewPagerIndicator) findViewById(R.id.indicator);

        //真无限循环BannerView,配合BannerView,增加以下setViewPager
        //https://github.com/LinweiJ/BannerView
        // if mBannerView.setCircle(true);无限循环
        mViewPagerIndicator.setViewPager(mBannerView.getViewPager(),true);

    }

PictureBrowser(图片浏览器)

  • 基于DialogFragment,横竖屏切换自动重建
  • 支持自定义图片加载
  • 支持图片放大、缩小、旋转
  • csdn:PictureBrowser
  • github:PictureBrowser

MainActivity.java

 private void setupBannerView(ArrayList<String> mUrlList) {
    ...
        //点击事件
        mBannerView.setPictureClickListener(new OnBannerPictureClickListener() {
            @Override
            public void onPictureClick(Fragment fragment, int position, List<String> pictureUrl) {
                showPicture(position,pictureUrl);
//                Toast.makeText(MainActivity.this, "position:" + position + "pictureUrl" + pictureUrl.get(position),Toast.LENGTH_SHORT).show();
            }
        });
   ...
    }


   private void showPicture(int position,List<String> pictureUrl){
        ArrayList<String> pictureUrls = new ArrayList<>();
        pictureUrls.addAll(pictureUrl);
        PictureLoader pictureLoader = new PictureLoader() {
            @Override
            public void showPicture(PictureFragment pictureFragment, PhotoView photoView, String pictureUrl) {
                //使用Glide加载图片,可自行根据需求选用其他图片加载库
                Glide.with(pictureFragment)
                        .load(pictureUrl)
                        .into(photoView);
            }

        };

        PictureBrowser.Builder builder = new PictureBrowser.Builder();
        builder.setFragmentManager(getSupportFragmentManager())
                .setUrlList(pictureUrls)
                .setStartIndex(position)
                .initPictureLoader(pictureLoader)
                .setShowDeleteIcon(true)
                .setShowIndexHint(true)
                .setCancelOutside(true)
                .create()
                .show();
    }

更多细节

github
BannerSolution
随手给颗星呗 ? (>_@)

查看评论

实现banner模块

网站基本都会有一个banner模块,展示各种内容,大致长下面这样:从图中可以得知该模块由“一组可点击的图片”和“两个按钮”组成,图片组可以放在一个ul列表中,并用div容器存放,两个按钮应该和图片组并...
  • DreamFJ
  • DreamFJ
  • 2017-04-10 15:40:32
  • 362

在Android studio中使用viewpager创建出图片轮播效果

1.布局: xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas....
  • tianyingxiaojiang
  • tianyingxiaojiang
  • 2016-03-21 09:22:57
  • 5088

关于viewpage无限轮播的一些问题

主要就是适配器的问题,上代码,注释详细的一批class MyPagerAdapter extends PagerAdapter { //返回显示数据的总条数,为了实现无限循环,把返回的值设置为...
  • qq_30555429
  • qq_30555429
  • 2018-03-28 19:29:50
  • 19

一套网站架构完整方案

xx局改造方案建议书 项目名称:xx局改造工程项目 项目编号:wibj-gdq-200403 文档编号:wibj-gdq-200403-fa 版 本:1.0 发行日期:2004年03月 目  录 一、...
  • myfriend253
  • myfriend253
  • 2007-03-28 23:29:00
  • 1381

修改IIS的Banner隐藏操作系统版本

构建高安全级别的主机系统的时候,对于NT系统往往有一个很尴尬的地方就是IIS的返回BANNER会很容易的泄露当前主机上NT的版本。比如我们可以简单的TELNET到对方的80端口用GET命令来查看下结果...
  • cnbird2008
  • cnbird2008
  • 2008-02-08 17:44:00
  • 1797

自定义组合控件:Banner、轮播图、广告栏控件

一、项目概述这里,我们使用自定义组合控件实现一个自动轮播的广告条,也叫轮播图,完整版的效果图如下图所示。其实,这就是我们经常见到的滚动广告,默认情况下每隔N 秒会自动滚动,用手指左右滑动时也会切换到上...
  • axi295309066
  • axi295309066
  • 2016-09-11 22:29:53
  • 1375

ViewPager实现轮播广告栏(BannerPager)

ViewPager实现循环轮播图、广告栏效果,附带页卡指示器功能、自动轮播效果
  • byxyrq
  • byxyrq
  • 2016-05-23 16:56:02
  • 1555

一套网站架构完整方案

一套网站架构完整方案目  录一、概  述 5 二、需求分析 5 2.1 异构系统 6 2.2 异构应用 8 2.3 异构数据 8 2.4 网站结构 9 2.5 内容海量 10 2.6 内容深度 10 ...
  • joliny
  • joliny
  • 2008-10-19 03:03:00
  • 2357

信息发布类网站后台界面设计一点思考(整体布局)

源起:做过,也用过一些信息发布系统的后台。特别最近,用的又比较多。曾经觉得,后台要设计的好用,让内容编辑来提意见来设计就好了。但是发现没那么简单。 因为,很多内容编辑,不懂得编程或者美工设计,一个后...
  • wuyt2008
  • wuyt2008
  • 2012-09-13 22:13:47
  • 8786

广告栏(自动轮播,无限循环)-图片轮播控件Banner的简单使用总结

Gradle dependencies{ compile 'com.youth.banner:banner:1.1.5' //指定版本 compile 'com.youth.ban...
  • Stephen2Wong
  • Stephen2Wong
  • 2017-01-03 16:26:17
  • 1983
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 616
    排名: 8万+