當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/1/8 编程问答 45 豆豆

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

仿微信朋友圈【九宮格的實現】

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

目錄(?)[+]

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

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

需求分析

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

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

當圖片集大于9張時，我們需要在最后一張圖片上顯示一層遮罩，并顯示出剩余的圖片數量

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

根據上面的分析，實現起來應該相對有些思路了。下面就開啟自定義模式了

自定義屬性

<?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>

在我們自定義類的構造方法中去獲取我們的自定義屬性

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);//單位轉換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();}

測量 onMeasure

測量我們控件的寬高等，這里根據上面的分析可知我們需要對單張圖片以及非單張圖片進行判斷。如果是多張圖片的話，我們需要根據行、列個數以及每行每列之間的間距值來算出最終的寬、高

@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;//進一步根據高度來調整顯示，控制最大顯示范圍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);}}

其實，實際開發中可能服務器返回的還有圖片的寬高比例，那么我們可以根據這個寬高比例還算出圖片的高度等等，具體情況根據業務來定。

確定位置 onLayout

既然是自定義ViewGroup，那么onLayout()方法肯定少不了。它是用來確定子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));//得到圖片數組中的每一張圖片}//通過此方式來確定寬高是否累加、換行，一并判斷了int columnNum = i % columnCount;int rowNum = i / columnCount;left = (mWidth + mNineGridViewSpacing ) * columnNum + getPaddingLeft();//根據i來決定left， i=0 left=getPaddingLeft i=1表示第二個childView的left=第一個child的寬+間距+內間距top = (mHeight + mNineGridViewSpacing) * rowNum + getPaddingTop();right = left + mWidth;bottom = top + mHeight;childView.layout(left, top, right, bottom);}}

接下來就是我們的adapter跟這個自定義控件的交互了

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

我們需要在展示數據的adapter中去調用此方法。這里為了調用的簡潔，我們額外定義了一個抽象類。

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);//設置圖片的點擊背景顏色變化效果imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);return imageView;} }

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

/*** 設置圖片點擊時有個背景色，松手后移除背景色類似XML文件設置selector效果*/public class MyGridViewItemImageView extends ImageView{private int textColor = Color.parseColor("#FFFFFF");private int textSize;private int imageViewBg = 0x88000000;private int imagesCount;//總的數據集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對象置空setImageDrawable(null);}public int getImagesCount() {return imagesCount;}public void setImagesCount(int imagesCount) {this.imagesCount = imagesCount;textDesc = "+"+(imagesCount - 9);invalidate();} }

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

接下來，再來看看我們的adapter是如何調用交互的

/*** 展示數據的適配器 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, "你點擊了 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加載圖片，在測試中發現當圖片大于九張時會出現圖片部分被放大（也就是所謂的變形），開始我以為是自定義控件哪寫的有問題，但是經過反復測試，發現是Glide加載的問題。按照網上說的方式，比如關掉加載動畫等，發現并不能解決。Glide的源碼著實太復雜，所以目前并不能很好的解決這個問題。以后有時間再繼續研究吧，目前我換用了其它的圖片加載框架就沒問題了。

順便把我們的實體類也貼出來吧

/*** 實體類*/public class ImagesBean implements Serializable{private static final long serialVersionUID = 370114387259948705L;private int imgs;private String name;private String desc;private ArrayList<String> imgsUrl;//圖片數組集合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));//測試數據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", "測試九宮格圖片，只是測試demo，只是測試demo",imgs);mDatas.add(bean);}adapter = new RecyclerViewDatasAdapter(this, mDatas);recyclerView.setAdapter(adapter);} }

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Mysql桌面工具--SQLyog使用方
下一篇： Java-满天繁星案例（1）