Android實現(xiàn)圖片輪播切換實例代碼
更新時間：2015年12月11日 11:43:35 投稿：mrr
利用Android的ViewFlipper和AnimationUtils實現(xiàn)圖片帶有動畫的輪播切換，其中當(dāng)點擊“上一張”圖片時，切換到上一張圖片；當(dāng)點擊“下一張”圖片時，切換到下一張圖片，本文給大家介紹Android實現(xiàn)圖片輪播切換實例代碼，需要的朋友參考下
利用Android的ViewFlipper和AnimationUtils實現(xiàn)圖片帶有動畫的輪播切換，其中當(dāng)點擊“上一張”圖片時，切換到上一張圖片；當(dāng)點擊“下一張”圖片時，切換到下一張圖片。其效果圖如下：
設(shè)置布局文件，其內(nèi)容如下：
activity_image_flipper_shade.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:paddingBottom="@dimen/activity_optopns_vertical_margin" android:paddingLeft="@dimen/activity_options_horizontal_margin" android:paddingRight="@dimen/activity_options_horizontal_margin" android:paddingTop="@dimen/activity_optopns_vertical_margin" tools:context=".ImageFlipperActivity" > <RelativeLayout android:id="@id/rl_image_flipper_shade_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/btn_image_flipper_shade_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_marginBottom="10dp" android:background="@drawable/custom_button" android:text="@string/back" android:textColor="@color/textColor" android:textSize="16sp" android:visibility="visible" /> <TextView android:id="@id/tv_image_flipper_shade_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/image_flipper_shade" android:textColor="@color/textColor" android:textSize="30sp" android:textStyle="bold" /> </RelativeLayout> <LinearLayout android:id="@id/ll_image_flipper_shade_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/rl_image_flipper_shade_title" android:layout_marginBottom="20dp" android:layout_marginTop="20dp" android:gravity="center" android:orientation="vertical" > <ViewFlipper android:id="@id/vf_image_flipper_shade" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </RelativeLayout>
動畫效果配置文件，其內(nèi)容如下：
A.push_left_in.xml（從左邊進(jìn)入屏幕）
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <!-- translate：畫面轉(zhuǎn)換位置移動動畫效果 --> <translate android:duration="500" android:fromXDelta="100%p" android:toXDelta="0" /> <!-- alpha：漸變透明度動畫效果 --> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> <!-- scale：漸變尺寸伸縮動畫效果 --> <!-- rotate：畫面轉(zhuǎn)換位置移動動畫效果 --> </set> B.push_left_out.xml（從左邊退出屏幕） <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set> C.push_right_in.xml（從右邊進(jìn)入屏幕） <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="-100%p" android:toXDelta="0" /> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> </set> D.push_right_out.xml（從右邊退出屏幕） <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="500" android:fromXDelta="0" android:toXDelta="100%p" /> <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.1" /> </set>
實現(xiàn)圖片輪播切換的類為ImageFlipperShadeActivity.java，其內(nèi)容為：
/**
*
*/
package com.i114gbox.aglieguy;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.PixelFormat;
import android.os.Bundle;
import android.os.Handler;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.view.WindowManager.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ViewFlipper;
import com.i114gbox.sdk.activity.I114gBoxActivity;
import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;
import com.i114gbox.sdk.utils.I114gBoxLogUtils;
import com.i114gbox.sdk.utils.I114gBoxResourceUtils;
/**
* 圖片滑動漸變Activity
*
* @author SJC
*
*/
public class ImageFlipperShadeActivity extends I114gBoxActivity {
private static String TAG = "ImageFlipperShadeActivity";
private Context ctx = null;
private ViewFlipper viewFlipper;// 視圖輪播
private WindowManager windowManager;// 窗口管理器
private WindowManager.LayoutParams layoutParams;// 布局參數(shù)
private boolean isHide;
private int mAlpha = 0;
// 左邊圖片視圖
private ImageView leftImageView;
// 右邊圖片視圖
private ImageView rightImageView;
private int WHAT_HIDE = 0;
private int WHAT_SHOW = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
I114gBoxLogUtils.d(TAG, "The onCreate method execute.");
super.onCreate(savedInstanceState);
I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activity
ctx = this;
setContentView(I114gBoxResourceUtils.getLayoutId(ctx,
"activity_image_flipper_shade"));
viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(
ctx, "vf_image_flipper_shade"));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_01")));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_02")));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_03")));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_04")));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_05")));
viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_06")));
Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(
ctx, "btn_image_flipper_shade_back"));
backButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
initImageButtonView();// 初始化ImageButton視圖
}
/** 添加ImageView控件 **/
private View addImageView(int id) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(id);
return imageView;
}
/** 初始化ImageButton視圖 **/
private void initImageButtonView() {
windowManager = (WindowManager) ctx
.getSystemService(Context.WINDOW_SERVICE);
layoutParams = new WindowManager.LayoutParams();
// 設(shè)置窗口類型
layoutParams.type = LayoutParams.TYPE_PHONE;
// 設(shè)置圖片格式，效果為背景透明
layoutParams.format = PixelFormat.RGBA_8888;
// 設(shè)置FLAG參數(shù)，觸摸失效或無法獲取焦點
layoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
| LayoutParams.FLAG_NOT_FOCUSABLE;
// 初始化話坐標(biāo)值
layoutParams.x = 0;
layoutParams.y = 0;
// 設(shè)置窗口的寬度和高度
layoutParams.width = 50;
layoutParams.height = 50;
// 創(chuàng)建左邊和右邊按鈕
createLeftButtonView();
createRightButtonView();
}
/** 創(chuàng)建左邊按鈕 **/
private void createLeftButtonView() {
leftImageView = new ImageView(ctx);
leftImageView.setBackgroundResource(I114gBoxResourceUtils
.getDrawableId(ctx, "flipper_left"));
leftImageView.setAlpha(0);// 完全透明
// 添加點擊監(jiān)聽事件
leftImageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 設(shè)置進(jìn)入屏幕的動畫
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,
I114gBoxResourceUtils.getAnimId(ctx, "push_left_in")));
// 設(shè)置退出屏幕的動畫
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,
I114gBoxResourceUtils.getAnimId(ctx, "push_left_out")));
// 顯示下一個圖層
viewFlipper.showNext();
}
});
// 設(shè)置布局為左邊垂直居中
layoutParams.gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;
// 將左邊按鈕添加到窗口中
windowManager.addView(leftImageView, layoutParams);
}
/** 創(chuàng)建右邊按鈕 **/
private void createRightButtonView() {
rightImageView = new ImageView(ctx);
rightImageView.setBackgroundResource(I114gBoxResourceUtils.getDrawableId(
ctx, "flipper_right"));
rightImageView.setAlpha(0);// 完全透明
// 添加點擊監(jiān)聽事件
rightImageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 設(shè)置進(jìn)入屏幕的動畫
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx,
I114gBoxResourceUtils.getAnimId(ctx, "push_right_in")));
// 設(shè)置退出屏幕的動畫
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx,
I114gBoxResourceUtils.getAnimId(ctx, "push_right_out")));
// 顯示上一個圖層
viewFlipper.showPrevious();
}
});
// 設(shè)置布局為右邊垂直居中
layoutParams.gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;
// 將右邊按鈕添加到窗口中
windowManager.addView(rightImageView, layoutParams);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
I114gBoxLogUtils.d(TAG, "The onTouchEvent method execute.");
switch (event.getAction()) {
// 移動事件
case MotionEvent.ACTION_MOVE:
break;
// 按下事件
case MotionEvent.ACTION_DOWN:
// 顯示ImageButton視圖
showImageButtonView();
break;
// 按下后松開事件
case MotionEvent.ACTION_UP:
// 隱藏ImageButton視圖
hideImageButtonView();
break;
default:
break;
}
return true;
}
/** 顯示ImageButton視圖 **/
private void showImageButtonView() {
isHide = true;
mHandler.sendEmptyMessage(WHAT_SHOW);
}
/** 隱藏ImageButton視圖 **/
private void hideImageButtonView() {
new Thread() {
@Override
public void run() {
try {
Thread.sleep(1500);
isHide = false;
mHandler.sendEmptyMessage(WHAT_HIDE);
} catch (InterruptedException e) {
I114gBoxLogUtils.e(TAG, e.getMessage());
}
};
}.start();
}
/** 處理異步消息 **/
@SuppressLint("HandlerLeak")
private Handler mHandler = new Handler() {
@Override
public void handleMessage(android.os.Message msg) {
// 當(dāng)接收到顯示左右圖片的消息時
if (msg.what == 1 && mAlpha < 255) {
mAlpha += 50;
if (mAlpha > 255)
mAlpha = 255;
// 設(shè)置透明度
leftImageView.setAlpha(mAlpha);
// 刷新視圖
leftImageView.invalidate();
rightImageView.setAlpha(mAlpha);
rightImageView.invalidate();
if (!isHide && mAlpha < 255)
mHandler.sendEmptyMessageDelayed(WHAT_SHOW, 100);
}
// 當(dāng)接收到隱藏左右圖片的消息時
else if (msg.what == 0 && mAlpha > 0) {
mAlpha -= 10;
if (mAlpha < 0)
mAlpha = 0;
// 設(shè)置透明度
leftImageView.setAlpha(mAlpha);
// 刷新視圖
leftImageView.invalidate();
rightImageView.setAlpha(mAlpha);
rightImageView.invalidate();
if (isHide && mAlpha > 0)
mHandler.sendEmptyMessageDelayed(WHAT_HIDE, 100);
}
};
};
@Override
protected void onDestroy() {
I114gBoxLogUtils.d(TAG, "The onDestory method execute.");
super.onDestroy();
// 移除ImageView控件
windowManager.removeView(leftImageView);
windowManager.removeView(rightImageView);
};
}
腳本之家友情提醒大家需要注意事項如下：
需要設(shè)置WindowManager的屬性，包含type、format和flags等等創(chuàng)建左右邊圖片動畫加載效果，并實現(xiàn)onTouchEvent事件，其中MotionEvent.ACTION_DOWN為按下監(jiān)聽事件，MotionEvent.ACTION_UP為按下后松開事件
以上是本文給大家敘述的Android實現(xiàn)圖片輪播切換實例代碼，希望可以幫助到大家。
您可能感興趣的文章:
- Android開發(fā)之使用ViewPager實現(xiàn)圖片左右滑動切換效果
- Android自定義ImageView實現(xiàn)點擊兩張圖片切換效果
- Android點擊Button實現(xiàn)切換點擊圖片效果的示例
- Android編程單擊圖片實現(xiàn)切換效果的方法
- Android實現(xiàn)滑動屏幕切換圖片
- Android中ViewPager組件的基本用法及實現(xiàn)圖片切換的示例
- Android編程實現(xiàn)圖片背景漸變切換與圖層疊加效果
- Android 圖片切換器（dp、sp、px） 的單位轉(zhuǎn)換器
- Android控件ImageSwitcher實現(xiàn)左右圖片切換功能
- Android實現(xiàn)左右滑動切換圖片
相關(guān)文章
Android studio 實現(xiàn)隨機(jī)位置畫10個隨機(jī)大小的五角星的代碼
這篇文章主要介紹了Android studio 實現(xiàn)隨機(jī)位置畫10個隨機(jī)大小的五角星，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
大部分的金融App會對默認(rèn)的數(shù)字鍵盤進(jìn)行處理，以實現(xiàn)自定義的數(shù)字安全鍵盤?；诖?，本文對對微信數(shù)字鍵盤樣式進(jìn)行了仿寫，實現(xiàn)了一套自定義的數(shù)字安全鍵盤（支持隨機(jī)數(shù)字分布）。2021-05-05
這篇文章主要給大家介紹了關(guān)于Android實現(xiàn)長圖文截圖功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
HorizontalScrollView水平滾動控件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了HorizontalScrollView水平滾動控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Android 渲染機(jī)制深入理解的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了一款簡單靈活的Android下拉篩選框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細(xì)介紹了超實用的android網(wǎng)絡(luò)工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Android入門之使用OKHttp組件訪問網(wǎng)絡(luò)資源
這篇文章主要為大家詳細(xì)介紹了Android如何使用OKHttp組件訪問網(wǎng)絡(luò)資源功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的可以參考一下2022-12-12
Flutter使用AnimatedOpacity實現(xiàn)圖片漸現(xiàn)動畫
其實在Flutter中提供了一些封裝好的動畫組件，以便我們快速應(yīng)用。本文將利用其中的AnimatedOpacity組件實現(xiàn)圖片漸現(xiàn)動畫效果，需要的可以參考一下2022-03-03
本篇文章是對在Android中 日期時間格式國際化的實現(xiàn)代碼進(jìn)行了分析介紹。需要的朋友參考下2013-05-05