NineGridLayout仿照朋友圈九宮格動態(tài)圖片排版

微博,空間,朋友圈的動態(tài),都有能夠根據(jù)圖片數(shù)量的不同,使用不同的布局排版。
最具代表的就是1張圖片,4張圖片,多于9張圖片時。
網(wǎng)上方法很多,我使用NineGridLayout來實現(xiàn)此功能。
我在此淺談使用方法,原理性的東西暫時談不起。

1.導入依賴庫

我使用的這個庫也是來自網(wǎng)上大神的。在此留下大神的鏈接。
http://jaeger.itscoder.com/android/2016/03/06/nine-grid-iamge-view-libaray.html
此鏈接里有更詳細的說明,和demo。

2.新建MyNineGridLayout繼承NineGridLayout,并重寫三個方法,添加構造方法。

image.png

這個時候,其實我們就是新建了View控件,那么接下來的事情就很簡單了,只需要像使用其他控件一樣使用它就可以了。

3.首先在xml中使用該控件

image.png

4.然后因為是朋友圈動態(tài)中的一個控件,所以用到RecyclerView。因此MyNineGridLayout控件的初始化放在Adapter適配器中。

public class MyNineGridLayoutAdapter extends RecyclerView.Adapter<MyNineGridLayoutAdapter.ViewHolder>
{
    private Context context;
    private List<NineGridTestModel> modelList;

    /*
    * RecyclerView的三個方法
    * */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (null == context)
        {
            context = parent.getContext();
        }
        View view = LayoutInflater.from(context).inflate(R.layout.my_statu_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.layout.setIsShowAll(false);//當圖片多于9張時,不完全顯示。
        holder.layout.setUrlList(modelList.get(position).urlList);//設置圖片源
    }

    @Override
    public int getItemCount() {
        return (null == modelList) ? 0 : modelList.size();
    }

    /*
    * 內(nèi)部ViewHolder類
    * */
    public class ViewHolder extends RecyclerView.ViewHolder
    {
        NineGridLayout layout;
        public ViewHolder(View itemView) {
            super(itemView);
            layout = (NineGridLayout) itemView.findViewById(R.id.layout_nine_grid);
        }
    }

    public MyNineGridLayoutAdapter( List<NineGridTestModel> modelList)
    {
        this.modelList = modelList;
    }
}

注意onBindViewHolder()中的兩個方法:
holder.layout.setIsShowAll(false);當圖片數(shù)量大于9張時,最后一張會顯示剩余圖片數(shù),如“+3”。當參數(shù)為true時,會直接顯示所以圖片。
holder.layout.setUrlList(modelList.get(position).urlList);設置圖片的來源,其中的urlList是List<String>類型。
當你的圖片源與前面的步驟都沒有問題是,就可以正常工作了。

5.當你用到項目時,效果大體是這樣。

S70723-23435300.jpg
S70723-23440730.jpg
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容