用GridView实现Gallery的效果

42
回复
539976
查看
[复制链接]

206

主题

1622

帖子

2721

安币

Android大神

Rank: 6Rank: 6

发表于 2011-11-7 20:51:32 | 显示全部楼层 |阅读模式
本帖最后由 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中条目的布局:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:paddingBottom="10.0dip" android:layout_width="90.0dip"
  4.     android:layout_height="140.0dip">
  5.     <ImageView android:id="@+id/ItemImage" android:layout_width="80.0dip"
  6.         android:layout_height="108.0dip" android:layout_marginLeft="10.0dip"
  7.         android:layout_centerHorizontal="true">
  8.     </ImageView>
  9.     <TextView android:layout_below="@+id/ItemImage" android:id="@+id/ItemText"
  10.         android:ellipsize="end" android:layout_width="80.0dip"
  11.         android:layout_height="26.0dip" android:layout_marginTop="5.0dip"
  12.         android:singleLine="true" android:layout_centerHorizontal="true">
  13.     </TextView>
  14. </RelativeLayout>
复制代码

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical" android:layout_width="fill_parent"
  4.     android:layout_height="200dp">
  5.     <TextView android:layout_width="fill_parent"
  6.         android:layout_height="wrap_content" android:text="最近访问人物" />
  7.     <HorizontalScrollView android:layout_width="fill_parent"
  8.         android:layout_height="160dp">
  9.         <FrameLayout android:layout_width="fill_parent"
  10.             android:layout_height="match_parent">
  11.             <LinearLayout android:layout_width="1100dp"
  12.                 android:layout_height="match_parent" android:orientation="horizontal">
  13.                 <GridView android:id="@+id/grid" android:layout_width="fill_parent"
  14.                     android:gravity="center" android:layout_height="fill_parent"
  15.                     android:horizontalSpacing="1.0dip" android:verticalSpacing="1.0dip"
  16.                     android:stretchMode="spacingWidthUniform" android:numColumns="auto_fit"
  17.                     android:columnWidth="80dip">
  18.                 </GridView>
  19.             </LinearLayout>
  20.         </FrameLayout>
  21.     </HorizontalScrollView>
  22. </LinearLayout>
复制代码

这是比较关键的布局文件,GridView能实现横向滚动主要靠它了。其中:
  1. <LinearLayout android:layout_width="1100dp"
复制代码
我是写死了1100dp,正式使用的时候,因为图片都可能是动态从服务器上获取的,可以根据数量以及图片的宽度,空白边动态计算这个长度。
GridView和ListView类似,都需要ViewAdapter来适配数据和视图。
见Activity的源代码:

  1. package com.easymorse.grid.demo;

  2. import java.util.ArrayList;
  3. import java.util.HashMap;

  4. import android.app.ListActivity;
  5. import android.os.Bundle;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.widget.ArrayAdapter;
  9. import android.widget.GridView;
  10. import android.widget.ListView;
  11. import android.widget.SimpleAdapter;

  12. public class GridDemoActivity extends ListActivity {
  13.     /** Called when the activity is first created. */
  14.     @Override
  15.     public void onCreate(Bundle savedInstanceState) {
  16.         super.onCreate(savedInstanceState);
  17.         setContentView(R.layout.main);

  18.         LayoutInflater layoutInflater = (LayoutInflater) this
  19.                 .getSystemService("layout_inflater");
  20.         View headerView=layoutInflater.inflate(R.layout.list_header, null);
  21.         setGridView(headerView);
  22.         ListView listView=(ListView) this.findViewById(android.R.id.list);
  23.         listView.addHeaderView(headerView);
  24.         listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,new String[]{"隋","唐","宋","元","明","清"}));
  25.     }

  26.     private void setGridView(View view) {
  27.         GridView gridView = (GridView) view.findViewById(R.id.grid);
  28.         gridView.setNumColumns(10);

  29.         ArrayList<HashMap<String, Object>> items = new ArrayList<HashMap<String, Object>>();

  30.         for (int i = 0; i < 10; i++) {
  31.             HashMap<String, Object> map = new HashMap<String, Object>();
  32.             map.put("ItemImage", R.drawable.k);
  33.             map.put("ItemText", "清.康熙" + "(" + i + ")");
  34.             items.add(map);
  35.         }

  36.         SimpleAdapter adapter = new SimpleAdapter(this, items, R.layout.item,
  37.                 new String[] { "ItemImage", "ItemText" }, new int[] {
  38.                         R.id.ItemImage, R.id.ItemText });
  39.         gridView.setAdapter(adapter);
  40.     }
  41. }
复制代码

全部源代码:
http://easymorse.googlecode.com/svn/tags/grid.demo-0.1.0/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题

帖子

安币

游客

发表于 2012-3-8 23:05:30 | 显示全部楼层
ddds{:soso_e100:}{:soso_e100:}

1

主题

261

帖子

10

安币

程序猿

Rank: 2

QQ达人

发表于 2012-5-17 10:37:57 | 显示全部楼层
好啊,支持下。

0

主题

21

帖子

49

安币

程序猿

Rank: 2

发表于 2012-5-22 15:30:46 | 显示全部楼层
学习下……顶……

7

主题

53

帖子

46

安币

程序猿

Rank: 2

发表于 2012-6-18 00:14:32 | 显示全部楼层
说好的源码呢。哥

7

主题

53

帖子

46

安币

程序猿

Rank: 2

发表于 2012-6-18 00:16:31 | 显示全部楼层
有源码的站内下我,谢谢

4

主题

38

帖子

178

安币

程序猿

Rank: 2

发表于 2012-7-25 12:06:23 | 显示全部楼层
用Gallery整了两天都没出来想要的效果,就没想到用gridview,太谢谢了。。。
一个女孩可以不美丽,可以不富有,但一定要独立。

0

主题

61

帖子

68

安币

程序猿

Rank: 2

QQ达人

发表于 2012-8-2 11:10:29 | 显示全部楼层
{:Skateboard:}
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )