android GridView显示相同尺寸图片以及预览功能

项目描述：

GridView加载图片，在程序中控制各个图片尺寸一致，点击图片进行预览，可以滑动切换查看不同的界面，可以手势控制图片缩放，效果图如下：

1.GridView控制每个控件大小一致

GridView中的控件大小在程序中控制，思路就是获取屏幕宽高，减去控件之间的空隙，除以每一行控件的个数，就是控件的宽，可以将控件的高设置与宽一致。

首先获取屏幕宽高

 public static int  screenWidth;//屏幕宽度

 WindowManager windowManager = getWindowManager();

        Display display = windowManager.getDefaultDisplay();
        Point outSize = new Point();

        display.getSize(outSize);

        screenWidth = outSize.x;

在GridView的adapter里动态设置控件宽高

PhotoAndFileActivity.java

  //动态设置GridView图片的宽高,间距是10，每行两列，计算每个图片的宽度，高度与宽度一致
            int width = (PhotoAndFileActivity.screenWidth - (3 * Dp2Px(getActivity(), 10))) / 2;
            //width = px2dip(getActivity(),width);
            AbsListView.LayoutParams param = new AbsListView.LayoutParams(width, width);
            imageView.setLayoutParams(param);

相关代码 PhotoFragment.java：

   private GridView gridView;
   private ArrayList<String> picUrlsList = new ArrayList<String>();//图片地址

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        density = getActivity().getResources().getDisplayMetrics().density;
        //初始数据
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_1.jpg");
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_8.jpg");
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_13.jpg");
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_14.jpg");
        picUrlsList.add("http://www.wallcoo.com/nature/Summer_Fantasy_Landscapes/wallpapers/1680x1050/Summer_Fantasy_landscape_by_photo_manipulation_19315669.jpg");
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_17.jpg");
        picUrlsList.add("http://www.wosoni.com/image50alluploadpic/DownloadImg/2012/04/0105/22812054_18.jpg");
        picUrlsList.add("http://news.mydrivers.com/img/20140218/83a741e3ab4d4ace8bb8b2f7ccafa414_800.jpg");
        picUrlsList.add("http://easyread.ph.126.net/GgDmhV_v92sjOpmACcnhQQ==/7916618959919261388.jpg");
        picUrlsList.add("http://image.tianjimedia.com/uploadImages/2013/010/941N7G5C3V92_1920x1080.jpg");
        View view = inflater.inflate(R.layout.fragment_photos, container, false);
        gridView = (GridView) view.findViewById(R.id.id_gridView);

        imageAdapter = new ImageAdapter(getActivity());
        gridView.setAdapter(imageAdapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent intent = new Intent(getActivity(), PhotosDetailActivity.class);
                Bundle bundle = new Bundle();
                bundle.putInt("position", position);
                intent.putStringArrayListExtra("picUrlsList", picUrlsList);
                intent.putExtras(bundle);
                startActivity(intent);
            }
        });
        ButterKnife.bind(this, view);
        return view;

    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }

    private class ImageAdapter extends BaseAdapter {
        private Context mContext;

        public ImageAdapter(Context context) {
            this.mContext = context;
        }

        @Override
        public int getCount() {
            return picUrlsList.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = LayoutInflater.from(getActivity()).inflate(R.layout.gridview_item, null);
            }
            final ImageView imageView = ViewHolder.get(convertView, R.id.imageview);

            //动态设置GridView图片的宽高,间距是10，每行两列，计算每个图片的宽度，高度与宽度一致
            int width = (PhotoAndFileActivity.screenWidth - (3 * Dp2Px(getActivity(), 10))) / 2;
            //width = px2dip(getActivity(),width);
            AbsListView.LayoutParams param = new AbsListView.LayoutParams(width, width);
            imageView.setLayoutParams(param);

            RequestQueue mRequestQueue = VolleySingleton.getVolleySingleton(mContext).getRequestQueue();
            String picUrl = picUrlsList.get(position);
            if (picUrl == null) {
                picUrl = "";
            }
            ImageRequest imageRequest = new ImageRequest(
                    picUrl,
                    new Response.Listener<Bitmap>() {
                        @Override
                        public void onResponse(Bitmap response) {
                            imageView.setImageBitmap(response);
                        }
                    }, 0, 0, Bitmap.Config.RGB_565, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    imageView.setImageBitmap(null);
                }
            });
            mRequestQueue.add(imageRequest);
            return convertView;
        }

    }

    public static int Dp2Px(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

相关布局：

gridview_item.xml

<?xml version="1.0" encoding="utf-8"?>

<ImageView
    android:id="@+id/imageview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"/>

fragment_photos.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white">

    <GridView
        android:id="@+id/id_gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="10dp"
        android:numColumns="2"
        android:layout_margin="10dp"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp" />

</LinearLayout>

参考文章

2.图片预览与缩放

切换views，使用的是ViewPager，图片的切换，使用的是第三方库：PhotoView,下载地址，

相关代码：

PhotosDetailActivity.java

public class PhotosDetailActivity extends BaseActivity implements TitleLayout.titleLayoutClick{

    @Bind(R.id.id_titleLayot)
    TitleLayout mIdTitleLayot;
    @Bind(R.id.viewPager)
    HackyViewPager mViewPager;
    @Bind(R.id.id_imageViewDelete)
    ImageView mIdImageViewDelete;
    @Bind(R.id.id_imageViewEdit)
    ImageView mIdImageViewEdit;
    public int i_position = 0;
    private ArrayList<String> picUrlsList;//图片网址
    private List<View> viewList;//view数组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photos_detail);
        ButterKnife.bind(this);

        mIdTitleLayot.setLinearLeftImage(R.mipmap.back);

        //通过Intent得到GridView传过来的图片位置
        Intent intent = getIntent();
        i_position = intent.getIntExtra("position", 0);
        picUrlsList = intent.getStringArrayListExtra("picUrlsList");
        mIdTitleLayot.setTitle((i_position + 1) + "/" + picUrlsList.size());

        LayoutInflater inflater = getLayoutInflater();

        viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
        for (int i = 0; i < picUrlsList.size(); i++) {
            //第三方库，支持ImageView缩放
            View view = inflater.inflate(R.layout.photos_detail, null);

            final PhotoView imageView = (PhotoView) view.findViewById(R.id.id_imageViewShow);
            final ImageView imageViewPerson = (ImageView) view.findViewById(R.id.id_imageViewPerson);
            final TextView textViewName = (TextView) view.findViewById(R.id.id_textViewName);
            final TextView textViewDate = (TextView) view.findViewById(R.id.id_textViewDate);
            final TextView textViewDetail = (TextView) view.findViewById(R.id.id_textViewDetail);

            RequestQueue mRequestQueue = VolleySingleton.getVolleySingleton(PhotosDetailActivity.this).getRequestQueue();

            ImageRequest imageRequest = new ImageRequest(
                    "http://hiphotos.baidu.com/wisegame/pic/item/29ed2e738bd4b31c1839b19686d6277f9e2ff892.jpg",
                    new Response.Listener<Bitmap>() {
                        @Override
                        public void onResponse(Bitmap response) {
                            imageViewPerson.setImageBitmap(response);
                        }
                    }, 0, 0, Bitmap.Config.RGB_565, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    imageViewPerson.setImageBitmap(null);
                }
            });
            mRequestQueue.add(imageRequest);
            textViewName.setText("李工" + i);
            textViewDate.setText("2016-04-21 14:09:30");
            textViewDetail.setText("详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情");

            ImageRequest imageRequest2 = new ImageRequest(
                    picUrlsList.get(i),
                    new Response.Listener<Bitmap>() {
                        @Override
                        public void onResponse(Bitmap response) {
                            imageView.setImageBitmap(response);
                        }
                    }, 0, 0, Bitmap.Config.RGB_565, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    imageView.setImageBitmap(null);
                }
            });
            mRequestQueue.add(imageRequest2);

            viewList.add(view);
        }

        PagerAdapter pagerAdapter = new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0 == arg1;
            }

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

            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                // TODO Auto-generated method stub
                container.removeView(viewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                // TODO Auto-generated method stub

                container.addView(viewList.get(position));

                return viewList.get(position);
            }
        };
        mViewPager.setAdapter(pagerAdapter);
        mViewPager.setCurrentItem(i_position);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mIdTitleLayot.setTitle((position + 1) + "/" + picUrlsList.size());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void leftViewClick() {
        finish();
    }

    @Override
    public void rightViewClick() {

    }
}

