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

文章目錄

Android---仿QQ空間動態九宮格圖片預覽(一)
- NineGridImageView（九宮格圖片控制元件）
- - 預覽效果
  - 特性
  - 用法
  - demo代碼
- PhotoView控制元件
- - 效果預覽
  - 使用
- 使用ViewPager和PhotoView實作圖片瀏覽
- - 添加依賴
  - XML檔案
  - 使用Glide
  - Activity層操作
  - 配接器配置

星光不負趕路人，時間不負有心人，每當你在感嘆，如果有這樣一個東西就好了，請注意其實這是你的機會，

最近在做課程設計 🚌 ，發現自己要實作一個類似QQ 動態里面的圖片九宮格預覽效果的控制元件😑 ，自己本著大佬造輪子，自己在輪子上面改善，達到自己要到效果，結果搞了幾天才搞好，達到自己想要的效果，這是一個一波三折的程序，自己也看了很多原始碼，雖然很多也是似懂非懂的，畢竟是初學者，對很多底層配接器不是很懂🐶 ，但是終于被我搞出來了，順便寫一篇博客記錄一下，

NineGridImageView（九宮格圖片控制元件）

這是我在網上找到一個大佬的自定義的組件，我試了一下

NineGridImageView（九宮格圖片控制元件）

預覽效果

特性

設定圖片之間的間隔

app:imgGap="4dp" 或 nineGridImageView.setGap(int gap);
設定最大圖片數：

app:maxSize="9" 或者 nineGridImageView.setMaxSize(int maxSize)

如果最大圖片數小于等于0，則沒有圖片數的限制，
設定顯示樣式

app:showStyle="fill" 或 nineGridImageView.setShowStyle(int style);

默認樣式是網格樣式：STYLE_GRID

另外一種樣式是：STYLE_FILL
當只有一張圖的時候，可以設定其顯示大小，不讓其顯示的過小:

app:singleImgSize="120dp" 或 nineGridImageView.setSingleImgSize(int singleImgSize)

用法

首先添加依賴

implement 'com.jaeger.ninegridimageview:library:1.0.2'
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

AndroidManifest.xml添加權限

<uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

android:requestLegacyExternalStorage="true"
        android:usesCleartextTraffic="true"

在布局檔案中添加 NineGridImageView，如下所示：

<com.jaeger.ninegridimageview.NineGridImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_width="match_parent"
    app:imgGap="4dp"
    app:showStyle="fill"
    app:singleImgSize="120dp"/>

為 NineGridImageView 設定 NineGridImageViewAdapter

nineGridImageView.setAdapter(nineGridViewAdapter);

下面是 NineGridImageViewAdapter.class 的原始碼:

public abstract class NineGridImageViewAdapter<T> {

    protected abstract void onDisplayImage(Context context, ImageView imageView, T t);

    protected void onItemImageClick(Context context, int index, List<T> list) {

    }

    protected ImageView generateImageView(Context context) {
        GridImageView imageView = new GridImageView(context);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        return imageView;
    }
}

T 是你圖片的資料型別, 你可以簡單的使用 String 型別也可以是你自定義的型別；
你必須重寫 onDisplayImage(Context context, ImageView imageView, T t) 方法去設定顯示圖片的方式, 你可以使用 Picasso、Glide 、ImageLoader 或者其他的圖片加載庫，你也可以給 ImageView 設定一個占位圖；
如果你需要處理圖片的點擊事件，你可以重寫 onItemImageClick(Context context, int index, List<T> list) 方法，加上你自己的處理邏輯；
如果你要使用自定義的 ImageView，你可以重寫 generateImageView(Context context) 方法，去生成自定的 ImageView，

下面是一段示例代碼:

