zoukankan      html  css  js  c++  java

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

    原文：http://blog.csdn.net/eastmount/article/details/41808179

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

    一. 实现效果

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

    二. 项目工程结构

     

     

    三. 界面布局详细代码

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

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:id="@+id/container"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent"  
    6.     tools:context="com.example.suishoupaipublish.MainActivity"  
    7.     tools:ignore="MergeRootFrame" >  
    8.       
    9.     <!-- 顶部添加文字 -->   
    10.     <RelativeLayout    
    11.         android:id="@+id/Layout_top"    
    12.         android:orientation="horizontal"     
    13.         android:layout_width="fill_parent"    
    14.         android:layout_height="40dp"    
    15.         android:layout_marginTop="5dp"  
    16.         android:layout_alignParentTop="true"    
    17.         android:gravity="center">    
    18.         <TextView    
    19.             android:layout_width="fill_parent"     
    20.             android:layout_height="wrap_content"      
    21.             android:textSize="25sp"  
    22.             android:gravity="center"  
    23.             android:text="发布信息" />   
    24.     </RelativeLayout>    
    25.     <!-- 底部按钮 -->    
    26.     <RelativeLayout    
    27.         android:id="@+id/Layout_bottom"     
    28.         android:layout_alignParentBottom="true"  
    29.         android:layout_width="fill_parent"     
    30.         android:layout_height="50dp"  
    31.         android:gravity="center" >    
    32.         <Button    
    33.             android:id="@+id/button1"    
    34.             android:layout_width="wrap_content"    
    35.             android:layout_height="fill_parent"  
    36.             android:textSize="20sp"  
    37.             android:text="发布拍拍" />    
    38.         <Button    
    39.             android:id="@+id/button2"    
    40.             android:layout_width="wrap_content"    
    41.             android:layout_height="fill_parent"  
    42.             android:layout_toRightOf="@+id/button1"  
    43.             android:textSize="20sp"  
    44.             android:text="取消发布" />  
    45.     </RelativeLayout>    
    46.     <!-- 显示图片 -->    
    47.     <RelativeLayout    
    48.         android:id="@+id/Content_Layout"       
    49.         android:layout_width="fill_parent"     
    50.         android:layout_height="fill_parent"    
    51.         android:layout_above="@id/Layout_bottom"     
    52.         android:layout_below="@id/Layout_top"      
    53.         android:gravity="center">       
    54.         <LinearLayout     
    55.             android:layout_width="match_parent"    
    56.             android:layout_height="match_parent"    
    57.             android:orientation="vertical"  
    58.             android:layout_alignParentBottom="true" >   
    59.             <!-- 设置运行多行 设置圆角图形 黑色字体-->  
    60.             <EditText   
    61.                 android:id="@+id/editText1"  
    62.                 android:layout_height="120dp"  
    63.                 android:layout_width="fill_parent"  
    64.                 android:textColor="#000000"  
    65.                 android:layout_margin="12dp"  
    66.                 android:textSize="20sp"  
    67.                 android:hint="随手说出你此刻的心声..."  
    68.                 android:maxLength="500"  
    69.                 android:singleLine="false"  
    70.                 android:background="@drawable/editview_shape" />  
    71.             <!-- 网格显示图片 行列间距5dp 每列宽度90dp -->  
    72.             <GridView  
    73.                 android:id="@+id/gridView1"  
    74.                 android:layout_width="fill_parent"  
    75.                 android:layout_height="200dp"  
    76.                 android:layout_margin="10dp"  
    77.                 android:background="#EFDFDF"  
    78.                 android:horizontalSpacing="5dp"  
    79.                 android:verticalSpacing="5dp"  
    80.                 android:numColumns="4"  
    81.                 android:columnWidth="90dp"  
    82.                 android:stretchMode="columnWidth"  
    83.                 android:gravity="center" >  
    84.             </GridView>  
    85.             <TextView   
    86.                 android:layout_width="fill_parent"  
    87.                 android:layout_height="wrap_content"  
    88.                 android:text="(友情提示:只能添加9张图片,长按图片可以删除已添加图片)"  
    89.                 android:gravity="center" />  
    90.         </LinearLayout>  
    91.     </RelativeLayout>  
    92.       
    93. </RelativeLayout>  
        2.显示ImageView图片布局griditem_addpic.xml
    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     android:gravity="center"  
    6.     android:descendantFocusability="blocksDescendants"  
    7.     android:orientation="vertical" >  
    8.     <RelativeLayout  
    9.         android:layout_gravity="center"  
    10.         android:layout_width="80dp"  
    11.         android:layout_height="80dp"  
    12.         android:orientation="vertical" >  
    13.         <ImageView  
    14.             android:layout_marginTop="10dp"  
    15.             android:layout_marginRight="10dp"  
    16.             android:id="@+id/imageView1"  
    17.             android:layout_width="fill_parent"  
    18.             android:layout_height="fill_parent"  
    19.             android:scaleType="fitXY"  
    20.             android:src="@drawable/gridview_addpic" />  
    21.     </RelativeLayout>  
    22. </LinearLayout>  
        3.设置EditView控件圆角和颜色 editview_shape.xml
    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
    3.     android:shape="rectangle"   
    4.     android:padding="10dp">  
    5.     <!-- 填充editView的颜色 -->  
    6.     <soild android:color="#ffffff"/>  
    7.     <!-- 设置圆角的弧度，radius半径越大，editView的边角越圆 -->  
    8.     <corners   
    9.         android:radius="15dp"  
    10.         android:bottomRightRadius="15dp"  
    11.         android:bottomLeftRadius="15dp"  
    12.         android:topLeftRadius="15dp"    
    13.         android:topRightRadius="15dp"/>  
    14.     <stroke  
    15.         android:color="#32CD32"    
    16.         android:width="4px" />   
    17. </shape>  

    四. 代码详解

     
        它主要是思想如下:
        1.通过SimpleAdapter适配器实现实现加载图片,在gridView1.setOnItemClickListener()点击函数中响应不同操作.
        2.当点击加号图片(+)时,调用本地相册通过Intent实现获取图片路径存于字符串pathImage.
        3.获取图片路径后在onResume中刷新图片,通过GridView的setAdapter()和notifyDataSetChanged()()函数刷新加载图片.
        4.点击图片时会获取其position,通过dialog()函数弹出对话框提示是否删除,通过remove实现删除.
        具体代码如下所示：
    [java] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. public class MainActivity extends Activity {  
    2.   
    3.     private GridView gridView1;              //网格显示缩略图  
    4.     private Button buttonPublish;            //发布按钮  
    5.     private final int IMAGE_OPEN = 1;        //打开图片标记  
    6.     private String pathImage;                //选择图片路径  
    7.     private Bitmap bmp;                      //导入临时图片  
    8.     private ArrayList<HashMap<String, Object>> imageItem;  
    9.     private SimpleAdapter simpleAdapter;     //适配器  
    10.       
    11.     @Override  
    12.     protected void onCreate(Bundle savedInstanceState) {  
    13.         super.onCreate(savedInstanceState);  
    14.         setContentView(R.layout.activity_main);  
    15.         /* 
    16.          * 防止键盘挡住输入框 
    17.          * 不希望遮挡设置activity属性 android:windowSoftInputMode="adjustPan" 
    18.          * 希望动态调整高度 android:windowSoftInputMode="adjustResize" 
    19.          */  
    20.         getWindow().setSoftInputMode(WindowManager.LayoutParams.  
    21.                 SOFT_INPUT_ADJUST_PAN);  
    22.         //锁定屏幕  
    23.         setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);  
    24.         setContentView(R.layout.activity_main);  
    25.         //获取控件对象  
    26.         gridView1 = (GridView) findViewById(R.id.gridView1);  
    27.   
    28.         /* 
    29.          * 载入默认图片添加图片加号 
    30.          * 通过适配器实现 
    31.          * SimpleAdapter参数imageItem为数据源 R.layout.griditem_addpic为布局 
    32.          */  
    33.         //获取资源图片加号  
    34.         bmp = BitmapFactory.decodeResource(getResources(), R.drawable.gridview_addpic);  
    35.         imageItem = new ArrayList<HashMap<String, Object>>();  
    36.         HashMap<String, Object> map = new HashMap<String, Object>();  
    37.         map.put("itemImage", bmp);  
    38.         imageItem.add(map);  
    39.         simpleAdapter = new SimpleAdapter(this,   
    40.                 imageItem, R.layout.griditem_addpic,   
    41.                 new String[] { "itemImage"}, new int[] { R.id.imageView1});   
    42.         /* 
    43.          * HashMap载入bmp图片在GridView中不显示,但是如果载入资源ID能显示 如 
    44.          * map.put("itemImage", R.drawable.img); 
    45.          * 解决方法: 
    46.          *              1.自定义继承BaseAdapter实现 
    47.          *              2.ViewBinder()接口实现 
    48.          *  参考 http://blog.csdn.net/admin_/article/details/7257901 
    49.          */  
    50.         simpleAdapter.setViewBinder(new ViewBinder() {    
    51.             @Override    
    52.             public boolean setViewValue(View view, Object data,    
    53.                     String textRepresentation) {    
    54.                 // TODO Auto-generated method stub    
    55.                 if(view instanceof ImageView && data instanceof Bitmap){    
    56.                     ImageView i = (ImageView)view;    
    57.                     i.setImageBitmap((Bitmap) data);    
    58.                     return true;    
    59.                 }    
    60.                 return false;    
    61.             }  
    62.         });    
    63.         gridView1.setAdapter(simpleAdapter);  
    64.           
    65.         /* 
    66.          * 监听GridView点击事件 
    67.          * 报错:该函数必须抽象方法 故需要手动导入import android.view.View; 
    68.          */  
    69.         gridView1.setOnItemClickListener(new OnItemClickListener() {  
    70.             @Override  
    71.             public void onItemClick(AdapterView<?> parent, View v, int position, long id)  
    72.             {  
    73.                 if( imageItem.size() == 10) { //第一张为默认图片  
    74.                     Toast.makeText(MainActivity.this, "图片数9张已满", Toast.LENGTH_SHORT).show();  
    75.                 }  
    76.                 else if(position == 0) { //点击图片位置为+ 0对应0张图片  
    77.                     Toast.makeText(MainActivity.this, "添加图片", Toast.LENGTH_SHORT).show();  
    78.                     //选择图片  
    79.                     Intent intent = new Intent(Intent.ACTION_PICK,         
    80.                             android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);    
    81.                     startActivityForResult(intent, IMAGE_OPEN);    
    82.                     //通过onResume()刷新数据  
    83.                 }  
    84.                 else {  
    85.                     dialog(position);  
    86.                     //Toast.makeText(MainActivity.this, "点击第"+(position + 1)+" 号图片",   
    87.                     //      Toast.LENGTH_SHORT).show();  
    88.                 }  
    89.             }  
    90.         });    
    91.     }  
    92.       
    93.     //获取图片路径 响应startActivityForResult    
    94.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {    
    95.         super.onActivityResult(requestCode, resultCode, data);          
    96.         //打开图片    
    97.         if(resultCode==RESULT_OK && requestCode==IMAGE_OPEN) {          
    98.             Uri uri = data.getData();    
    99.             if (!TextUtils.isEmpty(uri.getAuthority())) {    
    100.                 //查询选择图片    
    101.                 Cursor cursor = getContentResolver().query(    
    102.                         uri,    
    103.                         new String[] { MediaStore.Images.Media.DATA },    
    104.                         null,     
    105.                         null,     
    106.                         null);    
    107.                 //返回 没找到选择图片    
    108.                 if (null == cursor) {    
    109.                     return;    
    110.                 }    
    111.                 //光标移动至开头 获取图片路径    
    112.                 cursor.moveToFirst();    
    113.                 pathImage = cursor.getString(cursor    
    114.                         .getColumnIndex(MediaStore.Images.Media.DATA));    
    115.             }  
    116.         }  //end if 打开图片  
    117.     }  
    118.       
    119.     //刷新图片  
    120.     @Override  
    121.     protected void onResume() {  
    122.         super.onResume();  
    123.         if(!TextUtils.isEmpty(pathImage)){  
    124.             Bitmap addbmp=BitmapFactory.decodeFile(pathImage);  
    125.             HashMap<String, Object> map = new HashMap<String, Object>();  
    126.             map.put("itemImage", addbmp);  
    127.             imageItem.add(map);  
    128.             simpleAdapter = new SimpleAdapter(this,   
    129.                     imageItem, R.layout.griditem_addpic,   
    130.                     new String[] { "itemImage"}, new int[] { R.id.imageView1});   
    131.             simpleAdapter.setViewBinder(new ViewBinder() {    
    132.                 @Override    
    133.                 public boolean setViewValue(View view, Object data,    
    134.                         String textRepresentation) {    
    135.                     // TODO Auto-generated method stub    
    136.                     if(view instanceof ImageView && data instanceof Bitmap){    
    137.                         ImageView i = (ImageView)view;    
    138.                         i.setImageBitmap((Bitmap) data);    
    139.                         return true;    
    140.                     }    
    141.                     return false;    
    142.                 }  
    143.             });   
    144.             gridView1.setAdapter(simpleAdapter);  
    145.             simpleAdapter.notifyDataSetChanged();  
    146.             //刷新后释放防止手机休眠后自动添加  
    147.             pathImage = null;  
    148.         }  
    149.     }  
    150.       
    151.     /* 
    152.      * Dialog对话框提示用户删除操作 
    153.      * position为删除图片位置 
    154.      */  
    155.     protected void dialog(final int position) {  
    156.         AlertDialog.Builder builder = new Builder(MainActivity.this);  
    157.         builder.setMessage("确认移除已添加图片吗？");  
    158.         builder.setTitle("提示");  
    159.         builder.setPositiveButton("确认", new DialogInterface.OnClickListener() {  
    160.             @Override  
    161.             public void onClick(DialogInterface dialog, int which) {  
    162.                 dialog.dismiss();  
    163.                 imageItem.remove(position);  
    164.                 simpleAdapter.notifyDataSetChanged();  
    165.             }  
    166.         });  
    167.         builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {  
    168.             @Override  
    169.             public void onClick(DialogInterface dialog, int which) {  
    170.                 dialog.dismiss();  
    171.                 }  
    172.             });  
    173.         builder.create().show();  
    174.     }  
    175.   
    176. }  
        同时需要在AndroidMainfest.xml中添加权限操作SD卡和网络上传至服务器.
    [html] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <!-- 申明网络权限  -->  
    2. <uses-permission android:name="android.permission.INTERNET" />  
    3. <!-- 申明权限 操作SD卡 -->    
    4. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  

    五. 总结

        
        该文章需要注意一个地方：在使用SimpleAdapter适配器加载bmp图片时,可能在GridView中不显示.即HashMap中map.put("itemImage",bmp)不显示图片,而使用put装入R.drawable.img却能显示.
        这时有两种解决方法,一种是自定义继承BaseAdapter的适配器实现;另一种方法则是如上所示通过ViewBinder()接口实现,感谢博主dmin_提供的方法.
        下载地址:http://download.csdn.net/detail/eastmount/8237429
        最后希望文章对大家有所帮助,如果有错误或不足之处,请海涵~最近学校网比较差,回复别人都不行.
        (By:Eastmount 2014-12-8 晚9点 http://blog.csdn.net/eastmount/)
  • 相关阅读:
    《JavaScript高级程序设计》笔记：客户端检测（九）
    《JavaScript高级程序设计》笔记：BOM（八）
    《JavaScript高级程序设计》笔记：函数表达式（七）
    《JavaScript高级程序设计》笔记：面向对象的程序设计（六）
    小tips：JS的Truthy和Falsy（真值与假值）
    footer固定在页面底部的实现方法总结
    WEB前端需要了解的XML相关基础知识
    vuex最简单、最直白、最全的入门文档
    原生JS替代jQuery的各种方法汇总
    数据挖掘优秀工具对比
  • 原文地址：https://www.cnblogs.com/tc310/p/4972180.html
Copyright © 2011-2022 走看看