[Android] 通过GridView仿微信动态添加本地图片

   
前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲!

一. 实现效果

   
主要是通过点击+从本地相册中添加图片,同时显示图片至GridView.点击图片可以进行删除操作,同时界面中的发布EditView控件也很好看,不足之处在于+好没有移动至最后,但原理相同.

      

二. 项目工程结构

三. 界面布局详细代码

    1.主界面activity_main.xml

    主要通过相对布局实现,第一部分是底部的TextView,中间是EditView和GridView相对布局,下面是两个按钮.同时EditView调用res/drawable-hdpi中的editview_shape.xml,GridView显示的每张图片通过griditem_addpic.xml实现.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.suishoupaipublish.MainActivity"
    tools:ignore="MergeRootFrame" >

	<!-- 顶部添加文字 -->
    <RelativeLayout
        android:id="@+id/Layout_top"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_marginTop="5dp"
        android:layout_alignParentTop="true"
        android:gravity="center">
	    <TextView
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:textSize="25sp"
		    android:gravity="center"
		    android:text="发布信息" />
	</RelativeLayout>
	<!-- 底部按钮 -->
    <RelativeLayout
        android:id="@+id/Layout_bottom"
        android:layout_alignParentBottom="true"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:gravity="center" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:textSize="20sp"
            android:text="发布拍拍" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_toRightOf="@+id/button1"
            android:textSize="20sp"
            android:text="取消发布" />
    </RelativeLayout>
    <!-- 显示图片 -->
    <RelativeLayout
        android:id="@+id/Content_Layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/Layout_bottom"
        android:layout_below="@id/Layout_top"
        android:gravity="center">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_alignParentBottom="true" >
            <!-- 设置运行多行 设置圆角图形 黑色字体-->
		    <EditText
		        android:id="@+id/editText1"
		        android:layout_height="120dp"
		        android:layout_width="fill_parent"
		        android:textColor="#000000"
		        android:layout_margin="12dp"
		        android:textSize="20sp"
		        android:hint="随手说出你此刻的心声..."
		        android:maxLength="500"
		        android:singleLine="false"
		        android:background="@drawable/editview_shape" />
            <!-- 网格显示图片 行列间距5dp 每列宽度90dp -->
		    <GridView
		        android:id="@+id/gridView1"
		        android:layout_width="fill_parent"
		        android:layout_height="200dp"
		        android:layout_margin="10dp"
		        android:background="#EFDFDF"
		        android:horizontalSpacing="5dp"
		        android:verticalSpacing="5dp"
		        android:numColumns="4"
		        android:columnWidth="90dp"
		        android:stretchMode="columnWidth"
		        android:gravity="center" >
		    </GridView>
		    <TextView
		        android:layout_width="fill_parent"
		        android:layout_height="wrap_content"
		        android:text="(友情提示:只能添加9张图片,长按图片可以删除已添加图片)"
		        android:gravity="center" />
	    </LinearLayout>
	</RelativeLayout>

</RelativeLayout>

    2.显示ImageView图片布局griditem_addpic.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:gravity="center"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical" >
    <RelativeLayout
        android:layout_gravity="center"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:orientation="vertical" >
        <ImageView
	  		android:layout_marginTop="10dp"
	  		android:layout_marginRight="10dp"
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:scaleType="fitXY"
            android:src="@drawable/gridview_addpic" />
    </RelativeLayout>
</LinearLayout>

    3.设置EditView控件圆角和颜色 editview_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:padding="10dp">
	<!-- 填充editView的颜色 -->
  	<soild android:color="#ffffff"/>
  	<!-- 设置圆角的弧度，radius半径越大，editView的边角越圆 -->
   	<corners
   	    android:radius="15dp"
   	    android:bottomRightRadius="15dp"
   	    android:bottomLeftRadius="15dp"
   	    android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
   	<stroke
   	    android:color="#32CD32"
        android:width="4px" />
</shape>

四. 代码详解

   
它主要是思想如下:

1.通过SimpleAdapter适配器实现实现加载图片,在gridView1.setOnItemClickListener()点击函数中响应不同操作.

2.当点击加号图片(+)时,调用本地相册通过Intent实现获取图片路径存于字符串pathImage.

3.获取图片路径后在onResume中刷新图片,通过GridView的setAdapter()和notifyDataSetChanged()()函数刷新加载图片.

4.点击图片时会获取其position,通过dialog()函数弹出对话框提示是否删除,通过remove实现删除.

具体代码如下所示：

public class MainActivity extends Activity {

	private GridView gridView1;              //网格显示缩略图
	private Button buttonPublish;            //发布按钮
	private final int IMAGE_OPEN = 1;        //打开图片标记
	private String pathImage;                //选择图片路径
	private Bitmap bmp;                      //导入临时图片
	private ArrayList<HashMap<String, Object>> imageItem;
	private SimpleAdapter simpleAdapter;     //适配器

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*
         * 防止键盘挡住输入框
         * 不希望遮挡设置activity属性 android:windowSoftInputMode="adjustPan"
         * 希望动态调整高度 android:windowSoftInputMode="adjustResize"
         */
        getWindow().setSoftInputMode(WindowManager.LayoutParams.
        		SOFT_INPUT_ADJUST_PAN);
        //锁定屏幕
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        setContentView(R.layout.activity_main);
        //获取控件对象
        gridView1 = (GridView) findViewById(R.id.gridView1);

