Android實(shí)現(xiàn)圖片輪播切換實(shí)例代碼
利用Android的ViewFlipper和AnimationUtils實(shí)現(xiàn)圖片帶有動(dòng)畫(huà)的輪播切換,其中當(dāng)點(diǎn)擊“上一張”圖片時(shí),切換到上一張圖片;當(dāng)點(diǎn)擊“下一張”圖片時(shí),切換到下一張圖片。其效果圖如下:
設(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>
動(dòng)畫(huà)效果配置文件,其內(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:畫(huà)面轉(zhuǎn)換位置移動(dòng)動(dòng)畫(huà)效果 --> <translate android:duration="500" android:fromXDelta="100%p" android:toXDelta="0" /> <!-- alpha:漸變透明度動(dòng)畫(huà)效果 --> <alpha android:duration="500" android:fromAlpha="0.1" android:toAlpha="1.0" /> <!-- scale:漸變尺寸伸縮動(dòng)畫(huà)效果 --> <!-- rotate:畫(huà)面轉(zhuǎn)換位置移動(dòng)動(dòng)畫(huà)效果 --> </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>
實(shí)現(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; /** * 圖片滑動(dòng)漸變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ù),觸摸失效或無(wú)法獲取焦點(diǎn) 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);// 完全透明 // 添加點(diǎn)擊監(jiān)聽(tīng)事件 leftImageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 設(shè)置進(jìn)入屏幕的動(dòng)畫(huà) viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx, I114gBoxResourceUtils.getAnimId(ctx, "push_left_in"))); // 設(shè)置退出屏幕的動(dòng)畫(huà) viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx, I114gBoxResourceUtils.getAnimId(ctx, "push_left_out"))); // 顯示下一個(gè)圖層 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);// 完全透明 // 添加點(diǎn)擊監(jiān)聽(tīng)事件 rightImageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 設(shè)置進(jìn)入屏幕的動(dòng)畫(huà) viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ctx, I114gBoxResourceUtils.getAnimId(ctx, "push_right_in"))); // 設(shè)置退出屏幕的動(dòng)畫(huà) viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ctx, I114gBoxResourceUtils.getAnimId(ctx, "push_right_out"))); // 顯示上一個(gè)圖層 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()) { // 移動(dòng)事件 case MotionEvent.ACTION_MOVE: break; // 按下事件 case MotionEvent.ACTION_DOWN: // 顯示ImageButton視圖 showImageButtonView(); break; // 按下后松開(kāi)事件 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)接收到顯示左右圖片的消息時(shí) 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)接收到隱藏左右圖片的消息時(shí) 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); }; }
腳本之家友情提醒大家需要注意事項(xiàng)如下:
需要設(shè)置WindowManager的屬性,包含type、format和flags等等創(chuàng)建左右邊圖片動(dòng)畫(huà)加載效果,并實(shí)現(xiàn)onTouchEvent事件,其中MotionEvent.ACTION_DOWN為按下監(jiān)聽(tīng)事件,MotionEvent.ACTION_UP為按下后松開(kāi)事件
以上是本文給大家敘述的Android實(shí)現(xiàn)圖片輪播切換實(shí)例代碼,希望可以幫助到大家。
- Android開(kāi)發(fā)之使用ViewPager實(shí)現(xiàn)圖片左右滑動(dòng)切換效果
- Android自定義ImageView實(shí)現(xiàn)點(diǎn)擊兩張圖片切換效果
- Android點(diǎn)擊Button實(shí)現(xiàn)切換點(diǎn)擊圖片效果的示例
- Android編程單擊圖片實(shí)現(xiàn)切換效果的方法
- Android實(shí)現(xiàn)滑動(dòng)屏幕切換圖片
- Android中ViewPager組件的基本用法及實(shí)現(xiàn)圖片切換的示例
- Android編程實(shí)現(xiàn)圖片背景漸變切換與圖層疊加效果
- Android 圖片切換器(dp、sp、px) 的單位轉(zhuǎn)換器
- Android控件ImageSwitcher實(shí)現(xiàn)左右圖片切換功能
- Android實(shí)現(xiàn)左右滑動(dòng)切換圖片
相關(guān)文章
Android studio 實(shí)現(xiàn)隨機(jī)位置畫(huà)10個(gè)隨機(jī)大小的五角星的代碼
這篇文章主要介紹了Android studio 實(shí)現(xiàn)隨機(jī)位置畫(huà)10個(gè)隨機(jī)大小的五角星,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05Android實(shí)現(xiàn)長(zhǎng)圖文截圖功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Android實(shí)現(xiàn)長(zhǎng)圖文截圖功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11HorizontalScrollView水平滾動(dòng)控件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了HorizontalScrollView水平滾動(dòng)控件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Android實(shí)現(xiàn)簡(jiǎn)單下拉篩選框
這篇文章主要為大家詳細(xì)介紹了一款簡(jiǎn)單靈活的Android下拉篩選框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10超實(shí)用的android網(wǎng)絡(luò)工具類
這篇文章主要為大家詳細(xì)介紹了超實(shí)用的android網(wǎng)絡(luò)工具類,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Android入門(mén)之使用OKHttp組件訪問(wèn)網(wǎng)絡(luò)資源
這篇文章主要為大家詳細(xì)介紹了Android如何使用OKHttp組件訪問(wèn)網(wǎng)絡(luò)資源功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2022-12-12Flutter使用AnimatedOpacity實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫(huà)
其實(shí)在Flutter中提供了一些封裝好的動(dòng)畫(huà)組件,以便我們快速應(yīng)用。本文將利用其中的AnimatedOpacity組件實(shí)現(xiàn)圖片漸現(xiàn)動(dòng)畫(huà)效果,需要的可以參考一下2022-03-03Android日期時(shí)間格式國(guó)際化的實(shí)現(xiàn)代碼
本篇文章是對(duì)在Android中 日期時(shí)間格式國(guó)際化的實(shí)現(xiàn)代碼進(jìn)行了分析介紹。需要的朋友參考下2013-05-05