简单使用Gallery

最新推荐文章于 2021-03-18 01:57:16 发布

蒲锦_up

最新推荐文章于 2021-03-18 01:57:16 发布

阅读量2.5k

点赞数 1

分类专栏： android 系统组件（简介及扩展）文章标签： Gallery

本文链接：https://blog.csdn.net/yueqinglkong/article/details/21159227

版权

android 系统组件（简介及扩展）专栏收录该内容

27 篇文章 0 订阅

订阅专栏

画廊功能，在实际的开发中使用到的地方还是挺多的！

1.重写的适配器：

public class GalAdapter extends BaseAdapter {

	private Context context;
	private List<Integer> list;

	public GalAdapter(Context context, List<Integer> list) {
		this.context = context;
		this.list = list;
	}

	// 设置为一个较大的数
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return 20;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		// 实例化
		ImageView img = new ImageView(context);
		// 设置资源
		img.setImageResource(list.get(position % list.size()));
		// 设置边界对齐
		img.setAdjustViewBounds(true);
		// 设置布局参数
		img.setLayoutParams(new Gallery.LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.WRAP_CONTENT));
		// 设置背景资源
		 img.setBackgroundResource(R.drawable.BackBar);
		return img;
	}
}

在getcount()中定义一个较大的数，来实现循环的效果。

2.活动界面：

public class TestGallery extends Activity {
	private Gallery myGallery;
	private GalAdapter adapter;
	private List<Integer> list;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.acy_testgallery);
		initView();
	}

	public void initView() {
		list = new ArrayList<Integer>();
		//添加资源
		list.add(R.drawable.man_ad);
		list.add(R.drawable.man_ad);
		
		adapter = new GalAdapter(this, list);
		myGallery = (Gallery) findViewById(R.id.g_mg);
		myGallery.setAdapter(adapter);
		//选中的行
		myGallery.setSelection(10);
		//点击效果
		myGallery.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1,
					int position, long arg3) {
				// TODO Auto-generated method stub
				Toast.makeText(TestGallery.this, "you click:" + position, 500)
						.show();
			}
		});
	}
}

3.布局：

<?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" >

    <Gallery
        android:id="@+id/g_mg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:spacing="10dp" >
    </Gallery>

</RelativeLayout>

注意：

1.要实现的循环效果其实是个伪循环，它是通过设置一个比较大的数值，集合中的资源反复出现来达到视觉上的循环的。左右循环，是通过设置选中的是靠中间的资源，来实现左右滑动的。

2.但是按照这样的写法，对于画廊还存在速度控制问题，当滑动的速率过快的话，会一下滑动几张图片，给人的视觉效果不好。如果想实现跟viewpager差不多的单页滑动的效果（提一下，是可以通过自定义viewpager来实现类似画廊的效果的），可以通过自定gallery来实现。

单页滑动：

public class MyGallery extends Gallery {

	public MyGallery(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public MyGallery(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
	}

	public MyGallery(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		// TODO Auto-generated method stub
		int kEvent;
		if (isScrollingLeft(e1, e2)) {
			// Check if scrolling left
			kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
		} else {
			// Otherwise scrolling right
			kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
		}
		onKeyDown(kEvent, null);
		return true;
	}

	public boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
		return e2.getX() > e1.getX();
	}
}

在实现过的过程中，有些童鞋是直接让onfling（）返回false，来达到单页的效果的，这样会存在灵敏度的问题，需要滑动比较长一段的距离，才能切图片。

还有些童鞋在onscroll()控制滑动的距离来控制滑动的页数，有兴趣的可以试试！

3.在画廊下面显示一排点，来显示是第几张图片。实现的原理是在gallery中添加一个layout，在里面放置一排的点，当gallery滑动的时候，就改变小点的背景图片。

首先是布局：

<RelativeLayout
        android:id="@+id/layout_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <com.tinyevent.view.MyGallery
            android:id="@+id/gal_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:spacing="10dp" >
        </com.tinyevent.view.MyGallery>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/gal_title"
            android:gravity="center"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/img_one"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/point_white" />

            <ImageView
                android:id="@+id/img_two"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:background="@drawable/point_white" />

            <ImageView
                android:id="@+id/img_three"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:background="@drawable/point_white" />

            <ImageView
                android:id="@+id/img_four"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:background="@drawable/point_white" />

            <ImageView
                android:id="@+id/img_five"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:background="@drawable/point_white" />
        </LinearLayout>
    </RelativeLayout>

然后再gallery中监听滑动事件：

// 画廊下的滚动小点
		gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

			@Override
			public void onItemSelected(AdapterView<?> arg0, View arg1,
					int position, long arg3) {
				// TODO Auto-generated method stub
				restoreLinearImg();
				if (0 == position % 5) {
					oneImg.setBackgroundResource(R.drawable.point_black);
				} else if (1 == position % 5) {
					twoImg.setBackgroundResource(R.drawable.point_black);
				} else if (2 == position % 5) {
					threeImg.setBackgroundResource(R.drawable.point_black);
				} else if (3 == position % 5) {
					fourtImg.setBackgroundResource(R.drawable.point_black);
				} else {
					fiveImg.setBackgroundResource(R.drawable.point_black);
				}

			}

			@Override
			public void onNothingSelected(AdapterView<?> arg0) {
				// TODO Auto-generated method stub

			}
		});

当滑动图片的时候，就动态改变小点的背景图片，如果你想加入动画的话，估计也行（当然，我没试过！）。

封装了一个将所有的点重置为白色的方法：

/**
	 * 所有画廊下的滚动小点恢复白色点
	 */
	public void restoreLinearImg() {
		oneImg.setBackgroundResource(R.drawable.point_white);
		twoImg.setBackgroundResource(R.drawable.point_white);
		threeImg.setBackgroundResource(R.drawable.point_white);
		fourtImg.setBackgroundResource(R.drawable.point_white);
		fiveImg.setBackgroundResource(R.drawable.point_white);
	}

虽然跟软件的引导功能很相似，可是实现的方法是不一样的。