Android瀑布流照片墙、滑动切换图片

继续上一篇博客中提到的反编译”马蜂窝自由行”app。
今天看到下方这段效果不错，决定实现出来。

从Gif中我们看出这个其实就是一个照片墙加上一个图片滑动。在查看图片时还有个放大缩小、下载、分享等操作。

这些暂时还没有实现。

*一、瀑布流照片墙*

参考 [Android瀑布流照片墙实现，体验不规则排列的美感] (http://blog.csdn.net/sziicool/article/details/18728071)
这篇文章。
我使用了 MultiColumnListView 这个开源方式实现，
项目地址：https://github.com/GDG-Korea/PinterestLikeAdapterView
界面具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" >

  <RelativeLayout  android:id="@+id/ll_photos_top" android:layout_width="fill_parent" android:layout_height="48dp" android:background="@color/bright_foreground_material_dark" />  

    <me.maxwin.view.XListView  android:layout_below="@+id/ll_photos_top" android:id="@+id/mywaterfallView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginLeft="4.0dip" android:layout_marginRight="4.0dip" android:paddingBottom="8.0dip" />

</RelativeLayout>

这个XListView 继承了MultiColumnListView，并且它也是自带了下拉和上滑更新组件。

itemWidth = ((ScreenUtilManager.getScreenWidth(ctx) - 2 *          ScreenUtilManager.dip2px(ctx,4.0F)) / 2);
        mywaterfallView=(XListView)findViewById(R.id.mywaterfallView);
        mywaterfallView.setColumnNum(2);
        mywaterfallView.setPullRefreshEnable(false);
        mywaterfallView.setPullLoadEnable(true);
        mAdapter=new  MyphotosAdapter();
        mywaterfallView.setAdapter(mAdapter);

mAdapter代码如下

class MyphotosAdapter extends BaseAdapter{



        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return photosList.size();
        }

        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return photosList.get(arg0);
        }

        @Override
        public long getItemId(int arg0) {
            // TODO Auto-generated method stub
            return arg0;
        }

        @Override
        public View getView(final int arg0, View convertView, ViewGroup arg2) {
            // TODO Auto-generated method stub
            ViewHolder holder = null;
            if (convertView == null) {
                convertView = LayoutInflater.from(ctx).inflate(R.layout.warterfall_item_layout, null);
                holder = new ViewHolder();
                holder.webImageView = (WebImageView)convertView.findViewById(R.id.photoItemImage);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder)convertView.getTag();
            }
            PhotosBean pBean=photosList.get(arg0);

            float f = Float.valueOf(pBean.getWidth()).floatValue() / pBean.getHeight();
            int i = (int)(itemWidth / f);
            convertView.setLayoutParams(new PLA_AbsListView.LayoutParams(itemWidth, i));

            holder.webImageView.setImageUrl(pBean.getImageSmall()); //使用 webimgview显示网络图片
            holder.webImageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View view) {
                    // TODO Auto-generated method stub
                    showBigPopup(arg0);
                }
            });
            return convertView;
        }

    }

    public static class ViewHolder {
        public WebImageView webImageView;
    }

在显示网络图片时仍然使用了上次的webImageView。
上滑更新时:

mywaterfallView.setXListViewListener(new IXListViewListener() {

            @Override
            public void onRefresh() {
                // TODO Auto-generated method stub
                 loadMore();
            }

            @Override
            public void onLoadMore() {
                // TODO Auto-generated method stub
                 loadMore();
            }
        });

访问网络时:

  /** * 下拉加载更多 */
    private void loadMore(){


        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest("http://mapi.mafengwo.cn/mdd/album/10099?device_type=android&app_ver=6.4.4&offset=20&is_square=0&open_udid=10%3A2a%3Ab3%3Aa5%3A80%3A90&oauth_signature=KZJfiWZxGXUbq4%2F14mlZhhYfLMU%3D&screen_height=1920&oauth_signature_method=HMAC-SHA1&oauth_consumer_key=5&oauth_version=1.0&oauth_timestamp=1460701187&column_num=2&oauth_nonce=d112bfc8-1828-47f5-854e-471558df61db&hardware_model=Redmi+Note+3&device_id=10%3A2a%3Ab3%3Aa5%3A80%3A90&sys_ver=5.0.2&o_lng=118.12&o_lat=30.018498&channel_id=XiaoMi&screen_width=1080&oauth_token=0_0969044fd4edf59957f4a39bce9200c6&screen_scale=3.0&mfwsdk_ver=20140507&x_auth_mode=client_auth&app_code=com.mfw.roadbook", null,  
                new Response.Listener<JSONObject>() {  
                    @Override  
                    public void onResponse(JSONObject response) {  
                        try {
                            JSONObject json1=response.getJSONObject("data");
                            JSONArray  jsonArray=json1.getJSONArray("list");
                            for(int i=0;i<jsonArray.length();i++){
                                photosList.add(new PhotosBean(jsonArray.getJSONObject(i)));
                            }

                            sizeall=photosList.size();
                            mAdapter.notifyDataSetChanged();
                            mywaterfallView.stopLoadMore();
                        } catch (Exception e) {
                            // TODO Auto-generated catch block
                            e.printStackTrace();
                        }

                    }  
                }, new Response.ErrorListener() {  
                    @Override  
                    public void onErrorResponse(VolleyError error) {  
                        System.out.println("取数据失败!");
                    }  
                }); 

        mQueue.add(jsonObjectRequest);

    }

这里使用了 Volley 进行操作网络。
重点是在进行排的时候，怎么确定图片没有被压缩，是它是按比例呈现的。这个取图片的接口是我抓”马蜂窝app”的包得来的，这个接口很聪明，返回的数据中有图片的高度和宽度，以及缩略图和大图得地址。这样就可以计算比例，使图片不至于压缩。

先记录到这，下班回家。