2. 程式人生 > >自定義仿微信九張圖片選擇展示庫

自定義仿微信九張圖片選擇展示庫

阿新 • • 發佈：2018-12-09

簡介

現在眾多App中都會有發表圖文的功能，在編輯圖文的時候會有多圖的展示效果。下面就給大家分享一下最近專案中用到的一款自定義出來的一個庫。

思路講解

該庫是在fragment中，使用RecyclerView進行編寫。利用RecyclerView的一些特性較好的實現了專案中需求。在此分享給大家，不足之處多多指出。

1.首先介紹一下所用到的幾款開源庫,非常實用向大家推薦一下：

圖片選擇庫：FinalGallery是一款非常強大的圖片選擇庫，支援多種自定義。 圖片載入庫：glide支援各種型別，各種路徑下圖片的檢視。 螢幕適配庫：AndroidAutoLayout鴻洋大神的一款神作，適配非常給力。

2.該庫使用RecyclerView來載入顯示圖片，介面卡程式碼如下：

public class AddPhotoAdapter extends RecyclerView.Adapter<AddPhotoAdapter.MyViewHolder> {

    private List<PhotoInfo> data = new ArrayList<>();
    private LayoutInflater mInflater;
    public final static int DEFAULT_PIC_ID = 0x2B67;
    private
 
 int maxNum;
    private Context mContext;

    private onRecyclerViewItemClickListener mRecyclerViewItemClickListener;

    public void setRecyclerViewItemClickListener(onRecyclerViewItemClickListener recyclerViewItemClickListener) {
        this.mRecyclerViewItemClickListener = recyclerViewItemClickListener;
    }

    public
 
 AddPhotoAdapter(Context context, int max) {
        this.maxNum = max;
        mInflater = LayoutInflater.from(context);
        mContext = context;
        PhotoInfo photo = addDefaultItem();
        data.add(photo);
    }

    @NonNull
       public PhotoInfo addDefaultItem() {
        PhotoInfo photo = new PhotoInfo();
        photo.setPhotoPath(R.drawable.icon_add_photo_new + "");
        photo.setPhotoId(DEFAULT_PIC_ID);
        return photo;
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.fragment_add_photo_item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {

        if (isAddIcon(position)) {
            holder.im_add_photo_item.setScaleType(ImageView.ScaleType.FIT_XY);
            holder.im_add_photo_item.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImagePickClick(view, pos);
                }
            });
            holder.im_close_photo_item.setVisibility(View.GONE);
        } else {
            holder.im_add_photo_item.setScaleType(ImageView.ScaleType.CENTER_CROP);
            holder.im_add_photo_item.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImagePreviewClick(holder.itemView, pos);
                }
            });

            holder.im_add_photo_item.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View view) {
                    int pos = holder.getLayoutPosition();
                    mRecyclerViewItemClickListener.onImageLongClick(view, holder);
                    return true;
                }
            });
            holder.im_close_photo_item.setVisibility(View.VISIBLE);
        }
        if (getInfo(position).getPhotoPath().equals(R.drawable.icon_add_photo_new + ""))
            Glide.with(mContext).load(R.drawable.icon_add_photo_new).into(holder.im_add_photo_item);
        else
            Glide.with(mContext).load(getInfo(position).getPhotoPath()).into(holder.im_add_photo_item);

        holder.im_close_photo_item.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int pos = holder.getLayoutPosition();
                if (pos < data.size())
                    mRecyclerViewItemClickListener.onCloseImageClick(view, pos);
            }
        });

    }

    @Override
    public int getItemCount() {
        return data.size();
    }

    private PhotoInfo getInfo(int position) {
        return data.get(position);
    }

    private boolean isAddIcon(int position) {
        return data.get(position).getPhotoId() == DEFAULT_PIC_ID;
    }

    public void addData(List<PhotoInfo> list) {
        for (PhotoInfo photo : list) {
            data.add(data.size() - 1, photo);
            notifyItemInserted(data.size() - 2);
        }
        if (data.size() == maxNum + 1) {
            data.remove(data.size() - 1);
            notifyItemRemoved(data.size());
        }
    }

    public List<PhotoInfo> getData() {
        return data;
    }

    public List<String> getAllPath() {
        List<String> list = new ArrayList<>();
        for (PhotoInfo info : data) {
            if (info.getPhotoId() != DEFAULT_PIC_ID)
                list.add(info.getPhotoPath().trim());
        }
        return list;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView im_add_photo_item;
        private ImageView im_close_photo_item;

        public MyViewHolder(View itemView) {
            super(itemView);
            AutoUtils.autoSize(itemView);
            im_add_photo_item = (ImageView) itemView.findViewById(R.id.im_add_photo_item);
            im_close_photo_item = (ImageView) itemView.findViewById(R.id.im_close_photo_item);
        }
    }

    public void setMaxNum(int maxNum) {
        this.maxNum = maxNum;
    }
}

