用GridView实现Gallery的效果(转)

用GridView实现Gallery的效果(转)

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

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

v1v3 v2

基本思路是:

 

  • 每个可选的图,包括文字部分,是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/

发表评论

电子邮件地址不会被公开。 必填项已用*标注