場景
效果
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取編程相關電子書、教程推送與免費下載，
實作
將需要滾動查看的照片復制到res/drawable下
這里只準備了兩張bg01.jpg和bg02.jpg
在滾動時需要用到左進右出和左出右進的影片，所以在res下新建anim目錄，在目錄下新建四種影片的xml檔案
具體代碼參照示例代碼，
然后打開布局檔案activity_image_switcher.xml
將布局修改為相對布局RelativeLayout,并添加一個ImageSwitcher,設定其ID屬性，
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ImageSwitcherActivity"> <ImageSwitcher android:id="@+id/imageSwitcher" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
然后來到ImageSwitcherActivity
首先宣告一些私有變數，用來存盤照片資源陣列、陣列索引、滑鼠放下和離開的X坐標等，
//圖片資源陣列 private int[] arrayPicture = new int[]{ R.drawable.bg01,R.drawable.bg02 }; private ImageSwitcher imageSwitcher; private int index; private float touchDowmX; private float touchUpX;
然后通過id獲取ImageSwitcher并設定其視圖工廠
//獲取imageSwitch imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher); //設定視圖工廠 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() { @Override public View makeView() { ImageView imageView = new ImageView(ImageSwitcherActivity.this); imageView.setImageResource(arrayPicture[index]); return imageView; } });
然后設定ImageSwitcher的觸碰的監聽器
通過
event.getAction() == MotionEvent.ACTION_DOWN
判斷如果是滑鼠按下，則記錄滑鼠按下時的坐標，
否則通過
event.getAction() ==MotionEvent.ACTION_UP
判斷如果是滑鼠抬起，則記錄抬起時的X坐標，
此時再通過
touchUpX-touchDowmX >100
即抬起時的X坐標減去落下時的X坐標大于100則認為是從左往右滑動，
此時圖片的索引通過三目運算式進行判斷，
index = index==0?arrayPicture.length-1:index-1;
如果當前索引為0，即為第一張照片時，則從左往右滑動后，應該是最后一張照片，即照片索引為圖片陣列的長度減一，
然后通過
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left));
設定左邊滑進的影片
再通過
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right));
設定右邊滑出的影片
最后通過
imageSwitcher.setImageResource(arrayPicture[index]);
設定圖片索引，
同理如果通過
touchDowmX - touchUpX >100
則認為是從右往左滑，
同樣通過三目運算式
index = index==arrayPicture.length -1?0:index+1;
如果是最后一張照片，即索引為陣列的長度 -1 ,則再往左滑 該是第一張照片，即索引為0 否則就索引+1，
然后通過
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right));
設定右邊滑進的影片
再通過
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left));
設定左邊滑出的影片
最后通過
imageSwitcher.setImageResource(arrayPicture[index]);
設定圖片
完整示例代碼
package com.badao.relativelayouttest; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.ViewSwitcher; public class ImageSwitcherActivity extends AppCompatActivity { //圖片資源陣列 private int[] arrayPicture = new int[]{ R.drawable.bg01,R.drawable.bg02 }; private ImageSwitcher imageSwitcher; private int index; private float touchDowmX; private float touchUpX; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_switcher); //獲取imageSwitch imageSwitcher =(ImageSwitcher) findViewById(R.id.imageSwitcher); //設定視圖工廠 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() { @Override public View makeView() { ImageView imageView = new ImageView(ImageSwitcherActivity.this); imageView.setImageResource(arrayPicture[index]); return imageView; } }); //設定imageSwitcher 觸碰監聽器 imageSwitcher.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { //如果是滑鼠按下 if(event.getAction() == MotionEvent.ACTION_DOWN) { //記錄按下時的X坐標 touchDowmX = event.getX(); return true; }else if(event.getAction() ==MotionEvent.ACTION_UP) //如果是滑鼠抬起 { //記錄抬起時的X坐標 touchUpX = event.getX(); //如果是從左向右滑動 if(touchUpX-touchDowmX >100) { //如果是第一張圖片則從左向右滑后下標是陣列的長度-1，即最后一張，如果不是則索引-1 index = index==0?arrayPicture.length-1:index-1; //設定左邊滑進的影片 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_left)); //設定右邊滑出的影片 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_right)); //設定圖片索引 imageSwitcher.setImageResource(arrayPicture[index]); } //否則認為是從右往左滑 else if(touchDowmX - touchUpX >100) { //如果是最后一張照片，即索引為陣列的長度 -1 ,則再往左滑 該是第一張照片，即索引為0 否則就索引+1 index = index==arrayPicture.length -1?0:index+1; //設定右邊滑進的影片 imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_in_right)); //設定左邊滑出的影片 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(ImageSwitcherActivity.this, R.anim.slide_out_left)); //設定圖片索引 imageSwitcher.setImageResource(arrayPicture[index]); } } return false; } }); } }
示例代碼下載
關注公眾號：
霸道的程式猿
回復：
Android相冊滑動代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/39277.html
標籤：Android