其中BaseActivity .java与TitleLayout的接口之类的，与本功能不相干，可以不考虑

布局文件：

activity_photos_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context="boerpower.com.electricmanager.Activities.PhotoDetailActivity">

    <boerpower.com.electricmanager.Tools.TitleLayout
        android:id="@+id/id_titleLayot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <boerpower.com.electricmanager.Activities.ProjectDetail.HackyViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#efeff4">

        <ImageView
            android:id="@+id/id_imageViewDelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="10dp"
            android:src="@mipmap/photo_delete"/>

        <ImageView
            android:id="@+id/id_imageViewEdit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:src="@mipmap/photo_edit"/>
    </RelativeLayout>
</LinearLayout>

photos_detail.xml

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

    <uk.co.senab.photoview.PhotoView
        android:id="@+id/id_imageViewShow"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:scaleType="fitXY"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/id_imageViewPerson"
            android:layout_width="53dp"
            android:layout_height="53dp"
            android:layout_marginRight="10dp"/>

        <TextView
            android:id="@+id/id_textViewName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:textColor="@color/black"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/id_textViewDate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="#898989"
            android:textSize="12sp"/>
    </LinearLayout>

    <TextView
        android:id="@+id/id_textViewDetail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:ellipsize="end"
        android:maxLines="3"/>