        /*
         * 载入默认图片添加图片加号
         * 通过适配器实现
         * SimpleAdapter参数imageItem为数据源 R.layout.griditem_addpic为布局
         */
        //获取资源图片加号
        bmp = BitmapFactory.decodeResource(getResources(), R.drawable.gridview_addpic);
        imageItem = new ArrayList<HashMap<String, Object>>();
        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("itemImage", bmp);
        imageItem.add(map);
        simpleAdapter = new SimpleAdapter(this,
        		imageItem, R.layout.griditem_addpic,
                new String[] { "itemImage"}, new int[] { R.id.imageView1});
        /*
         * HashMap载入bmp图片在GridView中不显示,但是如果载入资源ID能显示 如
         * map.put("itemImage", R.drawable.img);
         * 解决方法:
         *              1.自定义继承BaseAdapter实现
         *              2.ViewBinder()接口实现
         *  参考 http://blog.csdn.net/admin_/article/details/7257901
         */
        simpleAdapter.setViewBinder(new ViewBinder() {
		    @Override
		    public boolean setViewValue(View view, Object data,
		            String textRepresentation) {
		        // TODO Auto-generated method stub
		        if(view instanceof ImageView && data instanceof Bitmap){
		            ImageView i = (ImageView)view;
		            i.setImageBitmap((Bitmap) data);
		            return true;
		        }
		        return false;
		    }
        });
        gridView1.setAdapter(simpleAdapter);

        /*
         * 监听GridView点击事件
         * 报错:该函数必须抽象方法 故需要手动导入import android.view.View;
         */
        gridView1.setOnItemClickListener(new OnItemClickListener() {
  			@Override
			public void onItemClick(AdapterView<?> parent, View v, int position, long id)
			{
  				if( imageItem.size() == 10) { //第一张为默认图片
  					Toast.makeText(MainActivity.this, "图片数9张已满", Toast.LENGTH_SHORT).show();
  				}
  				else if(position == 0) { //点击图片位置为+ 0对应0张图片
  					Toast.makeText(MainActivity.this, "添加图片", Toast.LENGTH_SHORT).show();
  					//选择图片
  					Intent intent = new Intent(Intent.ACTION_PICK,
  	                        android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
  	                startActivityForResult(intent, IMAGE_OPEN);
  	                //通过onResume()刷新数据
  				}
  				else {
  					dialog(position);
  					//Toast.makeText(MainActivity.this, "点击第"+(position + 1)+" 号图片",
  					//		Toast.LENGTH_SHORT).show();
  				}
			}
  		});
    }

    //获取图片路径 响应startActivityForResult
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //打开图片
        if(resultCode==RESULT_OK && requestCode==IMAGE_OPEN) {
            Uri uri = data.getData();
            if (!TextUtils.isEmpty(uri.getAuthority())) {
                //查询选择图片
                Cursor cursor = getContentResolver().query(
                        uri,
                        new String[] { MediaStore.Images.Media.DATA },
                        null,
                        null,
                        null);
                //返回 没找到选择图片
                if (null == cursor) {
                    return;
                }
                //光标移动至开头 获取图片路径
                cursor.moveToFirst();
                pathImage = cursor.getString(cursor
                        .getColumnIndex(MediaStore.Images.Media.DATA));
            }
        }  //end if 打开图片
    }

    //刷新图片
    @Override
	protected void onResume() {
		super.onResume();
		if(!TextUtils.isEmpty(pathImage)){
			Bitmap addbmp=BitmapFactory.decodeFile(pathImage);
			HashMap<String, Object> map = new HashMap<String, Object>();
	        map.put("itemImage", addbmp);
	        imageItem.add(map);
	        simpleAdapter = new SimpleAdapter(this,
	        		imageItem, R.layout.griditem_addpic,
	                new String[] { "itemImage"}, new int[] { R.id.imageView1});
	        simpleAdapter.setViewBinder(new ViewBinder() {
			    @Override
			    public boolean setViewValue(View view, Object data,
			            String textRepresentation) {
			        // TODO Auto-generated method stub
			        if(view instanceof ImageView && data instanceof Bitmap){
			            ImageView i = (ImageView)view;
			            i.setImageBitmap((Bitmap) data);
			            return true;
			        }
			        return false;
			    }
	        });
	        gridView1.setAdapter(simpleAdapter);
	        simpleAdapter.notifyDataSetChanged();
			//刷新后释放防止手机休眠后自动添加
	        pathImage = null;
		}
	}

    /*
     * Dialog对话框提示用户删除操作
     * position为删除图片位置
     */
    protected void dialog(final int position) {
    	AlertDialog.Builder builder = new Builder(MainActivity.this);
    	builder.setMessage("确认移除已添加图片吗？");
    	builder.setTitle("提示");
    	builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {
    		@Override
    		public void onClick(DialogInterface dialog, int which) {
    			dialog.dismiss();
    			imageItem.remove(position);
    	        simpleAdapter.notifyDataSetChanged();
    		}
    	});
    	builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
    		@Override
    		public void onClick(DialogInterface dialog, int which) {
    			dialog.dismiss();
    			}
    		});
    	builder.create().show();
    }

}

    同时需要在AndroidMainfest.xml中添加权限操作SD卡和网络上传至服务器.

