Android 使用HorizontalScrollView 实现Gallery效果

　　Gallery（画廊）是一个锁定中心条目并且拥有水平滚动列表的视图，一般用来浏览图片，并且可以响应事件显示信息；Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果；

　　但Gallery被谷歌废弃了，Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果；

（1）看一个例子：用Gallery来实现：







代码：

ScrollView1.java

package com.xiaozhang.dialog;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;

public class ScrollView1 extends Activity {

private Gallery gallery;

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.view);
gallery = (Gallery) findViewById(R.id.gallery);
// 设置图片适配器
gallery.setAdapter(new ImageAdapter(this));
// 设置监听器
gallery.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(ScrollView1.this,
"点击了第" + (position + 1) + "张图片", Toast.LENGTH_LONG)
.show();
}
});
}
}

class ImageAdapter extends BaseAdapter {
// 声明Context
private Context context;
// 图片源数组
private Integer[] imageInteger = { R.drawable.pic1, R.drawable.pic2,
R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
R.drawable.pic7 };

// 声明 ImageAdapter
public ImageAdapter(Context c) {
context = c;
}

@Override
// 获取图片的个数
public int getCount() {
return imageInteger.length;
}

@Override
// 获取图片在库中的位置
public Object getItem(int position) {
return position;
}

@Override
// 获取图片在库中的位置
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(context);
// 给ImageView设置资源
imageView.setImageResource(imageInteger[position]);
// 设置比例类型
imageView.setScaleType(ImageView.ScaleType.CENTER);

imageView.setLayoutParams(new Gallery.LayoutParams(350, 350));
return imageView;
}
}

view.xml

<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:galleryItemBackground"
android:spacing="10dp"
/>

用HorizontalScrollView来实现：





MainActivity.java

package com.xiaozhang.horizontal;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

private LinearLayout mGallery;
private int[] imgId;
private LayoutInflater mInflater;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mInflater = LayoutInflater.from(this);

imgId = new int[] { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
R.drawable.pic7, R.drawable.pic8, R.drawable.pic9 };
initView();
}

private void initView() {
mGallery = (LinearLayout) findViewById(R.id.gallery_id);

for (int i = 0; i < imgId.length; i++) {

View view = mInflater.inflate(R.layout.gallery, mGallery, false);
ImageView img = (ImageView) view.findViewById(R.id.gallery_image);
img.setImageResource(imgId[i]);
TextView txt = (TextView) view.findViewById(R.id.gallery_text);
txt.setText("some info ");
mGallery.addView(view);
}
}
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="260dp"
android:layout_gravity="center_vertical"
android:background="#AA4444"
android:scrollbars="none" >

<LinearLayout
android:id="@+id/gallery_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>

</LinearLayout>

gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:layout_height="240dp"
android:background="@android:color/white" >

<ImageView
android:id="@+id/gallery_image"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:scaleType="centerCrop" />

<TextView
android:id="@+id/gallery_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/gallery_image"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:textColor="#ff0000"
android:textSize="25sp" />

</RelativeLayout>

（2）看另一个例子：滑动下面的小图查看大图片；

　　先用Gallery来实现；





实现方式：

MainActivity.java

package com.xiaozhang.dialog;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements OnItemSelectedListener,
ViewFactory {

private ImageSwitcher mSwitcher;
// 小图片
private Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2,
R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
R.drawable.pic7, R.drawable.pic8 };
// 大图片
private Integer[] mImageIds = { R.drawable.pic1, R.drawable.pic2,
R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
R.drawable.pic7, R.drawable.pic8 };

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 设置窗口无标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
// 注意在使用一个ImageSwitcher之前，
// 一定要调用setFactory方法，要不setImageResource这个方法会报空指针异常。
mSwitcher.setFactory(this);
// 设置动画效果
mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));

Gallery g = (Gallery) findViewById(R.id.gallery);

