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

BannerSolution

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

依赖

先在 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();
    }

更多细节

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