</LinearLayout>

其中HackyViewPager.java是继承了ViewPager类，主要是因为，在 PhotoView + ViewPager出现 ArrayIndexOutOfBoundsException，参考解决方法解决方法

HackyViewPager.java

/**
 * Created by Administrator on 2016/5/5 0005.
 * 配合PhotoView第三方库使用，防止出现崩溃
 */
public class HackyViewPager extends ViewPager {

    public HackyViewPager(Context context)
    {
        super(context);
    }

    public HackyViewPager(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev)
    {
        try
        {
            return super.onInterceptTouchEvent(ev);
        }
        catch (IllegalArgumentException e)
        {
        }
        catch (ArrayIndexOutOfBoundsException e)
        {

        }
        return false;
    }
}

访问网络图片使用的Volley

先写这些

时间： 2024-12-06 11:33:30

android GridView显示相同尺寸图片以及预览功能的相关文章

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import 

Android 使用Gallery组件实现图片播放预览

Gallery(画廊)扩展了LayoutParams,以此提供可以容纳当前的转换信息和先前的位置转换信息的场所. Activity package com.app.test01; import com.app.adapter.ImageAdapter; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import

仿淘宝京东商品图片放大预览功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片放大镜效果</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; position: relative; } .goods { width: 220px; height: 200px; position

VBA 图形里面加载指定图片 实现预览功能

With ActiveSheet.Shapes.AddPicture(path, msoTrue, msoTrue, Px + 30, Py - 180, 120, 100) .Name = "Picture" With .ForeColor .Type = 2 End With '.BackgroundStyle = 5 With .PictureFormat ' .CropLeft = 100 '.TransparencyColor = "0,0,0" '.Tr

Android 实例讲解自定义Camera拍照和预览以及前后置摄像头切换

上一篇博文讲解了怎么去调用本地图片和调用系统拍照图片(http://blog.csdn.net/a123demi/article/details/40003695)的功能. 而本博文将通过实例实现自定义Camera的功效.具体功能如下: 1.实现自定义Camera拍照: 2.实现前后置摄像头的切换: 3.实现Camera拍照后图片缩小显示以及正常预览: 4.实现Camera拍照后图片保存: 在具体实现代码之前,我们先来了解一下Android api对实现自定义Camera的介绍. 根据api的介

调用相机，选择图片上传，带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

iOS UIPickerController 调用相机，选择图片上传，带预览功能

在.h中加入delegate @interface ViewController : UIViewController<UIActionSheetDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate> //实现按钮事件 -(IBAction)chooseImage:(id)sender { UIActionSheet *sheet; <p> // 判断是否支持相机 </p> if(