<!-- 申明网络权限  -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 申明权限 操作SD卡 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

五. 总结

    

   
该文章需要注意一个地方：在使用SimpleAdapter适配器加载bmp图片时,可能在GridView中不显示.即HashMap中map.put("itemImage",bmp)不显示图片,而使用put装入R.drawable.img却能显示.

这时有两种解决方法,一种是自定义继承BaseAdapter的适配器实现;另一种方法则是如上所示通过ViewBinder()接口实现,感谢博主dmin_提供的方法.

下载地址:

最后希望文章对大家有所帮助,如果有错误或不足之处,请海涵~最近学校网比较差,回复别人都不行.

(By:Eastmount 2014-12-8 晚9点 http://blog.csdn.net/eastmount/)

时间： 2024-08-07 17:01:17

[Android] 通过GridView仿微信动态添加本地图片的相关文章

Android 实例讲解添加本地图片和调用系统拍照图片

在项目的开发过程我们离不开图片,而有时候需要调用本地的图片,有时候需要调用拍照图片.同时实现拍照的方法有两种,一种是调用系统拍照功能,另一种是自定义拍照功能.而本博文目前只讲解第一种方法,第二种方法后期在加以讲解. 添加本地图片和调用系统拍照图片主要是通过调用acitivity跳转startActivityForResult(Intent intent, int requestCode)方法和activity返回结果onActivityResult(int requestCode, int re

仿微信朋友圈发图片

仿微信朋友圈发图片 下载地址:http://www.devstore.cn/code/info/934.html 运行截图:    

ANDROID GRIDVIEW仿微信图片多选功能_显示本地相册图片多选效果

前段时间我分享过一个多图选择器实现了批示图片选择的问题.可以不会把系统的图库 一张一张的选择要上传的图片 http://dwtedx.com/itshare_171.html 那么今天再和大家分享一个非常棒的源代码.实现仿微信的图片选择功能(多图选择哦) 话不多说.有图有真像.先上图片 本例子主要实现了以下功能点 1.默认显示图片最多的文件夹图片.以及底部显示图片总数量 2.点击底部.弹出popupWindow.popupWindow包含所有含有图片的文件夹.以及显示每个文件夹中图片数量 3.选

android之使用GridView+仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.co

android 在 ListView 的 item 中插入 GridView 仿微信朋友圈图片显示。

转载请声明出处(http://www.cnblogs.com/linguanh/) 先上张效果图: 1,思路简述 这个肯定是要重写 baseAdapter的了,这里我分了两个数据适配器,一个是自定义的 listView的item 风格xml,另一个是该风格xml文件里面的嵌套的GridView数据适配.然后我们需要两个数据辅助类,类似上述,一个是专门来保存在GridView中要显示的每张图片的信息,例如它的url.name.id等等,暂称该辅助类为 UserImgs,大家可以随便增删,另一个是总

Android：NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只有1张图时,可以自己定制图片宽高,也可以使用默认九宫格的宽高: 2.当只有4张图时,以2*2的方式显示: 3.除以上两种情况下,都是按照3列方式显示,但这时有一些细节: a.如果只有9张图,当然是以3*3的方式显示: b.如果超过9张图,可以设置是否全部显示. 如果设置不完全显示,则按照3*3的方式

iOS/Android 浏览器(h5)及微信中唤起本地APP

在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: 如何解决未安装APP时的做好引导页 如何在微信中唤醒APP 在iOS9中如何处理universal link被用户误关的情况 如何解决Android各种机型.各种第三方浏览器导致的兼容问题等 在APP未安装情况下,引导用户下载后打开APP后,如何进入之前唤起时指定的页面或内容,即如何实现场景还原 在

android webview与js交互(动态添加js)

1.本地html与本地html里的js交互 2.本地html与本地js交互 3.网络html与网络js交互 4.网络html与本地js交互 5.各个情况动态添加js 以上5点都可以用一种方式来模拟,在本篇中采用本地html与本地js交互 (包含动态添加js的操作) 6.拦截url请求(在webview加载完成以后,触发的请求url) 7.拦截url请求后返回自己封装的数据(基于第6点,加载完成后,触发一些请求数据的url时拦截并自己封装数据返回给webview) 注:6.7点将在下一篇博客介绍

Android利用ViewPager仿微信主界面-android学习之旅(78)

首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组 效果图如下 部分代码如下,实现如下的方法 mPagerAdapter = new PagerAdapter(){ @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View view, Object o