本帖最后由 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编写异步加载图片功能的原型实现,二者结合可用于正式生产环境。
- <?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代码一样) |
|