android gallery 自定义边框+幻灯片效果

最近在项目中用到图片轮播，试了Gallery，ViewFlipper，ViewPager,感觉Gallery最符合需求，但是Gallery的系统边框很难看，项目中要求用自己的背景图片。

下面来看一下使用Gallery实现图片轮播

运行效果：

布局文件：

1. <FrameLayout
2. android:layout_width="fill_parent"
3. android:layout_height="wrap_content"
4. android:paddingLeft="16dp"
5. android:paddingRight="16dp"
6. android:paddingTop="10dp" >
7. <Gallery
8. android:id="@+id/gallery"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:fadingEdge="none"
12. android:spacing="0dp" />
13. <RelativeLayout
14. android:layout_width="fill_parent"
15. android:layout_height="18dp"
16. android:layout_gravity="bottom"
17. android:layout_marginBottom="3dp"
18. android:layout_marginLeft="3dp"
19. android:layout_marginRight="3dp"
20. android:background="#80776f63"
21. android:gravity="center" >
22. <ImageView
23. android:id="@+id/dot_1"
24. android:layout_width="wrap_content"
25. android:layout_height="wrap_content"
26. android:src="@drawable/ic_dot_normal" />
27. <ImageView
28. android:id="@+id/dot_2"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_marginLeft="10dp"
32. android:layout_toRightOf="@+id/dot_1"
33. android:src="@drawable/ic_dot_normal" />
34. <ImageView
35. android:id="@+id/dot_3"
36. android:layout_width="wrap_content"
37. android:layout_height="wrap_content"
38. android:layout_marginLeft="10dp"
39. android:layout_marginRight="10dp"
40. android:layout_toRightOf="@+id/dot_2"
41. android:src="@drawable/ic_dot_normal" />
42. </RelativeLayout>
43. </FrameLayout>

其中， android:fadingEdge="none"消除图片两边的阴影。使用FrameLayout在底部显示小圆点

1. public class MainActivity extends Activity {
2. private Gallery mGallery;
3. private int index = 0;// 记录选中的图片位置
4. private ImageView[] mImageViewIds;// 小圆点ImageView数组
5. private static final int IMAGE_COUNT = 3;// 小圆点个数
6. @Override
7. public void onCreate(Bundle savedInstanceState) {
8. super.onCreate(savedInstanceState);
9. setContentView(R.layout.activity_main);
10. findViews();
11. mImageViewIds[0].setImageDrawable(getBaseContext().getResources()
12. .getDrawable(R.drawable.ic_dot_focused));
13. ImageAdapteradapter = new ImageAdapter(this);
14. mGallery.setAdapter(adapter);
15. Timer timer = new Timer();
16. timer.schedule(task, 2000, 2000);
17. mGallery.setOnItemSelectedListener(onItemSelectedListener);
18. mGallery.setOnItemClickListener(onItemClickListener);
19. }
20. private void findViews() {
21. mGallery = (Gallery) findViewById(R.id.gallery);
22. mImageViewIds = new ImageView[] { (ImageView) findViewById(R.id.dot_1),
23. (ImageView) findViewById(R.id.dot_2),
24. (ImageView) findViewById(R.id.dot_3) };
25. }
26. private TimerTask task = new TimerTask() {
27. @Override
28. public void run() {
29. Message message = new Message();
30. message.what = 2;
31. index = mGallery.getSelectedItemPosition();
32. index++;
33. handler.sendMessage(message);
34. }
35. };
36. /**
37. * 开一个线程执行耗时操作
38. */
39. private Handler handler = new Handler() {
40. @Override
41. public void handleMessage(Message msg) {
42. super.handleMessage(msg);
43. switch (msg.what) {
44. case 2:
45. mGallery.setSelection(index);
46. break;
47. default:
48. break;
49. }
50. }
51. };
52. /**
53. * 设置小圆点显示，position会一直增加，如果要循环显示图片，需要对position取余，否则数组越界
54. */
55. private OnItemSelectedListener onItemSelectedListener = new OnItemSelectedListener() {
56. @Override
57. public void onItemSelected(AdapterView<?> parent, View view,
58. int position, long id) {
59. int pos = position % IMAGE_COUNT;
60. mImageViewIds[pos].setImageDrawable(getBaseContext().getResources()
61. .getDrawable(R.drawable.ic_dot_focused));
62. if (pos > 0) {
63. mImageViewIds[pos - 1].setImageDrawable(getBaseContext()
64. .getResources().getDrawable(R.drawable.ic_dot_normal));
65. }
66. if (pos < (IMAGE_COUNT - 1)) {
67. mImageViewIds[pos + 1].setImageDrawable(getBaseContext()
68. .getResources().getDrawable(R.drawable.ic_dot_normal));
69. }
70. if (pos == 0) {
71. mImageViewIds[IMAGE_COUNT - 1]
72. .setImageDrawable(getBaseContext().getResources()
73. .getDrawable(R.drawable.ic_dot_normal));
74. }
75. }
76. @Override
77. public void onNothingSelected(AdapterView<?> arg0) {
78. // TODO Auto-generated method stub
79. }
80. };
81. /**
82. * 点击事件，点击图片进入SecondActivity
83. */
84. private OnItemClickListener onItemClickListener = new OnItemClickListener() {
85. @Override
86. public void onItemClick(AdapterView<?> arg0, View arg1, int pos,
87. long arg3) {
88. Intent intent = new Intent();
89. intent.setClass(MainActivity.this, SecondActivity.class);
90. startActivity(intent);
91. }
92. };
93. }

