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”的包得来的，这个接口很聪明，返回的数据中有图片的高度和宽度，以及缩略图和大图得地址。这样就可以计算比例，使图片不至于压缩。

先记录到这，下班回家。

一、瀑布流照片墙

更多相关文章

随机推荐

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

*一、瀑布流照片墙*

更多相关文章

随机推荐

一、瀑布流照片墙