Android幻燈片效果實現-Gallery
作者：佚名
我覺得在開發中，對一些控件的復用肯定是很多的，在首頁（非載入頁）一般都會有一個幻燈片效果，既可以放廣告也可以放推薦，如果圖片設計的好看，效果一般都會不錯。
最近下載幾款手機應用研究了下，發了有些自定義控件驚人的相似，所以我覺得在以后的開發中，對一些控件的復用肯定是很多的，在首頁（非載入頁）一般都會有一個幻燈片效果，既可以放廣告也可以放推薦，如果圖片設計的好看，效果一般都會不錯，既然用到了Gallery，也附帶把相框效果的例子寫一寫（淘寶詳情界面的商品圖片滑動展示）
一、效果圖展示
（1）幻燈片效果展示：
（2）商品圖片滑動展示
查看大圖：
二、部分代碼說明
（1）幻燈片效果的實現：
自定義Gallery：DetailGallery.java
可視界面：ImgSwitchActivity.java
適配類：GalleryIndexAdapter.java
1）自定義Gallery主要重寫onFling通過按下和松手的位置不同比較是向右移動還是向左移動，部分代碼如下：
- 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主要完成幻燈片的循環播放，在getCount里面返回值返回Integer.MAX_VALUE，然后在getView里面根據position與傳進來初始圖片個數進行余數計算得到每次循環到哪張圖片。部分代碼如下：
- @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）在可視界面里面實現邏輯控制，通過定時器定時刷新幻燈片，定時器通過定時發送消息，消息接受處理機制接收到消息之后，就模擬滑動事件，調 用Gallery的onFling方法實現圖片自動切換效果。選擇按鈕的顯示效果（RadioButton）需要在Gallery的 setOnItemSelectedListener進行處理。
- //定時器和事件處理5秒刷新一次幻燈片
- /** 展示圖控制器，實現展示圖切換 */
- final Handler handler_gallery = new Handler() {
- public void handleMessage(Message msg) {
- /* 自定義屏幕按下的動作 */
- MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),
- SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,
- 89.333336f, 265.33334f, 0);
- /* 自定義屏幕放開的動作 */
- MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),
- SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,
- 300.0f, 238.00003f, 0);
- myGallery.onFling(e2, e1, -800, 0);
- /* 給gallery添加按下和放開的動作，實現自動滑動 */
- super.handleMessage(msg);
- }
- };
- protected void onResume() {
- autogallery();
- super.onResume();
- };
- private void autogallery() {
- /* 設置定時器，每5秒自動切換展示圖 */
- 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初始化過程以及事件監聽添加過程
- //初始化
- 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);
- //設置小按鈕
- 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);/* 設置指示圖按鈕ID */
- int wh = Tool.dp2px(context, 10);
- RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 設置指示圖大小
- gallery_point[i].setLayoutParams(layoutParams);
- layoutParams.setMargins(4, 0, 4, 0);// 設置指示圖margin值
- gallery_point[i].setClickable(false);/* 設置指示圖按鈕不能點擊 */
- layout.removeView(gallery_point[i]);//一個子視圖不能指定了多個父視圖
- gallery_points.addView(gallery_point[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
- }
- });
- }
（2）商品圖片滑動實現過程：
圖片滑動效果和上面的幻燈片效果非常的類似，只是在邏輯處理和界面上有一些小小的區別。
1）適配器類GalleryAdapter.java上面進行了圖片縮放處理，節省了內存開銷，又可把圖片按照自己的要求縮放。
- //由于是測試case，所以圖片都是寫死的為了區別，在position = 1的時候換了一張圖片
- 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();
- }
- // 加載圖片之前進行縮放
- 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參數
- 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）添加了一個相框效果，如果圖片加載失敗，就會出現一個圖片壓縮之后大小相等的相框圖片。
- <?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>
三、開發中遇到一些問題
（1）layout.removeView(gallery_point[i]);//一個子視圖不能指定了多個父視圖
如果需要把當前子childview添加到另外一個view里面去，則必須在當前的父View里面移除掉當前的childView，如果不進行這樣處理則 會拋出Caused by: java.lang.IllegalStateException異常，提示The specified child already has a parent. You must call removeView() on the child's parent first.
責任編輯：閆佳明
來源：
oschina