private NineGridImageViewAdapter<Photo> mAdapter = new NineGridImageViewAdapter<Photo>() {
    @Override
    protected void onDisplayImage(Context context, ImageView imageView, Photo photo) {
        Picasso.with(context)
            .load(photo.getSmallUrl)
            .placeholder(R.drawable.ic_default_image)
            .into(imageView);
    }
    @Override
    protected ImageView generateImageView(Context context) {
        return super.generateImageView(context);
    }
    @Override
    protected void onItemImageClick(Context context, int index, List<Photo> photoList) {
        showBigPicture(context, photoList.get(index).getBigUrl());
    }

           
...
	mNineGridImageView.setAdapter(mAdapter);
...

給 NineGridImageView 設定圖片資料：

nineGridImageView.setImagesData(List<T> imageDataList);

demo代碼

MainActivity

package com.huncm.review1;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.jaeger.library.StatusBarUtil;
import com.jaeger.ninegridimageview.NineGridImageView;
import com.jaeger.ninegridimageview.NineGridImageViewAdapter;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        List<String> list = new ArrayList<>();
        list.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211026/image.6719h9mvs700.png");
        list.add("https://img-blog.csdnimg.cn/img_convert/8dc4978a27ba3ccdaa697c2d7814f3ac.png");
        list.add("https://img-blog.csdnimg.cn/img_convert/52f5dd5a02ab958c9a2b4daa825925e5.png");
        list.add("https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20211026/image.6719h9mvs700.png");
        list.add("https://img-blog.csdnimg.cn/img_convert/8dc4978a27ba3ccdaa697c2d7814f3ac.png");

        NineGridImageView nineGridImageView = findViewById(R.id.nineGridImageView);
        nineGridImageView.setAdapter(myadpter);
        nineGridImageView.setImagesData( list);
    }

    private NineGridImageViewAdapter <String> myadpter = new NineGridImageViewAdapter<String>() {
        @Override
        protected void onDisplayImage(Context context, ImageView imageView, String url) {
            Glide.with(context).load(url).into(imageView);
        }

        @Override
        protected void onItemImageClick(Context context, int index, List<String> list) {
            super.onItemImageClick(context, index, list);
        }

        @Override
        protected ImageView generateImageView(Context context) {
            return super.generateImageView(context);
        }
    };
}

activity_main.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.jaeger.ninegridimageview.NineGridImageView
        android:id="@+id/nineGridImageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:imgGap="4dp"
        app:maxSize="9"
        app:showStyle="grid"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

當我實作這個控制元件的時候，我發現他不能點擊圖片放大，圖片不能預覽，而且不能左滑右滑😢,我的卑微又開始了，我就去網上找了如何實作點擊方大

這時出現了第二個控制元件：PhotoView

PhotoView控制元件

簡單的介紹

這是一個圖片查看庫，實作圖片瀏覽功能，支持pinch（捏合）手勢或者點擊放大縮小，支持在ViewPager中翻頁瀏覽圖片，
PhotoView 是一款擴展自Android ImageView ，支持通過單點/多點觸摸來進行圖片縮放的智能控制元件，功能實用和強大，

特性

可以用于查看圖片，并對圖片進行拖動縮放，拖動程序中不會出現邊緣空白；
雙擊縮小放大，Fling移動，并支持上述程序的漸變；
在放大情況下也支持viewpager等的拖動切換；
支持多擊事件檢測，單機，雙擊事件；
支持各種回呼給呼叫者；

效果預覽

使用

在根檔案（不是模塊檔案）中添加此：build.gradle

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

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

匯入依賴

    implementation 'com.github.chrisbanes:PhotoView:2.0.0'

撰寫布局檔案

<?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=".MainActivity2">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/photo_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingClass" />

</androidx.constraintlayout.widget.ConstraintLayout>

撰寫邏輯代碼

package com.huncm.review1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;


import com.bumptech.glide.Glide;
import com.github.chrisbanes.photoview.PhotoView;

import javax.microedition.khronos.opengles.GL;

public class MainActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        PhotoView photoView =  findViewById(R.id.photo_view);
        Glide.with(this).load("https://img-blog.csdnimg.cn/img_convert/52f5dd5a02ab958c9a2b4daa825925e5.png").into(photoView);
    }
}

寫到這里QQ九宮格也算是實作了一半，如果只是這兩個控制元件的話，實作的QQ九宮格圖片不能預覽，也不能左滑右滑，我便在網上搜索了一波，找到一種解決方法：使用ViewPager和PhotoView實作圖片瀏覽

使用ViewPager和PhotoView實作圖片瀏覽

使用photoView實作圖片的放大縮小，再使用viewPager實作圖片的左右滑動

添加依賴

build.gradle (app)

  //photoView
    implementation 'com.github.chrisbanes:PhotoView:2.0.0'
    //glide
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'androidx.annotation:annotation:1.0.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

build.gradle (project)

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

manifests 添加網路權限

    <uses-permission android:name="android.permission.INTERNET"/>

XML檔案