// 添加OnItemSelectedListener监听器
g.setAdapter(new ImageAdapter(this));
g.setOnItemSelectedListener(this);

}

// 创建内部类ImageAdapter
public class ImageAdapter extends BaseAdapter {
public ImageAdapter(Context c) {
mContext = c;
}

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

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

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

public View getView(int position, View convertView, ViewGroup parent) {
ImageView i = new ImageView(mContext);

i.setImageResource(mThumbIds[position]);
// 设置边界对齐
i.setAdjustViewBounds(true);
// 设置布局参数
i.setLayoutParams(new Gallery.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
// 设置背景资源
i.setBackgroundResource(R.drawable.pic1);
return i;
}

private Context mContext;
}

@Override
// 实现onItemSelected()方法，更换图片
public void onItemSelected(AdapterView<?> adapter, View v, int position,
long id) {
// 设置图片资源
mSwitcher.setImageResource(mImageIds[position]);
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {

}

@Override
// 实现makeView()方法，为ImageView设置布局格式
public View makeView() {
ImageView i = new ImageView(this);
// 设置背景颜色
i.setBackgroundColor(0xFF0000);
// 设置比例类型
i.setScaleType(ImageView.ScaleType.FIT_CENTER);
// 设置布局参数
i.setLayoutParams(new ImageSwitcher.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
return i;
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageSwitcher
android:id="@+id/switcher"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

<Gallery
android:id="@+id/gallery"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#550000"
android:gravity="center_vertical"
android:spacing="16dp" />

</RelativeLayout>

而利用HorizontalScrollView的实现方式为：





代码实现：

HorizontalScrollViewAdapter.java

package com.example.zhy_horizontalscrollview;

import java.util.List;

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

public class HorizontalScrollViewAdapter {

private LayoutInflater mInflater;
private List<Integer> mDatas;

public HorizontalScrollViewAdapter(Context context, List<Integer> mDatas) {
mInflater = LayoutInflater.from(context);
this.mDatas = mDatas;
}

public int getCount() {
return mDatas.size();
}

public Object getItem(int position) {
return mDatas.get(position);
}

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

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
viewHolder = new ViewHolder();
convertView = mInflater.inflate(
R.layout.activity_index_gallery_item, parent, false);
viewHolder.mImg = (ImageView) convertView
.findViewById(R.id.id_index_gallery_item_image);
viewHolder.mText = (TextView) convertView
.findViewById(R.id.id_index_gallery_item_text);

convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.mImg.setImageResource(mDatas.get(position));
viewHolder.mText.setText("some info ");

return convertView;
}

private class ViewHolder {
ImageView mImg;
TextView mText;
}

}

MainActivity.java

package com.example.zhy_horizontalscrollview;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;

import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.CurrentImageChangeListener;
import com.example.zhy_horizontalscrollview.MyHorizontalScrollView.OnItemClickListener;

public class MainActivity extends Activity {

private MyHorizontalScrollView mHorizontalScrollView;
private HorizontalScrollViewAdapter mAdapter;
private ImageView mImg;
private List<Integer> mDatas = new ArrayList<Integer>(Arrays.asList(
R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,
R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h,
R.drawable.l));

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

mImg = (ImageView) findViewById(R.id.id_content);

mHorizontalScrollView = (MyHorizontalScrollView) findViewById(R.id.id_horizontalScrollView);
mAdapter = new HorizontalScrollViewAdapter(this, mDatas);
// 添加滚动回调
mHorizontalScrollView
.setCurrentImageChangeListener(new CurrentImageChangeListener() {
@Override
public void onCurrentImgChanged(int position,
View viewIndicator) {
mImg.setImageResource(mDatas.get(position));
viewIndicator.setBackgroundColor(Color
.parseColor("#AA024DA4"));
}
});
// 添加点击回调
mHorizontalScrollView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onClick(View view, int position) {
mImg.setImageResource(mDatas.get(position));
view.setBackgroundColor(Color.parseColor("#AA024DA4"));
}
});
// 设置适配器
mHorizontalScrollView.initDatas(mAdapter);
}

}