RecyclerView中在圖片未達所設定最大選擇數量時，會一直有一張預設圖片供使用者點選載入圖片。所以需要在構造方法中呼叫addDefaultItem()方法新增一張預設圖片，加入集合data中。 在onBindViewHolder(final MyViewHolder holder, final int position)方法中：通過isAddIcon(int position)方法判斷使用者當前點選的圖片是預設圖片或者已選擇的圖片；

定義介面onRecyclerViewItemClickListener來監控使用者對RecyclerView的圖片的各種操作：

public interface onRecyclerViewItemClickListener {

    void onImagePickClick(View view, int position);

    void onImagePreviewClick(View view, int position);

    void onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder);

    void onCloseImageClick(View view, int position);

}

需要注意的是在相簿中選擇好圖片往RecyclerView中新增時需要做好預設圖片的處理，addData(List list)需要在預設圖片前面插入新選擇的圖片，並且判斷所選擇圖片是否已經達到最大可選數量。注意重新整理RecyclerView中相應位置的item。

3.fragment的程式碼如下：

public class AddPhotoFragment extends Fragment implements onRecyclerViewItemClickListener {

    private View view;
    private RecyclerView fragment_add_photo;
    private AddPhotoAdapter mAddPhotoAdapter;
    private int maxNum = 9;
    private int REQUEST_CODE_GALLERY = 0x12313;
    private ItemTouchHelper itemTouchHelper;

    private onPhotoNumChangedListener mNumCountListener;

    public void setNumCountListener(onPhotoNumChangedListener numCountListener) {
        mNumCountListener = numCountListener;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_add_photo, null);