activity_main.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">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#99000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></androidx.viewpager.widget.ViewPager>

    <LinearLayout
        android:id="@+id/points"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/viewpager"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="5dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/viewpager">

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

使用Glide

這里使用Glide來加載網路圖片,Gilde自從4.0.0版本開始要通過生成GlideApp類來使用各種Api,那么就開始動手實踐吧

生成GlideApp

首先創建MyAppGlideModule類


@GlideModule
public final class MyAppGlideModule extends AppGlideModule {
}

build ->Rebuild Project

封裝ImageLoading類

因為我這里只是一個測驗Demo,所以這是封裝了一種方法,Glide的功能很強大，如加載gif圖, 實作模糊等等操作，這里插入一個大佬寫的Glide專欄

Android圖片加載框架最全決議----Glide

public class ImageLoader {
    public static void display(Context context, ImageView imageView,String url){
        GlideApp
                .with(context)
                .load(url)
                .placeholder(R.drawable.timg)
                .into(imageView);
    }

}

Activity層操作

在這一層需要初始化Viewpager和設定白點指示器, 并和配接器系結資料

package com.huncm.photoviewdemo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;

    private String[] imglist = {
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2c9e9xfoi3b4.png",
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.17irwo5suuxs.png",
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2oi4dcxsc1c0.png",
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.2m80368jvr80.png",
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.65n8rjffvk00.png",
            "https://cdn.jsdelivr.net/gh/Yqifei/Blog-Image@master/20210427/image.75iaxbwd0fk0.png"
    };
    private LinearLayout points;
    private int prePosition;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initData();
    }

    private void initData() {
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float v, int i1) {
                position = position % imglist.length;
                //把前一個白變為黑
                points.getChildAt(prePosition).setBackgroundResource(R.drawable.point_back);
                //把當前白點變為黑點
                points.getChildAt(position).setBackgroundResource(R.drawable.point_white);
                //記錄下當前位置(當前位置變白后，賦值給前一個點)
                prePosition = position;
            }

            @Override
            public void onPageSelected(int i) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    private void initView() {
        viewPager = findViewById(R.id.viewpager);
        myViewPagerAdapter = new MyViewPagerAdapter(this,imglist);
        viewPager.setAdapter(myViewPagerAdapter);
        points = findViewById(R.id.points);
        for(int i = 0;i<imglist.length;i++) {
            //白點
            //根據viewPager的數量，添加白點指示器
            ImageView view = new ImageView(this);
            view.setBackgroundResource(R.drawable.point_back);
            //給點設定寬高
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
            //給控制元件設定邊距
            params.leftMargin = 10;
            //給view設定引數
            view.setLayoutParams(params);
            //將圖片添加到線性布局中
            points.addView(view);
        }

        points.getChildAt(0).setBackgroundResource(R.drawable.point_white);
        viewPager.setCurrentItem(0);
    }
}

配接器配置

這里把需要瀏覽的圖片地址陣列傳遞過去，然后通過Gilde加載網路圖片, 并以PhotoView代替ImageView實作放大縮小功能

package com.huncm.photoviewdemo;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.viewpager.widget.PagerAdapter;

import com.github.chrisbanes.photoview.PhotoView;

public class MyViewPagerAdapter extends PagerAdapter {
    private String[] imgList;
    private Context context;
    public MyViewPagerAdapter(Context context,String[] imgList){
        this.imgList = imgList;
        this.context = context;
    }


    @Override
    public int getCount() {
        return imgList.length;
    }

    //指定復用的判斷邏輯，固定寫法：view == object
    @Override
    public boolean isViewFromObject(View view, Object object) {
        //當創建新的條目，又反回來，判斷view是否可以被復用(即是否存在)
        return view == object;
    }

    //回傳要顯示的條目內容
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //container  容器  相當于用來存放imageView

        PhotoView photoView = new PhotoView(context);

        photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);

        ImageLoader.display(context,photoView,imgList[position]);

        //把圖片添加到container中
        container.addView(photoView);
        //把圖片回傳給框架，用來快取
        return photoView;
    }

    //銷毀條目
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //object:剛才創建的物件，即要銷毀的物件
        container.removeView((View) object);
    }
}

Demo地址

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357151.html

標籤：其他

上一篇：用iPad撰寫C/C++代碼（計算機考研黨也能用iPad寫演算法題）

下一篇：Android---仿QQ空間動態九宮格圖片預覽(二)

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