MyHorizontalScrollView.java

package com.example.zhy_horizontalscrollview;

import java.util.HashMap;
import java.util.Map;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class MyHorizontalScrollView extends HorizontalScrollView implements
OnClickListener {

/**
* 图片滚动时的回调接口
*
* @author zhy
*
*/
public interface CurrentImageChangeListener {
void onCurrentImgChanged(int position, View viewIndicator);
}

/**
* 条目点击时的回调
*
* @author zhy
*
*/
public interface OnItemClickListener {
void onClick(View view, int pos);
}

private CurrentImageChangeListener mListener;

private OnItemClickListener mOnClickListener;

private static final String TAG = "MyHorizontalScrollView";

/**
* HorizontalListView中的LinearLayout
*/
private LinearLayout mContainer;

/**
* 子元素的宽度
*/
private int mChildWidth;
/**
* 子元素的高度
*/
private int mChildHeight;
/**
* 当前最后一张图片的index
*/
private int mCurrentIndex;
/**
* 当前第一张图片的下标
*/
private int mFristIndex;
/**
* 当前第一个View
*/
private View mFirstView;
/**
* 数据适配器
*/
private HorizontalScrollViewAdapter mAdapter;
/**
* 每屏幕最多显示的个数
*/
private int mCountOneScreen;
/**
* 屏幕的宽度
*/
private int mScreenWitdh;

/**
* 保存View与位置的键值对
*/
private Map<View, Integer> mViewPos = new HashMap<View, Integer>();

public MyHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// 获得屏幕宽度
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWitdh = outMetrics.widthPixels;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mContainer = (LinearLayout) getChildAt(0);
}

/**
* 加载下一张图片
*/
protected void loadNextImg() {
// 数组边界值计算
if (mCurrentIndex == mAdapter.getCount() - 1) {
return;
}
// 移除第一张图片，且将水平滚动位置置0
scrollTo(0, 0);
mViewPos.remove(mContainer.getChildAt(0));
mContainer.removeViewAt(0);

// 获取下一张图片，并且设置onclick事件，且加入容器中
View view = mAdapter.getView(++mCurrentIndex, null, mContainer);
view.setOnClickListener(this);
mContainer.addView(view);
mViewPos.put(view, mCurrentIndex);

// 当前第一张图片小标
mFristIndex++;
// 如果设置了滚动监听则触发
if (mListener != null) {
notifyCurrentImgChanged();
}

}

/**
* 加载前一张图片
*/
protected void loadPreImg() {
// 如果当前已经是第一张，则返回
if (mFristIndex == 0)
return;
// 获得当前应该显示为第一张图片的下标
int index = mCurrentIndex - mCountOneScreen;
if (index >= 0) {
// mContainer = (LinearLayout) getChildAt(0);
// 移除最后一张
int oldViewPos = mContainer.getChildCount() - 1;
mViewPos.remove(mContainer.getChildAt(oldViewPos));
mContainer.removeViewAt(oldViewPos);

// 将此View放入第一个位置
View view = mAdapter.getView(index, null, mContainer);
mViewPos.put(view, index);
mContainer.addView(view, 0);
view.setOnClickListener(this);
// 水平滚动位置向左移动view的宽度个像素
scrollTo(mChildWidth, 0);
// 当前位置--，当前第一个显示的下标--
mCurrentIndex--;
mFristIndex--;
// 回调
if (mListener != null) {
notifyCurrentImgChanged();

}
}
}

/**
* 滑动时的回调
*/
public void notifyCurrentImgChanged() {
// 先清除所有的背景色，点击时会设置为蓝色
for (int i = 0; i < mContainer.getChildCount(); i++) {
mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);
}

mListener.onCurrentImgChanged(mFristIndex, mContainer.getChildAt(0));

}

