當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

仿微信朋友圈【九宫格的实现】

發(fā)布時(shí)間：2024/1/8 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了仿微信朋友圈【九宫格的实现】小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

仿微信朋友圈【九宮格的實(shí)現(xiàn)】

標(biāo)簽：?九宮格自定義viewgroup 2017-04-18 18:39? 561人閱讀? 評(píng)論(0)? 收藏? 舉報(bào) ? 分類： Android（25）?

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。

目錄(?)[+]

最近有個(gè)想法，想用環(huán)信的sdk去做個(gè)社交類的小demo玩。在此之前，先來(lái)模仿下微信的朋友圈九宮格效果。同時(shí)也兼容了QQ的做法，如果數(shù)據(jù)集大于九張時(shí)，就在最后一張圖片上顯示一層遮罩效果，并顯示剩余圖片的數(shù)量。之后的計(jì)劃是仿微信的朋友圈評(píng)論、回復(fù)這方面的效果，在實(shí)際開發(fā)中還是比較實(shí)用的。

老規(guī)矩，先來(lái)張效果圖（錄制的圖片太大滿足不了神經(jīng)的CSDN上傳要求，壓縮又不清晰，所以還是放幾張靜態(tài)圖吧）?

需求分析

單張的情況，我們需要考慮圖片的寬度與我們自定義九宮格控件的寬度，如果圖片的寬度大于控件的寬度，那么我們就用控件的寬度作為圖片的寬度

2 X 2的情況，微信朋友圈對(duì)于4張的圖片，采用的是2 X 2的布局方式

當(dāng)圖片集大于9張時(shí)，我們需要在最后一張圖片上顯示一層遮罩，并顯示出剩余的圖片數(shù)量

最后一點(diǎn)需要特別注意，就是關(guān)于我們自定義控件的復(fù)用。比如說我們滑出屏幕的一個(gè)item的布局是7張圖片，這時(shí)滑進(jìn)屏幕的item是6張圖片的布局，難道我們還需要再重新new出來(lái)六個(gè)imageview？當(dāng)然不是，我們完全可以復(fù)用滑出屏幕的那個(gè)布局，同時(shí)移除一個(gè)imageview即可。反之如果當(dāng)前滑入的item是9張，那么復(fù)用后就只需要再new出來(lái)兩個(gè)imageview控件即可。其實(shí)是跟ListView的復(fù)用機(jī)制思想差不多。

根據(jù)上面的分析，實(shí)現(xiàn)起來(lái)應(yīng)該相對(duì)有些思路了。下面就開啟自定義模式了

自定義屬性

<?xml version="1.0" encoding="utf-8"?> <resources><declare-styleable name="NineGridView"><attr name="nine_gv_spacing" format="dimension"/><attr name="nine_maxImageNum" format="integer"/><attr name="nine_single_image" format="dimension"/></declare-styleable> </resources>

在我們自定義類的構(gòu)造方法中去獲取我們的自定義屬性

public NineGridView(Context context) {this(context, null);}public NineGridView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public NineGridView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);//單位轉(zhuǎn)換mNineGridViewSpacing = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mNineGridViewSpacing, context.getResources().getDisplayMetrics());mSingleImageSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mSingleImageSize, context.getResources().getDisplayMetrics());//獲取自定義屬性TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NineGridView, defStyleAttr, 0);int count = typedArray.getIndexCount();for (int i=0; i<count; i++){int attr = typedArray.getIndex(i);switch (attr){case R.styleable.NineGridView_nine_gv_spacing:mNineGridViewSpacing = (int) typedArray.getDimension(attr, mNineGridViewSpacing);break;case R.styleable.NineGridView_nine_maxImageNum:mMaxImageNum = typedArray.getInt(attr, mMaxImageNum);break;case R.styleable.NineGridView_nine_single_image:mSingleImageSize = typedArray.getDimensionPixelSize(attr, mSingleImageSize);break;}}typedArray.recycle();}

