GridView实现照片墙

女爷i 2022-05-29 02:46 237阅读 0赞

转载请注明：[http://blog.csdn.net/feather\_wch/article/details/79568078][http_blog.csdn.net_feather_wch_article_details_79568078]

本文介绍照片墙功能的实现思路和源码。照片墙效果也和相册类似。

整体思路是：  
1. 使用GridView控件(设置好其布局，以及Item的布局)  
2. 自定义GridView的适配器(重点是getView方法的重写)  
3. 使用GridView并设置适配器

如果有问题请指出，万分感谢！

## 源码 ##

GridView的布局

GridView Item的布局

GrirdView的Item使用自定义的正方形ImageView

public class SquareImageView extends ImageView{ 
        //...
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
          //重点：将高度的也设置为宽度的widthMeasureSpec
            super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        }
    }

GridView的Adapter

public class ImageAdapter extends BaseAdapter{ 
        ArrayList<String> mUrlList;
        LayoutInflater mInflater;
        ImageLoader mImageLoader;
        Boolean mIsStopScroll = true;
    
        public ImageAdapter(Context context, ArrayList<String> urls){
            mImageLoader = new ImageLoader(context);
            mInflater = LayoutInflater.from(context);
            mUrlList = urls;
        }
        @Override
        public int getCount() {
            return mUrlList.size();
        }
        @Override
        public Object getItem(int position) {
            return mUrlList.get(position);
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder = null;
            if(convertView == null){
                convertView = mInflater.inflate(R.layout.gridview_item, parent, false);
                holder = new ViewHolder();
                holder.imageView = (ImageView)convertView.findViewById(R.id.image);
                convertView.setTag(holder);
            }else{
                holder = (ViewHolder)convertView.getTag();
            }
            ImageView imageView = holder.imageView;
            final String tag = (String) imageView.getTag();
            final String url = (String) getItem(position);
            //1、图片已经发生了变化，使用默认图片
            if(!url.equals(tag)){
                imageView.setImageResource(R.drawable.ic_launcher);
            }
            //2、停止滚动时加载图片
            if(mIsStopScroll){
                imageView.setTag(url);
                mImageLoader.bindBitmap((String)getItem(position), holder.imageView, 200, 200);
            }
            return convertView;
        }
    
        class ViewHolder{
            ImageView imageView;
        }
    
        public void setmIsStopScroll(Boolean mIsStopScroll) {
            this.mIsStopScroll = mIsStopScroll;
        }
    }

GrdiView的使用

//1. 获得控件并设置监听器(解决快速滑动时列表卡顿问题)
    mGridView = view.findViewById(R.id.gridView);
    mGridView.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {
            if(scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE){
                mImageAdapter.setmIsStopScroll(true);
                mImageAdapter.notifyDataSetChanged();
            }else{
                mImageAdapter.setmIsStopScroll(false);
            }
        }
    
        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        }
    });
    //2. 设置适配器(提供图片的Url列表)
    mImageAdapter = new ImageAdapter(getActivity(), mUrlList);
    mGridView.setAdapter(mImageAdapter);

[http_blog.csdn.net_feather_wch_article_details_79568078]: http://blog.csdn.net/feather_wch/article/details/79568078