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

Posted 2022-12-09 一个会玩SF的男人

继续上一篇博客中提到的反编译”马蜂窝自由行”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”的包得来的，这个接口很聪明，返回的数据中有图片的高度和宽度，以及缩略图和大图得地址。这样就可以计算比例，使图片不至于压缩。

先记录到这，下班回家。