android GridView显示相同尺寸图片以及预览功能
2016-05-06 16:18
501 查看
项目描述:
GridView加载图片,在程序中控制各个图片尺寸一致,点击图片进行预览,可以滑动切换查看不同的界面,可以手势控制图片缩放,效果图如下:
1.GridView控制每个控件大小一致
GridView中的控件大小在程序中控制,思路就是获取屏幕宽高,减去控件之间的空隙,除以每一行控件的个数,就是控件的宽,可以将控件的高设置与宽一致。
首先获取屏幕宽高
在GridView的adapter里动态设置控件宽高
PhotoAndFileActivity.java
相关代码 PhotoFragment.java:
相关布局:
gridview_item.xml
fragment_photos.xml
参考文章
2.图片预览与缩放
切换views,使用的是ViewPager,图片的切换,使用的是第三方库:PhotoView,下载地址,
相关代码:
PhotosDetailActivity.java
其中BaseActivity .java与TitleLayout的接口之类的,与本功能不相干,可以不考虑
布局文件:
activity_photos_detail.xml
photos_detail.xml
其中HackyViewPager.java是继承了ViewPager类,主要是因为,在 PhotoView + ViewPager出现 ArrayIndexOutOfBoundsException,参考解决方法解决方法
HackyViewPager.java
访问网络图片使用的Volley
先写这些
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
先写这些
相关文章推荐
- Android自定义视图三:给自定义视图添加“流畅”的动画
- android文件的权限和特殊权限
- Android studio显示行号
- Android自定义视图三:给自定义视图添加“流畅”的动画
- android开发:全屏和退出全屏
- 《Android应用性能优化》3——电量、渲染
- 《Android应用性能优化》2——内存、CPU、性能测评
- 《Android应用性能优化》1——代码
- 【转】 Android SDK无法更新解决方法---不错
- Android中3种全屏方法及3种去掉标题栏的方法
- android 单元测试
- Android 6.0 运行时权限处理
- android studio 右边没有错误、警告提示怎么办!???
- android 多媒体和相机详解九
- android实现文件上传功能
- Android 超简单自动无限轮播图LoopView
- Android——Serializable & Parcelable
- Android.mk文件详解
- Android字符串相关类 - StringBuffer
- Android字符串相关类 - StringBuffer