        initView(view);
        initEvent();
        return view;
    }

    private void initView(View view) {
        fragment_add_photo = (RecyclerView) view.findViewById(R.id.fragment_add_photo);
        mAddPhotoAdapter = new AddPhotoAdapter(getActivity(), maxNum);
    }

    private void initEvent() {
        GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 3);
        layoutManager.setAutoMeasureEnabled(true);
        fragment_add_photo.setLayoutManager(layoutManager);
        fragment_add_photo.setAdapter(mAddPhotoAdapter);
        fragment_add_photo.setItemAnimator(new DefaultItemAnimator());
        itemTouchHelper = new ItemTouchHelper(new MyItemTouchHelper(mAddPhotoAdapter,maxNum));
        itemTouchHelper.attachToRecyclerView(fragment_add_photo);

        mAddPhotoAdapter.setRecyclerViewItemClickListener(this);

    }

    @Override
    public void onImagePickClick(View view, int position) {
        FunctionConfig config = new FunctionConfig.Builder().setMutiSelectMaxSize(maxNum - mAddPhotoAdapter.getData().size() + 1).build();
        GalleryFinal.openGalleryMuti(REQUEST_CODE_GALLERY, config, new GalleryFinal.OnHanlderResultCallback() {
            @Override
            public void onHanlderSuccess(int reqeustCode, List<PhotoInfo> resultList) {
                Log.e("roy", resultList.toString());
                mAddPhotoAdapter.addData(resultList);
                if (mNumCountListener != null)
                    mNumCountListener.getSelectedPhotoNum(mAddPhotoAdapter.getAllPath().size());
            }

            @Override
            public void onHanlderFailure(int requestCode, String errorMsg) {

            }
        });
    }

    @Override
    public void onImagePreviewClick(View view, final int position) {
        FunctionConfig config = new FunctionConfig.Builder().setMutiSelectMaxSize(1).build();
        GalleryFinal.openGallerySingle(REQUEST_CODE_GALLERY, config, new GalleryFinal.OnHanlderResultCallback() {
            @Override
            public void onHanlderSuccess(int reqeustCode, List<PhotoInfo> resultList) {
                mAddPhotoAdapter.getData().remove(position);
                mAddPhotoAdapter.getData().add(position, resultList.get(0));
                mAddPhotoAdapter.notifyItemChanged(position);
            }

            @Override
            public void onHanlderFailure(int requestCode, String errorMsg) {

            }
        });
    }

    @Override
    public void onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder) {
        boolean isContain = false;

        if (mAddPhotoAdapter.getData().size() == maxNum) {
            for (PhotoInfo info : mAddPhotoAdapter.getData()) {
                if (info.getPhotoId() == DEFAULT_PIC_ID) {
                    isContain = true;
                }
            }
        }

        if (mAddPhotoAdapter.getData().size() < maxNum || isContain) {
            mAddPhotoAdapter.getData().remove(mAddPhotoAdapter.getData().size() - 1);
            mAddPhotoAdapter.notifyItemRemoved(mAddPhotoAdapter.getData().size());
        }

        itemTouchHelper.startDrag(holder);
    }


    @Override
    public void onCloseImageClick(View view, int position) {
        /**
         * 該判斷條件防止刪除過快出現的crash
         */
        if (position <= mAddPhotoAdapter.getData().size() - 1) {
            mAddPhotoAdapter.getData().remove(position);
            mAddPhotoAdapter.notifyItemRemoved(position);
            boolean isContain = false;
            for (PhotoInfo photo : mAddPhotoAdapter.getData()) {
                if (photo.getPhotoId() == DEFAULT_PIC_ID) {
                    isContain = true;
                }
            }

            if (!isContain) {
                PhotoInfo photo = mAddPhotoAdapter.addDefaultItem();
                mAddPhotoAdapter.getData().add(photo);
                mAddPhotoAdapter.notifyItemInserted(mAddPhotoAdapter.getData().size() - 1);
            }

        }
        if (mNumCountListener != null)
            mNumCountListener.getSelectedPhotoNum(mAddPhotoAdapter.getAllPath().size());
    }

    /**
     * 設定可選擇的最大照片數量
     *
     * @param maxNum
     */
    public void setMaxNum(int maxNum) {
        this.maxNum = maxNum;
        mAddPhotoAdapter.setMaxNum(maxNum);
        mAddPhotoAdapter.notifyDataSetChanged();
    }

    /**
     * 獲取選擇照片的本地路徑
     *
     * @return
     */
    public List<String> getAllSelectedPath() {
        return mAddPhotoAdapter.getAllPath();
    }
}

這裡需要注意的是layoutManager.setAutoMeasureEnabled(true)屬性，該屬性是在RecyclerView24以上版本才有的。其作用是為了讓RecyclerView自適應高度。

該類中實現了介面卡中的回撥，在onImagePreviewClick(View view, final int position)和onImagePickClick(View view, int position)回撥方法中結合FinalGallery庫實現對相簿的圖片進行選擇，拿到返回的路徑。

在onCloseImageClick(View view, int position)回撥方法實現圖片的刪除操作時需要加上if (position <= mAddPhotoAdapter.getData().size() - 1) 的判斷，否則操作過快適配器重新整理未完成會造成崩潰。

通過設定setMaxNum(int maxNum)和呼叫getAllSelectedPath()方法，我們可以設定選擇圖片的最大數量和獲取到所選擇圖片的本地路徑。

這裡定義了介面onPhotoNumChangedListener來監聽所選擇的圖片數量，可以自行選擇實現與否。

public interface onPhotoNumChangedListener {
    void getSelectedPhotoNum(int count);
}

4.在這裡利用RecyclerView的特性實現了選擇圖片的位置拖拽變換功能，需要繼承ItemTouchHelper.Callback類，實現相應的方法：

public class MyItemTouchHelper extends ItemTouchHelper.Callback {

    private AddPhotoAdapter mAddPhotoAdapter;
    private int maxNum;

