今天在做一个软件界面时用到了ImageSwitcher和Gallery控件,在看API时,感觉上面的例子讲的不是很具体,效率并不高。在这里我就以一个图片浏览功能来具体说明这两个控件的用法。
首先看运行效果:
在这里图片我用的是API中的图片。先说下这个图片浏览的功能吧,首先,它要实现图片的切换,当点击上面的小图时,下方会出现对象的大图,其次就是实现上图中最上面的样式,即一个图片和一个文本。下来我们还要实现起始位置居中,滑动小图的速率的控制,最上面小图的无限循环等功能。下面我就将具体实现代码附下,供大家参考。
main.xml:
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3android:layout_width="match_parent"
4android:layout_height="match_parent"
5android:orientation="vertical">
6<cn.yj3g.gallery.MyGallery android:id="@+id/gallery"
7android:background="#55000000"
8android:layout_width="match_parent"
9android:layout_height="80dp"
10android:gravity="center_vertical"
11android:spacing="2dp"
12/>
13<ImageSwitcher android:id="@+id/switcher"
14android:layout_width="match_parent"
15android:layout_height="match_parent"
16android:layout_weight="1"
17/>
18 </LinearLayout>
在上面我是自定义视图,引用自己定义的一个Gallery,在这个Gallery中我重新设置的滑动的速率,让它滑动速度放慢,下面是我自定义的Gallery 代码:
MyGallery.java:
1 package cn.yj3g.gallery;
2
3 import android.content.Context;
4 import android.util.AttributeSet;
5 import android.view.MotionEvent;
6 import android.widget.Gallery;
7
8 public class MyGallery extends Gallery {
9public MyGallery(Context context, AttributeSet attrs) {
10super(context, attrs);
11}
12/**
13* 重写onFling方法,将滑动的速率降低
14*/
15@Override
16public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
17return super.onFling(e1, e2, velocityX/3, velocityY);
18}
19 }
下面是在定义gallery布局文件的代码:
gallery_item.xml:
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3android:orientation="vertical" android:layout_width="match_parent"
4android:layout_height="match_parent">
5<ImageView android:id="@+id/item_gallery_image"
6android:layout_width="fill_parent"
7android:layout_height="fill_parent"
8android:layout_weight="1"
9android:scaleType="fitXY"/>
10<TextView android:id="@+id/item_gallery_text"
11android:layout_width="fill_parent"
12android:layout_height="wrap_content"
13android:gravity="center"/>
14
15 </LinearLayout>
下面就是核心实现代码:
PictrueChangeActivity:
1 package cn.yj3g.PictrueChange;
2
3 import java.util.HashMap;
4
5 import android.app.Activity;
6 import android.content.Context;
7 import android.content.res.TypedArray;
8 import android.os.Bundle;
9 import android.util.Log;
10 import android.view.LayoutInflater;
11 import android.view.View;
12 import android.view.ViewGroup;
13 import android.view.Window;
14 import android.view.animation.AnimationUtils;
15 import android.widget.AdapterView;
16 import android.widget.BaseAdapter;
17 import android.widget.Gallery;
18 import android.widget.Gallery.LayoutParams;
19 import android.widget.ImageSwitcher;
20 import android.widget.ImageView;
21 import android.widget.TextView;
22 import android.widget.ViewSwitcher;
23
24 public class PictrueChangeActivity extends Activity implements AdapterView.OnItemClickListener,
25ViewSwitcher.ViewFactory {
26//定义ImageSwitcher类对象
27private ImageSwitcher mSwitcher;
28//文本资源
29private String[] titles = {"标题1","标题2","标题3","标题4","标题5","标题6","标题7","标题8",};
30//大图资源
31private Integer[] mThumbIds = { R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2,
32R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6,
33R.drawable.sample_7 };
34//大图对应的小图资源
35private Integer[] mImageIds = { R.drawable.sample_thumb_0, R.drawable.sample_thumb_1,
36R.drawable.sample_thumb_2, R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,
37R.drawable.sample_thumb_5, R.drawable.sample_thumb_6, R.drawable.sample_thumb_7 };
38@Override
39public void onCreate(Bundle savedInstanceState) {
40super.onCreate(savedInstanceState);
41//设置窗体无标题
42requestWindowFeature(Window.FEATURE_NO_TITLE);
43setContentView(R.layout.main);
44mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
45mSwitcher.setFactory(this);
46//设置图片的滑动效果
47mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
48mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
49
50Gallery g = (Gallery) findViewById(R.id.gallery);
51//设置Gallery的适配器
52g.setAdapter(new ImageAdapter(this, mThumbIds.length));
53//Gallery中每个条目的点击事件监听
54g.setOnItemClickListener(this);
55//设置默认其实位置为第二张图片
56g.setSelection(1);
57}
58
59public void onItemSelected(AdapterView parent, View v, int position, long id) {
60mSwitcher.setImageResource(mThumbIds[position % mImageIds.length]);
61}
62public void onNothingSelected(AdapterView parent) {
63}
64
65@Override
66public View makeView() {
67ImageView i = new ImageView(this);
68i.setBackgroundColor(0xFF000000);
69i.setScaleType(ImageView.ScaleType.FIT_CENTER);
70i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT,
71LayoutParams.MATCH_PARENT));
72return i;
73}
74//Gallery的适配器
75public class ImageAdapter extends BaseAdapter {
76private int mGalleryItemBackground;
77//定义map存储划过的位置
78private HashMap<Integer, View> mViewMaps;
79private int mCount;
80//定义布局加载器
81private LayoutInflater mInflater;
82
83public ImageAdapter(Context c, int count) {
84this.mCount = count;
85mViewMaps = new HashMap<Integer, View>(count);
86mInflater = LayoutInflater.from(PictrueChangeActivity.this);
87//定义图片的背景样式
88TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
89mGalleryItemBackground = a.getResourceId(
90R.styleable.Gallery1_android_galleryItemBackground, 0);
91//定义可以重复使用.可回收
92a.recycle();
93}
94
95public int getCount() {
96//设置循环的次数
97return Integer.MAX_VALUE;
98}
99
100public Object getItem(int position) {
101return position;
102}
103
104public long getItemId(int position) {
105return position;
106}
107
108public View getView(int position, View convertView, ViewGroup parent) {
109Log.v("TAG", "getView() position=" + position + " convertView=" + convertView);
110View viewGroup = mViewMaps.get(position%mCount);
111ImageView imageView = null;
112TextView textView = null;
113if(viewGroup==null) {
114viewGroup = mInflater.inflate(R.layout.gallery_item, null);
115imageView = (ImageView) viewGroup.findViewById(R.id.item_gallery_image);
116textView = (TextView) viewGroup.findViewById(R.id.item_gallery_text);
117imageView.setBackgroundResource(mGalleryItemBackground);
118mViewMaps.put(position%mCount, viewGroup);
119imageView.setImageResource(mImageIds[position % mImageIds.length]);
120textView.setText(titles[position % mImageIds.length]);
121}
122
123return viewGroup;
124}
125}
126//记录当前位置
127private int curruntPos = -1;
128@Override
129public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
130if (curruntPos == position) {
131return;
132} else
133curruntPos = position;
134mSwitcher.setImageResource(mThumbIds[position % mThumbIds.length]);
135}
136 }
这里要加载一个背景文件,放在values目录下,文件名为attrs.xml,代码如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <resources>
3
4<!-- These are the attributes that we want to retrieve from the theme
5in view/Gallery1.java -->
6<declare-styleable name="Gallery1">
7<attr name="android:galleryItemBackground" />
8</declare-styleable>
9
10 </resources>
这样显示的图片就有一个相框一样的边框。
在上面的代码中,和API中不同的是做了四点改进:
1.实现滑动可以无限滑动,就是在上面的getCount()中,返回的是一个Integer.MAX_VALUE,这样可以做到无限滑动。
2.提高在滑动时大图的显示效率。就是在上面,我自定义了一个Map,将滑动过的位置全部记录下来,等到下次滑到这个位置时,就不必再去加载图片了,类似于缓存。这样提高了效率。
3.在点击事件中,如果重复点击同一张图片,不会去加载图片。在这里我设置了一个标记位置,如果标记位置和当前位置一样,那就不去加载图片。
4.设置起始位置为第二位,这样初始界面比较美观,显示的图片两边都有图片。
摘自:青春流水指间