android 使用GridView实现Gallery的效果，并且从最左边开始

效果如下图：

 

1.首先设计man.xml这里使用HorizontalScrollView结合GridView实现Gallery的左右滚动效果，并且解决了Gallery从中间开始的问题，GridView可以从最左边开始显示。代码如下：

<?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="fill_parent"
    >
    <!-- Gallery view 图片效果图 -->
   	<HorizontalScrollView 
   		android:id="@+id/galleryScroll"
		android:layout_width="fill_parent"
		android:layout_height="90dip"
		android:scrollbars="none"
		android:focusable="false"
		android:layout_alignParentBottom="true"
		android:background="@drawable/gallerybackground"
		>
		<FrameLayout 
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:focusable="false"
			>
			<!--注意这里 宽度一定要设置不然不能达到效果  -->
			<LinearLayout 
				android:layout_width="770dp"
				android:layout_height="wrap_content" 
				android:orientation="horizontal"
				android:focusable="false"
				>
				<GridView android:id="@+id/gallery" 
					android:layout_width="fill_parent"
					android:gravity="center" 
					android:layout_height="wrap_content"
					android:horizontalSpacing="1.0dip" 
					android:verticalSpacing="1.0dip"
					android:stretchMode="spacingWidthUniform" 
					android:numColumns="auto_fit"
					android:columnWidth="70dip"
					android:focusable="false"
					>
				</GridView>

			</LinearLayout>
		</FrameLayout>
	</HorizontalScrollView>
</LinearLayout>

 

2.图片列表适配的实现，如下：

package com.src;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ImageAdapter extends BaseAdapter{
	
	private static String[] effectTitle = {"原图", "柔光", "LOMO", "复古", "古典", "黑白", 
			"淡雅", "哥特风", "暖化", "水印", "印象"};
	private static int[] effectDrawable = {R.drawable.lomoeffect_01, R.drawable.lomoeffect_02, 
		R.drawable.lomoeffect_03, R.drawable.lomoeffect_04, 
		R.drawable.lomoeffect_05, R.drawable.lomoeffect_06, 
		R.drawable.lomoeffect_07, R.drawable.lomoeffect_08, 
		R.drawable.lomoeffect_09, R.drawable.lomoeffect_10, 
		R.drawable.lomoeffect_11};
	 
	
	private ArrayList<GalleryInfo> list;
	private LayoutInflater inflater;
	public ImageAdapter(Context context) {
        super();
        list = new ArrayList<GalleryInfo>();
        inflater = LayoutInflater.from(context);
       // 初始化数据
        for (int i=0; i<effectDrawable.length; i++) {
        	GalleryInfo info = new GalleryInfo();
        	info.title = effectTitle[i];
        	info.drawable = effectDrawable[i];
        	if (i ==0 ) {
        		//默认第一项问选中
        		info.isSelect = true;
        	} else {
        		info.isSelect = false;
        	}
        	list.add(info);
        }
    }

    
    public int getCount() {
        return effectTitle.length;
    }

    
    public Object getItem(int position) {
        return position;
    }

    
    public long getItemId(int position) {
        return position;
    }

    
    public View getView(int position, View convertView, ViewGroup parent) {
    	
    	ViewHolder holder;
    	if (convertView == null) {
    		convertView = inflater.inflate(R.layout.gallery_item, null);
    		holder = new ViewHolder();
    		holder.effectTitle = (TextView)convertView.findViewById(R.id.effectTitle);
    		holder.effectDrawable = (ImageView)convertView.findViewById(R.id.effectDrawable);
    		convertView.setTag(holder);
    	} else {
    		holder = (ViewHolder)convertView.getTag();
    	}
    	
    	holder.effectTitle.setText(list.get(position).title);
    	holder.effectDrawable.setImageResource(list.get(position).drawable);
        
        if (list.get(position).isSelect) {//被选中的选项加选中的背景框
        	holder.effectDrawable.setBackgroundResource(R.drawable.gallery_select);
        }else {//未被选中的选项设置背景透明
        	holder.effectDrawable.setBackgroundDrawable(null);
        }
        
//        notifyDataSetChanged();
        return convertView;
    }
    
    public void changeStatus(int select) {
    	for (int i=0; i<list.size(); i++) {
    		list.get(i).isSelect = false;
    	}
    	
    	list.get(select).isSelect = true;
    }
    
    private class ViewHolder {
    	TextView effectTitle;
    	ImageView effectDrawable;
    }
    
    class GalleryInfo {
    	public String title;
    	public int drawable;
    	public boolean isSelect;
    }

}

 

3.测试实例效果，代码如下：

package com.src;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class GrideToGalleryActivity extends Activity {

	private GridView gallery;
	
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);     
        final ImageAdapter adapter = new ImageAdapter(this);
        gallery = (GridView)findViewById(R.id.gallery);
        gallery.setAdapter(adapter);
        gallery.setNumColumns(11);       
        gallery.setOnItemClickListener(new OnItemClickListener() {			
			public void onItemClick(AdapterView<?> arg0, View arg1, int select,
					long arg3) {
				adapter.changeStatus(select);//设置选中项
				adapter.notifyDataSetChanged();//更新列表
			}
		});
        
        gallery.setOnTouchListener(new OnTouchListener() {						
			public boolean onTouch(View v, MotionEvent event) {
				v.clearFocus();
				return false;
			}
		});
    }
}

 源代码附件

评论

3 楼 dongshuai1991 2013-09-17  

在不知道图片数的情况下 怎么去确定 linearlayout的宽度？  这是个bug  楼主有解决方法吗
  qq我  1790542492

2 楼 xianjiajun22 2013-04-23  

lz你好，我下了你的demo，好像是在做滤镜吧，可以看看吗？

1 楼 gyhcom 2012-12-08  

太感谢了，非常有用！