    public MyItemTouchHelper(AddPhotoAdapter adapter, int count) {
        this.mAddPhotoAdapter = adapter;
        this.maxNum = count;
    }

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        if (recyclerView.getLayoutManager() instanceof GridLayoutManager) {
            final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            final int swipeFlags = 0;
            return makeMovementFlags(dragFlags, swipeFlags);
        } else {
            final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
            final int swipeFlags = 0;
            return makeMovementFlags(dragFlags, swipeFlags);
        }
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {

        int fromPosition = viewHolder.getAdapterPosition();
        int toPosition = target.getAdapterPosition();
        if (fromPosition < toPosition) {
            for (int i = fromPosition; i < toPosition; i++) {
                Collections.swap(mAddPhotoAdapter.getData(), i, i + 1);
            }
        } else {
            for (int i = fromPosition; i > toPosition; i--) {
                Collections.swap(mAddPhotoAdapter.getData(), i, i - 1);
            }
        }
        mAddPhotoAdapter.notifyItemMoved(fromPosition, toPosition);
        return true;
    }

    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);

        if (mAddPhotoAdapter.getData().size() < maxNum) {
            PhotoInfo photo = mAddPhotoAdapter.addDefaultItem();
            mAddPhotoAdapter.getData().add(photo);
            mAddPhotoAdapter.notifyItemInserted(mAddPhotoAdapter.getData().size() - 1);
        }
    }

    @Override
    public boolean isLongPressDragEnabled() {
        return false;
    }

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {

    }
}

上一步中實現的介面卡中的onImageLongClick(View view, AddPhotoAdapter.MyViewHolder holder)回撥方法，我們需要在長按載入到RechclerView的圖片時，如果預設圖片存在，需要使其隱藏掉。並且呼叫itemTouchHelper.startDrag(holder);

getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)中：我們需要判斷當前的RecyclerView是實現的ListView的功能還是GridView的功能，設定拖動的方向。

在onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)中：我們需要判斷圖片移動的位置，按照拖拽後的位置重新給集合排序，並且重新整理RecyclerView。

isLongPressDragEnabled()中：需設定為return false。

clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)中：在拖拽結束後需要判斷當前選擇的圖片數量是否已經達到設定的上限，若無，需要把預設圖片顯示出來。

簡單的幾行程式碼就能實現這麼炫酷的功能，是不是很酷。

相關推薦

自定義仿微信九張圖片選擇展示庫

簡介 現在眾多App中都會有發表圖文的功能，在編輯圖文的時候會有多圖的展示效果。下面就給大家分享一下最近專案中用到的一款自定義出來的一個庫。 思路講解 該庫是在fragment中，使用RecyclerView進行編寫。利用RecyclerView的一些特性

Android 自定義仿微信網路載入彈出框

額,沒有餓了麼的動畫效果好看,但是,特別適用,拿來就用! 看一下效果圖 圖片素材 好了,其實很簡單,就是一個自定義Dialog的控制元件而已 1. 自定義view的style樣式

使用南塵的ImagePicker實現仿微信的相簿圖片選擇以及拍照上傳

在記錄之前先放上原作的GitHub專案地址：ImagePicker 南塵的框架寫得相當不錯，我們可以在我們的專案中新增依賴直接使用，但是我在使用的時候發現了一個小bug，就在圖片預覽的介面選擇了圖片後，點選返回到所有圖片介面時，在預覽被選中的圖片的CheckBox沒有勾上，

安卓仿微信上傳圖片問題（2）

之前那樣做，發現圖片好模糊，加了一個壓縮圖片的，還有儲存圖片的方法如下： 大神的demo地址：http://blog.csdn.net/jdsjlzx/article/details/44160603#html 微信上傳圖片問題連結：http://blog.csdn.net/lmy0

安卓仿微信上傳圖片問題

最近做了安卓仿微信上傳圖片，果斷把大神的demo拷了過來，後來發現上傳的時候出現了幾個問題，那個部落格下老是提醒連結過多，評論不了，就搬到這了## ---------首先先貼大神的demo地址：http://blog.csdn.net/jdsjlzx/article/details/

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫

Wuss Weapp 一款高質量，元件齊全，高自定義的微信小程式 UI 元件庫 文件 https://phonycode.github.io/wuss-weapp 掃碼體驗 使用微信掃一掃體驗小程式元件示例 演示圖片 快速上手 在開始使用 Wuss We

Android 使用ContentProvider掃描手機中的圖片，仿微信顯示本地圖片效果

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

仿微信朋友圈圖片點選放大效果

這兩天寫了個小專案，其中用到了點選一組圖片中的一張可以檢視它的放大版，用手向左滑動能看到下一張的這組圖片中的第二張的放大版。。。依次類推，單擊放大版的圖片實現關閉效果，對於js能力不太好的我只能找度娘，然後就發現了photoswiper.js，不得不說真的好用，

