Android—仿QQ空間動態九宮格圖片預覽(二)

只要用心去做，每一件事情還是有可能成功的，當然成功是沒有界限的，只不過是達到自己心里的那個目標

接著上一篇文章進行改善，這一次找到一個可以跑起來的開源控制元件，記錄一下

github地址： AssNineGridView

預覽效果

專案功能

• 當獲取的圖片數量超過最大顯示的圖片數量時，最后一張圖片上會顯示剩余數量（類似于QQ的動態效果）
• 使用Adapter模式設定圖片
• 默認增加了圖片點擊全屏預覽效果，并附帶預覽影片
• 使用介面加載圖片,支持任意的圖片加載框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等
• 整合了PhotoView圖片預覽
• 使用介面抽出圖片的加載方式，可以方便的將Glide替換成自己喜歡的ImageLoader等
• 使用代碼簡單，只需要幾行代碼

匯入依賴

build.gradle(Project)

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

build.gradle(Moudle)

implementation 'com.github.assion:AssNineGridView:v1.0.2'

布局檔案

mainactivtiy.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.assionhonty.lib.assninegridview.AssNineGridView
        android:id="@+id/angv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        app:angv_gridSpace="3dp"
        app:angv_maxSize="9"
        app:angv_singleImgRatio="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />


</androidx.constraintlayout.widget.ConstraintLayout>

邏輯代碼

自定義圖片加載器GlideImageLoader

package com.huncm.ninefin;

import android.content.Context;
import android.graphics.Bitmap;
import android.widget.ImageView;

import com.assionhonty.lib.assninegridview.AssNineGridView;
import com.bumptech.glide.Glide;

public class GlideImageLoader implements AssNineGridView.ImageLoader{

    @Override
    public void onDisplayImage(Context context, ImageView imageView, String url) {
        Glide.with(context).load(url).into(imageView);
    }

    @Override
    public Bitmap getCacheImage(String url) {
        return null;
    }
}

MainActivity

package com.huncm.ninefin;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.widget.Toast;

import com.assionhonty.lib.assninegridview.AssNineGridView;
import com.assionhonty.lib.assninegridview.AssNineGridViewClickAdapter;
import com.assionhonty.lib.assninegridview.ImageInfo;
import com.assionhonty.lib.assninegridview.AssNineGridViewAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    List<String> stringList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        AssNineGridView.setImageLoader(new GlideImageLoader());
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2c9e9xfoi3b4.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211113/07f8b31e675fd64b614e94d0c43a949c.7cxtw4q46nk0.jpg");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.17irwo5suuxs.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2oi4dcxsc1c0.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2pmalz29z8c0.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2c9e9xfoi3b4.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211113/07f8b31e675fd64b614e94d0c43a949c.7cxtw4q46nk0.jpg");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.17irwo5suuxs.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2oi4dcxsc1c0.png");
        stringList.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2pmalz29z8c0.png");


        List<ImageInfo> imageInfos = getImageInfos();
        AssNineGridView assNineGridView = findViewById(R.id.angv);
        assNineGridView.setAdapter(new MyAssAdapter(this, imageInfos));
    }

    private List<ImageInfo> getImageInfos() {
        List<ImageInfo> imageInfos = new ArrayList<>();
        for (String url : stringList){
            ImageInfo imageInfo = new ImageInfo();
            imageInfo.setBigImageUrl(url);
            imageInfo.setThumbnailUrl(url);
            imageInfos.add(imageInfo);
        }
        return imageInfos;
    }

    private class MyAssAdapter extends AssNineGridViewClickAdapter{
        private Context mContext;
        MyAssAdapter(Context context, List<ImageInfo> imageInfo) {
            super(context, imageInfo);
            mContext = context;
        }

        @Override
        public void onImageItemClick(Context context, AssNineGridView angv, int index, List<ImageInfo> imageInfo) {
            super.onImageItemClick(context, angv, index, imageInfo);
            //執行點擊事件
            Toast.makeText(mContext, "條目"+index+":自定義點擊效果", Toast.LENGTH_SHORT).show();
        }

    }



}

詳細參考： AssNineGridView：仿QQ空間，微信朋友圈展示圖片的九宮格圖片展示控制元件

自定義引數設定

避坑

minSdkVersion 版本要改為21