/**
* 初始化数据，设置数据适配器
*
* @param mAdapter
*/
public void initDatas(HorizontalScrollViewAdapter mAdapter) {
this.mAdapter = mAdapter;
mContainer = (LinearLayout) getChildAt(0);
// 获得适配器中第一个View
final View view = mAdapter.getView(0, null, mContainer);
mContainer.addView(view);

// 强制计算当前View的宽和高
if (mChildWidth == 0 && mChildHeight == 0) {
int w = View.MeasureSpec.makeMeasureSpec(0,
View.MeasureSpec.UNSPECIFIED);
int h = View.MeasureSpec.makeMeasureSpec(0,
View.MeasureSpec.UNSPECIFIED);
view.measure(w, h);
mChildHeight = view.getMeasuredHeight();
mChildWidth = view.getMeasuredWidth();
Log.e(TAG, view.getMeasuredWidth() + "," + view.getMeasuredHeight());
mChildHeight = view.getMeasuredHeight();
// 计算每次加载多少个View
mCountOneScreen = (mScreenWitdh / mChildWidth == 0) ? mScreenWitdh
/ mChildWidth + 1 : mScreenWitdh / mChildWidth + 2;

Log.e(TAG, "mCountOneScreen = " + mCountOneScreen
+ " ,mChildWidth = " + mChildWidth);

}
// 初始化第一屏幕的元素
initFirstScreenChildren(mCountOneScreen);
}

/**
* 加载第一屏的View
*
* @param mCountOneScreen
*/
public void initFirstScreenChildren(int mCountOneScreen) {
mContainer = (LinearLayout) getChildAt(0);
mContainer.removeAllViews();
mViewPos.clear();

for (int i = 0; i < mCountOneScreen; i++) {
View view = mAdapter.getView(i, null, mContainer);
view.setOnClickListener(this);
mContainer.addView(view);
mViewPos.put(view, i);
mCurrentIndex = i;
}

if (mListener != null) {
notifyCurrentImgChanged();
}

}

@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
// Log.e(TAG, getScrollX() + "");

int scrollX = getScrollX();
// 如果当前scrollX为view的宽度，加载下一张，移除第一张
if (scrollX >= mChildWidth) {
loadNextImg();
}
// 如果当前scrollX = 0， 往前设置一张，移除最后一张
if (scrollX == 0) {
loadPreImg();
}
break;
}
return super.onTouchEvent(ev);
}

@Override
public void onClick(View v) {
if (mOnClickListener != null) {
for (int i = 0; i < mContainer.getChildCount(); i++) {
mContainer.getChildAt(i).setBackgroundColor(Color.WHITE);
}
mOnClickListener.onClick(v, mViewPos.get(v));
}
}

public void setOnItemClickListener(OnItemClickListener mOnClickListener) {
this.mOnClickListener = mOnClickListener;
}

public void setCurrentImageChangeListener(
CurrentImageChangeListener mListener) {
this.mListener = mListener;
}

}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical" >

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >

<ImageView
android:id="@+id/id_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher" />
</FrameLayout>

<com.example.zhy_horizontalscrollview.MyHorizontalScrollView
android:id="@+id/id_horizontalScrollView"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_gravity="bottom"
android:background="@android:color/white"
android:scrollbars="none" >

<LinearLayout
android:id="@+id/id_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" >
</LinearLayout>
</com.example.zhy_horizontalscrollview.MyHorizontalScrollView>

</LinearLayout>

activity_index_gallery_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="120dp"
android:layout_height="130dp"
android:background="@android:color/white" >

<ImageView
android:id="@+id/id_index_gallery_item_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="5dp"
android:scaleType="centerCrop" />

<TextView
android:id="@+id/id_index_gallery_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/id_index_gallery_item_image"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:textColor="#ff0000"
android:textSize="12dp" />

</RelativeLayout>

其中第二个是转载自：

/article/1336247.html

多谢群主；