原 微信分享自定義樣式&微信分享給朋友自定義圖文資訊

下圖為效果圖：上圖為沒有設定得樣式，下圖是設定樣式分享後的效果，差距甚遠。 做的過程也遇到了一些問題，我會在博文最下方標明. 下面是我的程式碼： <!DOCTYPE html> <html lang="en"> <head>

自定義實現微信通訊錄效果View

歡迎訪問我的個人獨立部落格 ittiger.cn，原創文章，未經允許不得隨意轉載。 前言 在使用App過程中，經常會有使用到聯絡人或城市列表的場景，其實這兩種效果是一樣的，都是右邊有個索引列表，點選索引列表可跳轉到指定字母開頭的聯絡人或城市上去，同時

微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項

微信小程式圖片選擇、上傳到伺服器、預覽（PHP）實現例項 小程式實現選擇圖片、預覽圖片、上傳到開發者伺服器上 後臺使用的tp3.2 圖片上傳  請求時候的header參考時可以去掉(個人後臺驗證許可權使用) 小程式前端程式碼： <view class="se

仿微信相簿資料夾選擇的互動

前言 這是按照微信相簿中資料夾選擇的展示動畫做出來的PopupWindow。之前自己做過相簿部分，發現微信相簿中這個資料夾顯示和消失的動畫很自然，很舒服，而之前做的不是那麼自然，於是就做了這麼個東西。 效果 PopupWindow 做這個互動

微信小程式 圖片選擇器

android開發中經常使用到頭像上傳需求,選擇圖片有二種方式,第一種是從相簿中選擇還有一種就是拍攝,小程式也有這個功能,而且比android容易多了, 先看官網給的文件： wx.chooseImage(Object object) 從本地相簿選擇圖片或使用相機拍照

Android 仿微信影象拍攝和選擇介面

外掛執行後的畫面如下： 下面這張圖對影象進行篩選，根據照片產生的源頭分（QQ和微信和相機） 點選某資料夾後，可以檢視該資料夾下包含的所有的圖片 圖片選擇介面 選中後就跳到已經選擇介面的視窗，並且可以對該吃圖片上傳進行簡

Android仿微信朋友圈九宮格圖片展示自定義控制元件，支援縮放動畫~

一直對微信朋友圈九宮格圖片顯示控制元件比較好奇，找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美，缺少點選圖片預覽頁面和縮放動畫，作為一個不斷追求完美主義的人，我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖： （

Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新

樣式 post and 微信 修改 size roi 自定義 details 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉

小程式自定義數字鍵盤|仿微信支付、支付寶支付密碼鍵盤

微信小程式自定義鍵盤外掛wcKeyboard|仿微信數字軟鍵盤|仿支付寶自定義數字鍵盤|小程式自定義模擬系統鍵盤 前段時間有開發過一個html5仿支付寶、微信支付數字鍵盤，在某些情況下自定義數字鍵盤應用還是蠻多的，比如 購物商城系統 零錢付款 ,會員卡支付，恰好微信小程式沒有內部數字鍵盤元件，這樣輸入密

Flutter仿微信，支付寶密碼輸入框+自定義鍵盤

大家好，我又來了。 今年這個冬天真的是“寒冬”啊，我是真的被“凍傷”了，一年的計劃全部被打算了，賊無奈，也讓我遭受了一定的打擊，希望之光在哪？（吐槽到此為止） 回到咱們的正題，剛用Flutter做完一個金融專案，當中使用到了類似於微信，和支付寶的那種密碼輸入框，然後為了安全一點也自己實現了自定義的鍵盤，今天跟

安卓專案實戰之仿微信朋友圈的九宮格自定義控制元件

效果圖 圖片展示形式 1、當只有1張圖時，可以自己定製圖片寬高，也可以使用預設九宮格的寬高； 2、當只有4張圖時，以2*2的方式顯示； 3、除以上兩種情況下，都是按照3列方式顯示，但這時有一些細節： a、如果只有9張圖，當然是以3*3的方式顯示；

Android自定義控制元件——仿微信半透明載入框

在我們的app中不免回遇到耗時操作，這時我們給個載入框進行過度，使使用者體驗大大加強。 一、CustomDialog類的編寫 package com.daqsoft.jingguan.weight; import android.app.Dialo