用GridView实现Gallery的效果

来源：互联网发布：电视淘宝编辑：程序博客网时间：2024/05/01 22:42

本帖最后由 likeyou 于 2011-11-7 21:01 编辑

在实现横向的类似Gallery的效果中做了实现Gallery的尝试，但是效果不好。使用的是TableLayout，出现了横向拖动图片的时候，因为有倾斜（轻微的竖向拖动），会整个列表竖向滚动。其实这个问题可以将TableRow中条目设置为clickable来解决。但是效果依然不好。

这次尝试通过GridView来解决问题，效果很好，见截图：

基本思路是：

每个可选的图，包括文字部分，是GridView中的一个条目；
一个GridView条目是相对布局（RelativeLayout），里面包含一个图片（ImageView）和一个文字（TextView）；
关键点是GridView如何保持横向，默认的情况下会折行的，首先要用一个HorizontalScrollView提供横向滚动容器，然后内部放置一个FrameLayout，如果不放置FrameLayout布局，直接放入下面的布局或者视图，GridView将会变成单列纵向滚动，在FrameLayout布局中加入横向的LinearLayout布局，要设置它的layout_width，要足够大，这样在其中加入GridView就能横向排列了。

首先看一下GridView中条目的布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingBottom="10.0dip" android:layout_width="90.0dip"
android:layout_height="140.0dip">
<ImageView android:id="@+id/ItemImage" android:layout_width="80.0dip"
android:layout_height="108.0dip" android:layout_marginLeft="10.0dip"
android:layout_centerHorizontal="true">
</ImageView>
<TextView android:layout_below="@+id/ItemImage" android:id="@+id/ItemText"
android:ellipsize="end" android:layout_width="80.0dip"
android:layout_height="26.0dip" android:layout_marginTop="5.0dip"
android:singleLine="true" android:layout_centerHorizontal="true">
</TextView>
</RelativeLayout>

复制代码

这里使用了相对布局的特性，android:layout_below，表示TextView在ImageView下面。这里的图都是用的res/drawable目录下的静态图形文件，正式情况下，应该是从网络获取，可参见用Java concurrent编写异步加载图片功能的原型实现，二者结合可用于正式生产环境。

ListView的Header使用了自定义视图，更简单的示例可参见为ListView增加Header。表头（ListView Header）的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="200dp">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="最近访问人物" />
<HorizontalScrollView android:layout_width="fill_parent"
android:layout_height="160dp">
<FrameLayout android:layout_width="fill_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="1100dp"
android:layout_height="match_parent" android:orientation="horizontal">
<GridView android:id="@+id/grid" android:layout_width="fill_parent"
android:gravity="center" android:layout_height="fill_parent"
android:horizontalSpacing="1.0dip" android:verticalSpacing="1.0dip"
android:stretchMode="spacingWidthUniform" android:numColumns="auto_fit"
android:columnWidth="80dip">
</GridView>
</LinearLayout>
</FrameLayout>
</HorizontalScrollView>
</LinearLayout>

复制代码

这是比较关键的布局文件，GridView能实现横向滚动主要靠它了。其中：

<LinearLayout android:layout_width="1100dp"

复制代码

我是写死了1100dp，正式使用的时候，因为图片都可能是动态从服务器上获取的，可以根据数量以及图片的宽度，空白边动态计算这个长度。

GridView和ListView类似，都需要ViewAdapter来适配数据和视图。

见Activity的源代码：

package com.easymorse.grid.demo;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class GridDemoActivity extends ListActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LayoutInflater layoutInflater = (LayoutInflater) this
.getSystemService("layout_inflater");
View headerView=layoutInflater.inflate(R.layout.list_header, null);
setGridView(headerView);
ListView listView=(ListView) this.findViewById(android.R.id.list);
listView.addHeaderView(headerView);
listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,new String[]{"隋","唐","宋","元","明","清"}));
}
private void setGridView(View view) {
GridView gridView = (GridView) view.findViewById(R.id.grid);
gridView.setNumColumns(10);
ArrayList<HashMap<String, Object>> items = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < 10; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", R.drawable.k);
map.put("ItemText", "清.康熙" + "(" + i + ")");
items.add(map);
}
SimpleAdapter adapter = new SimpleAdapter(this, items, R.layout.item,
new String[] { "ItemImage", "ItemText" }, new int[] {
R.id.ItemImage, R.id.ItemText });
gridView.setAdapter(adapter);
}
}

复制代码

全部源代码：

http://easymorse.googlecode.com/svn/tags/grid.demo-0.1.0/

项目需求在制定大小区域写一个横向菜单栏，菜单栏整体不能移动，GalleryFlow画廊不能满足需求，就自己重写写了一个）划到当图片时换个图片且动画效果渐渐放大，划到下一张时候前一张用动画渐渐还原原来大小----先上个效果图，没有找到一样大小的图就用喷笔喷了点，希望大伙原谅，咱看效果
（很多童鞋说没效果，这里提下，压缩包里是用的setOnItemSelectedListener事件，我这里是给机顶盒用的：也就是键盘加遥控器，要想有点击事件在代码添加个setOnClickListener事件代码跟setOnItemSelectedListener代码一样）

动画, 图片

QQ截图20121217114443.png (39.51 KB, 下载次数: 3)

QQ截图20121217114453.png (40.16 KB, 下载次数: 0)

Gallery.rar

491.45 KB, 下载次数: 164, 下载积分: 下载豆 -2