这篇博客介绍了一个结合GridView和Gallery的Android demo，展示了如何从SD卡读取图片并进行选择。当图片在GridView中被选中时，会显示在Gallery中，点击确定按钮会将选择的图片传递到下一界面。文章详细描述了布局设计和关键代码实现，包括自定义Adapter及数据处理。提供了一个完整的demo下载链接供读者参考学习。
由于我们项目的需求，我用GridView+Gallery写了一个demo，大家如果想学习他们的用法可以看这个demo中的内容，这个demo里不止有这些内容，还有imageView图片放大缩小，从外部存储中读取数据等内容，下面就详细介绍。
需求：在一个界面得到SD卡某个文件夹下的所有图片，并且用GridView显示出来，每张图片都可以选择和取消选择，选择该图片以后，该图片会显示在底部的gallery上，点击右下角的确定按钮，被选择的图片会传到下一个界面显示出来。这个界面如下图所示：
如上图，gridView的图片都是从外部存储的Camera目录下获取的，被选中后，该图片会显示到下面的gallery中，取消选择后，gallery的该图片也会消失。
点击确定后，在下一个界面也有一个GridView界面用来展示传到该界面的图片，点击某个图片项，会展示该图片的详情，第二个界面如下图：
点击某一个图片后，第三个界面如图（请无视渣画质）：
接下来说一下大体的实现方法：
第一个界面的布局如下：
activity_main.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"
tools:context=".MainActivity"
android:orientation="vertical" >
<GridView
android:layout_height="300dp"
android:layout_width="match_parent"
android:id="@+id/girdView"
android:columnWidth="10dp"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:gravity="center"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:id="@+id/layout"
>
<Gallery
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/myGallery"
android:gravity="center_vertical"
android:layout_weight="4"
android:spacing="10dp"
/>
<Button
android:id="@+id/isOk"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/ok"/>
</LinearLayout>
</LinearLayout>上面是一个gridView，下面是一个gallery和一个按钮
其中，设置了gridView每行显示3个item，gallery的每个item之间的间距是10dp（由于篇幅问题，具体属性说明请google）
第二个界面的layout就是一个gridView，名字叫activity_show_image.xml
第三个界面的layout仅有一个ImageView，布局是activity_image_detail.xml
第一个界面的GridView的item布局是一个ImageView加一个View，ImageView用于显示从存储卡得到的图片，View用于显示选中状态，如下：
griditem.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/myimgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"
android:src="@drawable/ic_launcher"
/>
<View
android:id="@+id/goodview"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="top|right"
android:background="@color/gray"
/>
</FrameLayout>gallery和第二个界面的GridView的item布局就是一个imageView，叫imageitem.xml
布局大概整完，接下来就是代码实现了，我们首先看一下代码的结构，类不多，就没分包
:
第一个界面的Activity是MainActivity,我们为他构造了一个数据控制器DataController，用于读取和处理界面上的数据，SDcardUtils主要负责从存储卡上读取图片数据，另外，我们为第一个界面的主要控件GridView和Gallery分别自定义了两个adapter，GridAdapter和GalleryAdapter，第二个界面和第三个界面的实现比较简单，于是就分别用了ShowImageActivity（第二个界面）和ImageDetailActivity（第三个界面）。
下面来看下MainActivity的内容
public class MainActivity extends Activity {
// 该界面的gridView
GridView myGridView;
// 底部布局
LinearLayout layout;
// 右下角的按钮
Button b1;
// 数据控制器
DataController controller;
// 下方的gallery
Gallery gallery;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
controller = DataController.newInstance();
// 这个方法必须调用
controller.setContext(this);
initViews();
setupData();
}private void initViews() {
myGridView = (GridView) findViewById(R.id.girdView);
layout = (LinearLayout) findViewById(R.id.layout);
gallery = (Gallery) findViewById(R.id.myGallery);
b1 = (Button) findViewById(R.id.isOk);
}private void setupData() {
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
myGridView.getLayoutParams().height = dm.heightPixels * 3 / 4;
layout.getLayoutParams().height = dm.heightPixels / 8;
myGridView.setAdapter(controller.getAdapter());
gallery.setAdapter(controller.getGalleryAdapter());
gallery.setUnselectedAlpha(0.3f);
myGridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
controller.onItemClickListener(arg0, arg1, arg2, arg3);
}
});
b1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this,
ShowImageActivity.class);
ArrayList<String> data = controller.getTagList();
intent.putStringArrayListExtra("data", data);
startActivity(intent);
}
});
}DataController.java
public class DataController {
private static DataController controller;
private Context mContext;
private GridAdapter adapter;
private GalleryAdapter galleryAdapter;
// 要传入下一个界面的数据
private ArrayList<String> tagList;
// 图片的临时引用，用于增加和删除gallery中的数据
private HashMap<String, Bitmap> tempImgReference;上面是控制器中的一些相关变量，这里我将控制器设置为了单例模式。
public synchronized static DataController newInstance() {
if (controller == null) {
controller = new DataController();
}
return controller;
}
private DataController() {
tagList = new ArrayList<String>();
tempImgReference = new HashMap<String, Bitmap>();
}
public void setContext(Context context) {
mContext = context;
}上面是对控制器的一些初始化工作
public GridAdapter getAdapter() {
List<String> data = SDcardUtils.getDataFromSDcard();
adapter = new GridAdapter(data);
return adapter;
}
public GalleryAdapter getGalleryAdapter() {
List<Bitmap> gData = new ArrayList<Bitmap>();
galleryAdapter = new GalleryAdapter(gData);
return galleryAdapter;
}通过上面的两个方法，我们可以得到MainActivity中两个控件的适配器，并且数据已经被初始化好了，SDcardUtils主要是将外部存储卡的上某一个文件夹下所有图片的Url读出来（这里的目录是storage/sdcard0/DCIM/Camera）
public void onItemClickListener(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
GridAdapter adapter = (GridAdapter) arg0.getAdapter();
boolean[] info = adapter.getSelectionInfo();
for (int i = 0; i < info.length; i++) {
if (i == arg2) {
info[i] = !info[i];
View view = arg1.findViewById(R.id.goodview);
if (view.getVisibility() == View.VISIBLE) {
view.setVisibility(View.INVISIBLE);
} else {
view.setVisibility(View.VISIBLE);
}
break;
}
}
ImageView iV = (ImageView) arg1.findViewById(R.id.myimgs);
String url = (String) iV.getTag();
if (info[arg2]) {
galleryAdapter.getData().add(processPicture(url));
tagList.add(url);
} else {
galleryAdapter.getData().remove(tempImgReference.get(url));
tempImgReference.remove(url);
tagList.remove(url);
}
galleryAdapter.updateData();
}上面的方法就是当第一个界面的GridView被点击时所进行处理的方法，当被点击时，我们判断了当前item被选中的状态，如果被选中，那么就将其转为未被选中并且将右上角的选中图标隐藏，反之同理。选中的状态存储在adapter中的一个list中，我们可以通过adapter.getselectionInfo拿到。
我们在改变GridView的状态时，如果当前图片由未被选中状态变为选中状态，那么就在gallery中将这个图片加入进去，galleryAdapter.getData().add()就做了这件事，并且将该图片的url放到准备传送到下一个界面的数据list中。如果由选中状态变为未选中状态，那么就判断下当前gallery中是否有这个图片被显示，如果有，就将其从gallery和传送list中移除。做完这一系列事情后，更新适配器数据。
主要的流程就是如此，附上一些其他没有提到的代码：
public Bitmap processPicture(String url) {
Bitmap bm = SDcardUtils.readDataFromSDcard(url);
// 存储该图像的引用，用于之后的删除
tempImgReference.put(url, bm);
return bm;
}
public ArrayList<String> getTagList() {
return tagList;
}此外，ImageDetailActivity中还有用手势平移，放大缩小图片的内容，大家可以看下。
放上demo下载地址：http://download.youkuaiyun.com/detail/tc598100922/7354961
感谢阅读，如有错误，还望指出。
扫一扫
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