ImageAdapter类，重写android.widget.BaseAdapter，用于描述图像信息。

1. public class ImageAdapter extends BaseAdapter {
2. private Context context;
3. private int[] mImages = { R.drawable.bg_timeline_01,
4. R.drawable.bg_timeline_02, R.drawable.bg_timeline_03 };
5. private static final int IMAGE_PX_HEIGHT = 198;
6. public ImageAdapter(Context context) {
7. this.context = context;
8. }
9. @Override
10. public int getCount() {
11. return Integer.MAX_VALUE;//实现循环显示
12. }
13. @Override
14. public Object getItem(int position) {
15. return position;
16. }
17. @Override
18. public long getItemId(int position) {
19. return position;
20. }
21. @Override
22. public View getView(int position, View convertView, ViewGroup parent) {
23. ImageView imageView = new ImageView(context);
24. imageView.setImageResource(mImages[position % mImages.length]);
25. imageView.setScaleType(ImageView.ScaleType.CENTER);
26. imageView.setLayoutParams(new Gallery.LayoutParams(
27. Gallery.LayoutParams.FILL_PARENT, IMAGE_PX_HEIGHT));
28. RelativeLayout borderImg = new RelativeLayout(context);
29. borderImg.setPadding(2, 2, 2, 2);
30. borderImg.setBackgroundResource(R.drawable.bg_gallery);//设置ImageView边框
31. borderImg.addView(imageView);
32. return borderImg;
33. }
34. }

如果用系统背景，可以这样写

1. int mGalleryItemBackground;
2. private Context mContext;
3. public ImageAdapter(Context context)
4. {
5. mContext = context;
6. // 获得Gallery组件的属性
7. TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
8. mGalleryItemBackground = typedArray.getResourceId(
9. R.styleable.Gallery_android_galleryItemBackground, 0);
10. }

在getview中设置

1. imageView.setBackgroundResource(mGalleryItemBackground);

Gallery组件属性信息定义在res\values\attrs.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
3. <declare-styleable name="Gallery">
4. <attr name="android:galleryItemBackground" />
5. </declare-styleable>
6. </resources>

详细讲解见http://www.eoeandroid.com/forum.php?mod=viewthread&tid=182297

自定义边框参考http://stackoverflow.com/questions/4830173/change-border-style-in-gallery