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
隨手給顆星唄 ? (>_@)