測(cè)量 onMeasure

測(cè)量我們控件的寬高等，這里根據(jù)上面的分析可知我們需要對(duì)單張圖片以及非單張圖片進(jìn)行判斷。如果是多張圖片的話，我們需要根據(jù)行、列個(gè)數(shù)以及每行每列之間的間距值來(lái)算出最終的寬、高

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int widthSize = MeasureSpec.getSize(widthMeasureSpec);int heightSize;int totalWidth = widthSize - getPaddingLeft() - getPaddingRight();if(imagesDatasList != null && imagesDatasList.size() > 0){if(imagesDatasList.size() == 1){//說明是單張圖片mWidth = mSingleImageSize > totalWidth ? (int)(totalWidth * 0.8) : mSingleImageSize;mHeight = mWidth;//進(jìn)一步根據(jù)高度來(lái)調(diào)整顯示，控制最大顯示范圍if(mHeight > mSingleImageSize){float ratio = mSingleImageSize * 1.0f / mHeight;mWidth = (int) (mWidth * ratio);mHeight = mSingleImageSize;}}else{//說明不止一張mWidth = mHeight = (totalWidth - mNineGridViewSpacing*(columnCount - 1)) / columnCount;}widthSize = mWidth * columnCount + mNineGridViewSpacing * (columnCount - 1) + getPaddingLeft() + getPaddingRight();heightSize = mHeight * rowCount + mNineGridViewSpacing * (rowCount - 1) + getPaddingTop() + getPaddingBottom();setMeasuredDimension(widthSize, heightSize);}else{heightSize = widthSize;setMeasuredDimension(widthSize, heightSize);}}

其實(shí)，實(shí)際開發(fā)中可能服務(wù)器返回的還有圖片的寬高比例，那么我們可以根據(jù)這個(gè)寬高比例還算出圖片的高度等等，具體情況根據(jù)業(yè)務(wù)來(lái)定。

確定位置 onLayout

既然是自定義ViewGroup，那么onLayout()方法肯定少不了。它是用來(lái)確定子view的位置的

@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {if(imagesDatasList == null) return;int childCount = imagesDatasList.size() > mMaxImageNum ? mMaxImageNum : imagesDatasList.size();for(int i = 0; i < childCount; i++){ImageView childView = (ImageView) getChildAt(i);if(mAdapter != null){mAdapter.onDisplayImage(getContext(), childView, imagesDatasList.get(i));//得到圖片數(shù)組中的每一張圖片}//通過此方式來(lái)確定寬高是否累加、換行，一并判斷了int columnNum = i % columnCount;int rowNum = i / columnCount;left = (mWidth + mNineGridViewSpacing ) * columnNum + getPaddingLeft();//根據(jù)i來(lái)決定left， i=0 left=getPaddingLeft i=1表示第二個(gè)childView的left=第一個(gè)child的寬+間距+內(nèi)間距top = (mHeight + mNineGridViewSpacing) * rowNum + getPaddingTop();right = left + mWidth;bottom = top + mHeight;childView.layout(left, top, right, bottom);}}

接下來(lái)就是我們的adapter跟這個(gè)自定義控件的交互了

public void setData(List<String> mDataLists){//有無(wú)數(shù)據(jù)決定著九宮格控件的顯示與隱藏if(mDataLists == null || mDataLists.isEmpty()){this.setVisibility(View.GONE);return;}else{this.setVisibility(View.VISIBLE);}//獲取圖片數(shù)量，圖片的數(shù)量有可能大于規(guī)定的最大數(shù)量9張int newImgCount = mDataLists.size() > mMaxImageNum ? mMaxImageNum : mDataLists.size();//給rowCount、columnCount行列賦值。對(duì)圖片的分布特殊處理，比如四張 2 X 2 分布setRowAndColumn(newImgCount);//復(fù)用if(imagesDatasList == null){for(int i = 0; i < newImgCount; i++){ImageView iv = imageViewHolder(i);if(iv == null) return;addView(iv, generateDefaultLayoutParams());}} else {int oldImgCount = imagesDatasList.size() > mMaxImageNum ? mMaxImageNum : imagesDatasList.size();//原來(lái)的圖片數(shù)據(jù)數(shù)量if(newImgCount < oldImgCount){//說明可以復(fù)用原來(lái)的imageview 移除后面多余的view（imageview）布局removeViews(newImgCount,oldImgCount - newImgCount);}else if(newImgCount > oldImgCount){//說明需要再新new幾個(gè)imageview提供多余的數(shù)據(jù)使用for(int i=oldImgCount; i < newImgCount; i++){ImageView iv = imageViewHolder(i);if(iv == null) return;addView(iv, generateDefaultLayoutParams());//將imageview添加到默認(rèn)寬高的布局中}}}//如果是最后一張，并且圖片的數(shù)據(jù)集總數(shù)大于九張，那么就在最后一張圖片上展示還剩圖片的數(shù)量if (mDataLists.size() > mMaxImageNum){View child = getChildAt(mMaxImageNum - 1);//九宮格的最后一張圖片if(child instanceof MyGridViewItemImageView){MyGridViewItemImageView imageView = (MyGridViewItemImageView) child;imageView.setImagesCount(mDataLists.size());}}imagesDatasList = mDataLists;//當(dāng)view布局內(nèi)容發(fā)生改變后調(diào)用此方法會(huì)重新走onMeasure()和onLayout()方法，重新調(diào)整布局//requestLayout(); //因?yàn)閍ddViews()方法內(nèi)部已經(jīng)有requestLayout()了}

我們需要在展示數(shù)據(jù)的adapter中去調(diào)用此方法。這里為了調(diào)用的簡(jiǎn)潔，我們額外定義了一個(gè)抽象類。

public abstract class NineGridViewAdapter {protected abstract void onDisplayImage(Context context, ImageView iv, String url);protected void onItemImageClick(Context context, ImageView iv, int position, List<String> list){}protected ImageView generateImageView(Context context){MyGridViewItemImageView imageView = new MyGridViewItemImageView(context);//設(shè)置圖片的點(diǎn)擊背景顏色變化效果imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);return imageView;} }

這里需要特別說明的是generateImageView()方法，這里面我們new出來(lái)我們的九宮格中的一張張圖片。同時(shí)，還就點(diǎn)擊圖片變暗的點(diǎn)擊效果以及超過9張后的效果處理。下面就具體看看

/*** 設(shè)置圖片點(diǎn)擊時(shí)有個(gè)背景色，松手后移除背景色類似XML文件設(shè)置selector效果*/public class MyGridViewItemImageView extends ImageView{private int textColor = Color.parseColor("#FFFFFF");private int textSize;private int imageViewBg = 0x88000000;private int imagesCount;//總的數(shù)據(jù)集private String textDesc;//要繪制的文字private Paint paint;public MyGridViewItemImageView(Context context) {this(context, null);}public MyGridViewItemImageView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public MyGridViewItemImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);textSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 32, context.getResources().getDisplayMetrics());//初始化畫筆iniPaint();}private void iniPaint() {paint = new Paint();paint.setAntiAlias(true);paint.setDither(true);paint.setColor(textColor);paint.setTextSize(textSize);paint.setTextAlign(Paint.Align.CENTER);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if(imagesCount > 9){canvas.drawColor(imageViewBg);//背景顏色Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();float baseLine = getHeight() / 2 - (fontMetrics.bottom + fontMetrics.top) / 2;canvas.drawText(textDesc, getWidth() / 2, baseLine, paint);}}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()){case MotionEvent.ACTION_DOWN:Drawable drawable = getDrawable();if(drawable != null){//drawable.mutate().setColorFilter(Color.GRAY, PorterDuff.Mode.MULTIPLY);drawable.setColorFilter(Color.GRAY, PorterDuff.Mode.MULTIPLY);ViewCompat.postInvalidateOnAnimation(this);}break;case MotionEvent.ACTION_MOVE:break;case MotionEvent.ACTION_CANCEL:case MotionEvent.ACTION_UP:Drawable drawableUp = getDrawable();if(drawableUp != null){//drawableUp.mutate().clearColorFilter();drawableUp.clearColorFilter();ViewCompat.postInvalidateOnAnimation(this);}break;}return super.onTouchEvent(event);}@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();//將drawable對(duì)象置空setImageDrawable(null);}public int getImagesCount() {return imagesCount;}public void setImagesCount(int imagesCount) {this.imagesCount = imagesCount;textDesc = "+"+(imagesCount - 9);invalidate();} }

需要特別說明的一點(diǎn)是drawable.mutate().setColorFilter(Color.GRAY, PorterDuff.Mode.MULTIPLY);這個(gè)方法。根據(jù)jeasonlzy大神的解釋是，如果這樣寫的話在部分機(jī)型上會(huì)出問題，所以他給出了一個(gè)解決方案。由于現(xiàn)有測(cè)試機(jī)種類有限，目前還沒有出現(xiàn)他說的這種問題。不管了，先給出兩種實(shí)現(xiàn)方式。

接下來(lái)，再來(lái)看看我們的adapter是如何調(diào)用交互的

/*** 展示數(shù)據(jù)的適配器 adapter*/public class RecyclerViewDatasAdapter extends RecyclerView.Adapter<RecyclerViewDatasAdapter.ImageViewHolder>{private Context context;private List<ImagesBean> lists;private LayoutInflater inflater;public RecyclerViewDatasAdapter(Context context, List<ImagesBean> lists) {this.context = context;this.lists = lists;inflater = LayoutInflater.from(context);}@Overridepublic ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new ImageViewHolder(inflater.inflate(R.layout.item_layout, parent, false));}@Overridepublic void onBindViewHolder(ImageViewHolder holder, int position) {holder.iv.setImageResource(R.mipmap.ic_launcher);holder.tvName.setText(lists.get(position).getName());holder.tvDesc.setText(lists.get(position).getDesc());holder.nineGridView.setData(lists.get(position).getImgsUrl());//將圖片集合傳到我們的自定義九宮格控件中}@Overridepublic int getItemCount() {return null != lists ? lists.size() : 0;}public class ImageViewHolder extends RecyclerView.ViewHolder{private ImageView iv;private TextView tvName;private TextView tvDesc;private NineGridView nineGridView;private NineGridViewAdapter nineGridViewAdapter = new NineGridViewAdapter() {@Overrideprotected void onDisplayImage(Context context, ImageView iv, String url) {//Glide.with(context).load(url).into(iv);Picasso.with(context).load(url).into(iv);}@Overrideprotected ImageView generateImageView(Context context) {return super.generateImageView(context);}@Overrideprotected void onItemImageClick(Context context, ImageView iv, int position, List<String> list) {Toast.makeText(context, "你點(diǎn)擊了 position = " + position, Toast.LENGTH_SHORT).show();//super.onItemImageClick(context, iv, position, list);}};public ImageViewHolder(View itemView) {super(itemView);iv = (ImageView) itemView.findViewById(R.id.iv);tvName = (TextView) itemView.findViewById(R.id.tv_name);tvDesc = (TextView) itemView.findViewById(R.id.tv_desc);nineGridView = (NineGridView) itemView.findViewById(R.id.nineGridView);nineGridView.setDataAdapter(nineGridViewAdapter);}} }

這里需要特別說明一下，大家可以看到這里我采用的是Glide加載圖片，在測(cè)試中發(fā)現(xiàn)當(dāng)圖片大于九張時(shí)會(huì)出現(xiàn)圖片部分被放大（也就是所謂的變形），開始我以為是自定義控件哪寫的有問題，但是經(jīng)過反復(fù)測(cè)試，發(fā)現(xiàn)是Glide加載的問題。按照網(wǎng)上說的方式，比如關(guān)掉加載動(dòng)畫等，發(fā)現(xiàn)并不能解決。Glide的源碼著實(shí)太復(fù)雜，所以目前并不能很好的解決這個(gè)問題。以后有時(shí)間再繼續(xù)研究吧，目前我換用了其它的圖片加載框架就沒問題了。

順便把我們的實(shí)體類也貼出來(lái)吧

/*** 實(shí)體類*/public class ImagesBean implements Serializable{private static final long serialVersionUID = 370114387259948705L;private int imgs;private String name;private String desc;private ArrayList<String> imgsUrl;//圖片數(shù)組集合public ImagesBean(String name, String desc, ArrayList<String> imgsUrl) {this.name = name;this.desc = desc;this.imgsUrl = imgsUrl;}public int getImgs() {return imgs;}public void setImgs(int imgs) {this.imgs = imgs;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}public ArrayList<String> getImgsUrl() {return imgsUrl;}public void setImgsUrl(ArrayList<String> imgsUrl) {this.imgsUrl = imgsUrl;}}

最后是我們的MainActivity

public class MainActivity extends AppCompatActivity {private RecyclerView recyclerView;private RecyclerViewDatasAdapter adapter;private List<ImagesBean> mDatas;private String[] imgsUrl = {"https://pic4.zhimg.com/02685b7a5f2d8cbf74e1fd1ae61d563b_xll.jpg","https://pic4.zhimg.com/fc04224598878080115ba387846eabc3_xll.jpg","https://pic3.zhimg.com/d1750bd47b514ad62af9497bbe5bb17e_xll.jpg","https://pic4.zhimg.com/da52c865cb6a472c3624a78490d9a3b7_xll.jpg","https://pic3.zhimg.com/0c149770fc2e16f4a89e6fc479272946_xll.jpg","https://pic1.zhimg.com/76903410e4831571e19a10f39717988c_xll.png","https://pic3.zhimg.com/33c6cf59163b3f17ca0c091a5c0d9272_xll.jpg","https://pic4.zhimg.com/02685b7a5f2d8cbf74e1fd1ae61d563b_xll.jpg","https://pic4.zhimg.com/fc04224598878080115ba387846eabc3_xll.jpg","https://pic3.zhimg.com/d1750bd47b514ad62af9497bbe5bb17e_xll.jpg","https://pic4.zhimg.com/da52c865cb6a472c3624a78490d9a3b7_xll.jpg","https://pic3.zhimg.com/0c149770fc2e16f4a89e6fc479272946_xll.jpg",};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);recyclerView = (RecyclerView) findViewById(R.id.recyclerview);recyclerView.setLayoutManager(new LinearLayoutManager(this));//測(cè)試數(shù)據(jù)mDatas = new ArrayList<>();for(int i=0; i < 12; i++){ArrayList<String> imgs = new ArrayList<>();imgs.addAll(Arrays.asList(imgsUrl).subList(0, i % 12 + 1));ImagesBean bean = new ImagesBean("我是bean", "測(cè)試九宮格圖片，只是測(cè)試demo，只是測(cè)試demo",imgs);mDatas.add(bean);}adapter = new RecyclerViewDatasAdapter(this, mDatas);recyclerView.setAdapter(adapter);} }

最后，非常感謝laobie大牛，此項(xiàng)目就是參考他的項(xiàng)目。如果大家覺得還有什么問題的話，歡迎留言交流。

總結(jié)

以上是生活随笔為你收集整理的仿微信朋友圈【九宫格的实现】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Mysql桌面工具--SQLyog使用方
下一篇：如何辨识兰花的好坏？