最近做开发需要解决一个模仿微信朋友圈附加图片的功能,具体要求如下:
(1)从手机中最多选择3张图片,可拍照上传;
(2)选择的图片可以点击移除然后再添加新图片;
(3)可以在手机包含图片的各个文件夹中随意选择等。
本博客主要实现的是以上功能,其他诸如主界面布局、各种控件添加和提交功能等旨在说明问题,只做了简单处理,重点在图片选择添加部分。该功能的实现主要引用了一个图片加载的开源框架universal-image-loader。
其中截图如下:
为了不过于冗余,过滤了部分布局文件和资源文件,在这里提供源码下载地址,有兴趣的读者可以下载观看(注:我使用的 Android Studio 1.4 , SdkVersion 为23 ,在小米note【Android 4.4 】上调试)。
下载地址:
Android自定义仿微信图片选择器.zip
下面开始我们的主要内容:
主界面布局activity_main.xml (主要使用一个GridView实现):
<?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"
>
<RelativeLayout
android:layout_width="fill_parent"
android:background="#f7614d"
android:paddingLeft="37px"
android:layout_height="70dp">
<TextView
android:layout_centerInParent="true"
android:text="附图案例"
android:textSize="25sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#00000000"/>
<LinearLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv11"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文字描述"
android:textSize="23sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#00000000"/>
<EditText
android:paddingTop="20dp"
android:background="@drawable/bg_et"
android:id="@+id/editText"
android:inputType="textMultiLine"
android:gravity="left|top"
android:padding="5dp"
android:maxLength="300"
android:hint="客官,写点评论吧..."
android:textColorHint="#808080"
android:textSize="20sp"
android:layout_width="fill_parent"
android:layout_height="150dp" />
<View
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#00000000"/>
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="附加图片"
android:textSize="23sp" />
<View
android:layout_width="fill_parent"
android:layout_height="10dp"
android:background="#00000000"/>
<GridView
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:horizontalSpacing="2dp"
android:verticalSpacing="5dp"
android:scrollbars="none"
android:listSelector="#00000000"
android:numColumns="3" >
</GridView>
<Button
android:id="@+id/submit_btn"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="@drawable/bg_submit"
android:text="提交"
android:textSize="23sp"
android:textColor="#FFFFFF"/>
</LinearLayout>
</LinearLayout>
图片选择界面布局activity_select_picture.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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#c000" >
<Button
android:id=