Android App中使用Gallery制作幻燈片播放效果
零、Gallery的使用回顧
我們有時(shí)候在iPhone手機(jī)上或者Windows上面看到動(dòng)態(tài)的圖片，可以通過鼠標(biāo)或者手指觸摸來移動(dòng)它，產(chǎn)生動(dòng)態(tài)的圖片滾動(dòng)效果，還可以根據(jù)你的點(diǎn)擊或者觸摸觸發(fā)其他事件響應(yīng)。同樣的，在Android中也提供這這種實(shí)現(xiàn)，這就是通過Gallery在UI上實(shí)現(xiàn)縮略圖瀏覽器。
我們來看看Gallery是如何來實(shí)現(xiàn)的，先把控件從布局文件中聲明，只需知道ID為gallery。
Gallery gallery = (Gallery) findViewById(R.id.gallery);
一般情況下，我們?cè)贏ndroid中要用到類似這種圖片容器的控件，都需要為它指定一個(gè)適配器，讓它可以把內(nèi)容按照我們定義的方式來顯示，因此我們來給它加一個(gè)適配器，至于這個(gè)適配器如何實(shí)現(xiàn)，后面接著來操作，這里只需知道這個(gè)適配器的類叫
ImageAdapter。 gallery.setAdapter(new ImageAdapter(this));
復(fù)制代碼接下來就是重頭戲了，適配器可以說是最重要的，我們來看看如何做？到這里似乎還缺少一些很重要的東西？什么東西呢？我們需要顯示的是圖片，那么圖片我們當(dāng)然首先要準(zhǔn)備好，這里我們準(zhǔn)備了5張圖片(存放drawable文件夾中)，我們用其IDs做索引，以便在適配器中使用。
private Integer[] mps = {
R.drawable.icon1,
R.drawable.icon2,
R.drawable.icon3,
R.drawable.icon4,
R.drawable.icon5
};
OK，這里將開始定義適配器了，通過繼承BaseAdapter用以實(shí)現(xiàn)的適配器。
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
mContext = context;
}
public int getCount() {
return mps.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 image = new ImageView(mContext);
image.setImageResource(mps[position]);
image.setAdjustViewBounds(true);
image.setLayoutParams(new Gallery.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
return image;
}
}
至此，整個(gè)Gallery基本都是先完成了，我們還需要為它添加一個(gè)監(jiān)聽器，否則這個(gè)縮略圖瀏覽器就僅僅只可以看不能用了。
gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View v,int position, long id) {
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
//這里不做響應(yīng)
}
});
一、效果圖展示
最近下載幾款手機(jī)應(yīng)用研究了下，發(fā)了有些自定義控件驚人的相似，所以我覺得在以后的開發(fā)中，對(duì)一些控件的復(fù)用肯定是很多的，在首頁（非載入頁）一般都會(huì)有一個(gè)幻燈片效果，既可以放廣告也可以放推薦，如果圖片設(shè)計(jì)的好看，效果一般都會(huì)不錯(cuò)，既然用到了Gallery，也附帶把相框效果的例子寫一寫（淘寶詳情界面的商品圖片滑動(dòng)展示）
（1）幻燈片效果展示：
（2）商品圖片滑動(dòng)展示
查看大圖：
二、部分代碼說明
1、幻燈片效果的實(shí)現(xiàn)：
自定義Gallery：DetailGallery.java
可視界面：ImgSwitchActivity.java
適配類：GalleryIndexAdapter.java
自定義Gallery主要重寫onFling通過按下和松手的位置不同比較是向右移動(dòng)還是向左移動(dòng)，部分代碼如下：
private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) {
return e2.getX() > e1.getX();
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
int kEvent;
if (isScrollingLeft(e1, e2)) {
kEvent = KeyEvent.KEYCODE_DPAD_LEFT;
} else {
kEvent = KeyEvent.KEYCODE_DPAD_RIGHT;
}
onKeyDown(kEvent, null);
return true;
}
2、在適配類 GalleryIndexAdapter主要完成幻燈片的循環(huán)播放，在getCount里面返回值返回Integer.MAX_VALUE，然后在getView里面根據(jù)position與傳進(jìn)來初始圖片個(gè)數(shù)進(jìn)行余數(shù)計(jì)算得到每次循環(huán)到哪張圖片。部分代碼如下：
@Override
public int getCount() {
// TODO Auto-generated method stub
return Integer.MAX_VALUE;
}
……
@Override
public View getView(int position, View convertView, ViewGroup arg2) {
// TODO Auto-generated method stub
ImageView imageView = new ImageView(context);
imageView.setBackgroundResource(imagList.get(position%imagList.size()));
imageView.setScaleType(ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT
, Gallery.LayoutParams.WRAP_CONTENT));
return imageView;
}
3、在可視界面里面實(shí)現(xiàn)邏輯控制，通過定時(shí)器定時(shí)刷新幻燈片，定時(shí)器通過定時(shí)發(fā)送消息，消息接受處理機(jī)制接收到消息之后，就模擬滑動(dòng)事件，調(diào)用Gallery的onFling方法實(shí)現(xiàn)圖片自動(dòng)切換效果。選擇按鈕的顯示效果（RadioButton）需要在Gallery的setOnItemSelectedListener進(jìn)行處理。
//定時(shí)器和事件處理5秒刷新一次幻燈片
/** 展示圖控制器，實(shí)現(xiàn)展示圖切換 */
final Handler handler_gallery = new Handler() {
public void handleMessage(Message msg) {
/* 自定義屏幕按下的動(dòng)作 */
MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),
SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,
89.333336f, 265.33334f, 0);
/* 自定義屏幕放開的動(dòng)作 */
MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),
SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,
300.0f, 238.00003f, 0);
myGallery.onFling(e2, e1, -800, 0);
/* 給gallery添加按下和放開的動(dòng)作，實(shí)現(xiàn)自動(dòng)滑動(dòng) */
super.handleMessage(msg);
}
};
protected void onResume() {
autogallery();
super.onResume();
};
private void autogallery() {
/* 設(shè)置定時(shí)器，每5秒自動(dòng)切換展示圖 */
Timer time = new Timer();
TimerTask task = new TimerTask() {
@Override
public void run() {
Message m = new Message();
handler_gallery.sendMessage(m);
}
};
time.schedule(task, 8000, 5000);
}
//指示按鈕和gallery初始化過程以及事件監(jiān)聽添加過程
//初始化
void init(){
myGallery = (DetailGallery)findViewById(R.id.myGallery);
gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup);
ArrayList<Integer> list = new ArrayList<Integer>();
list.add(R.drawable.banner1);
list.add(R.drawable.banner2);
list.add(R.drawable.banner3);
list.add(R.drawable.banner4);
GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context);
myGallery.setAdapter(adapter);
//設(shè)置小按鈕
gallery_point = new RadioButton[list.size()];
for (int i = 0; i < gallery_point.length; i++) {
layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null);
gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton);
gallery_point[i].setId(i);/* 設(shè)置指示圖按鈕ID */
int wh = Tool.dp2px(context, 10);
RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 設(shè)置指示圖大小
gallery_point[i].setLayoutParams(layoutParams);
layoutParams.setMargins(4, 0, 4, 0);// 設(shè)置指示圖margin值
gallery_point[i].setClickable(false);/* 設(shè)置指示圖按鈕不能點(diǎn)擊 */
layout.removeView(gallery_point[i]);//一個(gè)子視圖不能指定了多個(gè)父視圖
gallery_points.addView(gallery_point[i]);/* 把已經(jīng)初始化的指示圖動(dòng)態(tài)添加到指示圖的RadioGroup中 */
}
}
//添加事件
void addEvn(){
myGallery.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
// TODO Auto-generated method stub
gallery_points.check(gallery_point[arg2%gallery_point.length].getId());
}
@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
});
}
4、商品圖片滑動(dòng)實(shí)現(xiàn)過程：
圖片滑動(dòng)效果和上面的幻燈片效果非常的類似，只是在邏輯處理和界面上有一些小小的區(qū)別。
（1）適配器類GalleryAdapter.java上面進(jìn)行了圖片縮放處理，節(jié)省了內(nèi)存開銷，又可把圖片按照自己的要求縮放。
//由于是測試case，所以圖片都是寫死的為了區(qū)別，在position = 1的時(shí)候換了一張圖片
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img,
null);
Bitmap bitmap = null;
try {
if(position == 1 ){
bitmap = BitmapFactory.decodeStream(assetManager.open("xpic11247_s.jpg"));
imageView.setTag("xpic11247_s.jpg");
}
else{
bitmap = BitmapFactory.decodeStream(assetManager.open("item0_pic.jpg"));
imageView.setTag("item0_pic.jpg");
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 加載圖片之前進(jìn)行縮放
int width = bitmap.getWidth();
int height = bitmap.getHeight();
float newHeight = 200;
float newWidth = width*newHeight/height;
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// 取得想要縮放的matrix參數(shù)
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的圖片
Bitmap newbm = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
System.out.println(newbm.getHeight()+"-----------"+newbm.getWidth());
imageView.setImageBitmap(newbm);
// }
return imageView;
}
（2）添加了一個(gè)相框效果，如果圖片加載失敗，就會(huì)出現(xiàn)一個(gè)圖片壓縮之后大小相等的相框圖片。
<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/waterfall_image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/image_border" > </ImageView>
三、開發(fā)中遇到一些問題
1、
layout.removeView(gallery_point[i]);//一個(gè)子視圖不能指定了多個(gè)父視圖
如果需要把當(dāng)前子childview添加到另外一個(gè)view里面去，則必須在當(dāng)前的父View里面移除掉當(dāng)前的childView，如果不進(jìn)行這樣處理則會(huì)拋出Caused by: java.lang.IllegalStateException異常，提示The specified child already has a parent. You must call removeView() on the child's parent first.
2、在進(jìn)行圖片縮放的時(shí)候，記得處理好dp和px直接的轉(zhuǎn)換。
相關(guān)文章
Android 處理 View 重復(fù)點(diǎn)擊的多種方法
這篇文章主要介紹了Android 處理 View 重復(fù)點(diǎn)擊的多種方法，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-03-03
Android獲取當(dāng)前運(yùn)行的類名或者方法
這篇文章主要介紹了Android獲取當(dāng)前運(yùn)行的類名或者方法,涉及Android操作類與方法的技巧,需要的朋友可以參考下2015-05-05
Android實(shí)現(xiàn)類似微信的文本輸入框 效果
本文給大家介紹一下微信的文本輸入框是如何實(shí)現(xiàn)的，其實(shí)那只是個(gè)普通的文本框設(shè)了一個(gè)特殊的背景而已。具體微信怎么實(shí)現(xiàn)的，大家可以反編譯下，這里介紹下如何實(shí)現(xiàn)這個(gè)背景2017-05-05
Android中定時(shí)執(zhí)行任務(wù)的3種實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄狝ndroid中定時(shí)執(zhí)行任務(wù)的3種實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
Android程序開發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
流行的應(yīng)用的導(dǎo)航一般分為兩種，一種是底部導(dǎo)航，一種是側(cè)邊欄。本文給大家介紹Fragment實(shí)現(xiàn)底部導(dǎo)航欄，對(duì)Fragment實(shí)現(xiàn)底部導(dǎo)航欄相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
Android 第三方應(yīng)用接入微信平臺(tái)研究情況分享(二)
微信平臺(tái)開放后倒是挺火的，許多第三方應(yīng)用都想試下,這里把我的整個(gè)研究情況給出來，希望可以共同學(xué)習(xí),感興趣的朋友可以了解下2013-01-01
Android用文件存儲(chǔ)數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Android用文件存儲(chǔ)數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android Studio設(shè)置顏色拾色器工具Color Picker教程
這篇文章主要介紹了Android Studio設(shè)置顏色拾色器工具Color Picker教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android的2D變形（包括縮放，扭曲，平移，旋轉(zhuǎn)等）可以通過Matrix來實(shí)現(xiàn),本文研究了一下;接下來就將我這倆天研究的東西和大家分享下，先來看看Matrix的用法感興趣的你可不要錯(cuò)過了哈2013-02-02
Android 封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例
下面小編就為大家分享一篇Android封裝Okhttp+Retrofit+RxJava,外加攔截器實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01