移動開發之實現圖片輪播效果
來自： http://www.jcodecraeer.com//a/anzhuokaifa/androidkaifa/2016/0226/3997.html
導語：前天發了一篇比較輕松愉快的文章，后臺就有人發消息問我了，這是技術分享嗎？我可以負責任的說，我們這個號不僅分享技術，也分享與程序員有關的幽默搞笑的文章，包括從程序員的角度去吐槽的文章，在工作壓力這么大的情況，希望可以幫助程序員提高技術的同時，也可以宣泄壓力，放松精神。讓大家生活的更加美好。這不，我承諾的技術文章來了！
我記得一周前有人在程序員交流群里問過，有沒有圖片輪播的demo，當時我說自己試著去寫寫，一周后我再寫個demo，分享給大家。今天我就是來兌現承諾了。其實在公眾號后臺和群里發消息的人很多，提問題的也很多，我都盡量去看，有時間和有能力我會盡量回復，和寫一些有關的技術分享，爭取能夠幫助到大家。
對于圖片輪播實現方法，各種各樣，今天我分享一下我的實現思路，我是用的ViewFlipper控件，重寫了里面的方法，增加了手勢判斷，既可以做到自動輪播，也可以使用手勢左右滑動輪播，效果應該還是可以的。因為寫的著急，可能注釋少，但是相對來說還是很簡單的。廢話不多說了，直接上代碼。
效果圖如下：
第一步：重寫ViewFlipper
這里的重寫主要是重寫ViewFlipper里的兩個方法，分別是showNext()和showPrevious()，重寫這兩個方法的目的是在判斷手勢滑動的時候，調用這里的方法。我們在重寫的時候，也定義了一個回調的接口，OnViewFlipperChangeState，在ViewFlipper中重寫的方法中調用接口里的方法，進行回調，并處理圖片集合或數組里的圖片，從而實現了循環輪播。
代碼如下：
public class AdViewFlipper extends ViewFlipper { private OnViewFlipperChangeState listener; public AdViewFlipper(Context context, AttributeSet attrs) { super(context, attrs);
} public AdViewFlipper(Context context) { super(context);
} @Override
public void showNext() { super.showNext(); if (listener != null)
listener.changeNext();
} @Override
public void showPrevious() { super.showPrevious(); if (listener != null)
listener.changePre();
} public interface OnViewFlipperChangeState { void changePre(); void changeNext();
} public void setOnViewFlipperChangeState(OnViewFlipperChangeState listener) { this.listener = listener;
}
}
第二步：在Activity中實現定義的接口，并實現OnGestureListener和OnTouchListener接口來判斷手勢。
代碼如下：
public class MainActivity extends Activity implements OnGestureListener, OnTouchListener, OnViewFlipperChangeState { private LinearLayout adPointLayout; private AdViewFlipper adVf; private ImageView[] pointIvs; private int adIndex = 0; private GestureDetector detector; private String[] strs = new String[6]; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adPointLayout = (LinearLayout) findViewById(R.id.ad_point_layout);
adVf = (AdViewFlipper) findViewById(R.id.ad_view_flipper);
adVf.setOnTouchListener(this);
adVf.setFlipInterval(5000);
adVf.setLongClickable(true);// 設置長按事件
adVf.setAutoStart(true);// 設置是否自動播放，默認不自動播放
detector = new GestureDetector(this);
setBanner();
adVf.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
adVf.showNext();// 向右滑動
} private void setBanner() {
adVf.removeAllViews();
pointIvs = new ImageView[strs.length];
adPointLayout.removeAllViews();
setAdPoints();
adVf.setOnViewFlipperChangeState(this); for (int i = 0; i < strs.length; i++) { //這里從我們獲得的圖片數組或者集合中傳入獲取的圖片鏈接，這里我就傳null了。
adVf.addView(getImageView(null));
}
} private void setAdPoints() { for (int i = 0; i < pointIvs.length; i++) {
pointIvs[i] = new ImageView(this); if (i == 0) {
pointIvs[i].setImageResource(R.drawable.ad_point_pressed);
} else {
pointIvs[i].setImageResource(R.drawable.ad_point_normal);
}
LinearLayout.LayoutParams pointIvParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
pointIvParams.setMargins(10, 0, 0, 0);
pointIvs[i].setLayoutParams(pointIvParams);
adPointLayout.addView(pointIvs[i]);
}
} private ImageView getImageView(String url) {
ImageView imageView = new ImageView(this);
imageView.setScaleType(ScaleType.CENTER_CROP);
imageView.setLayoutParams(new LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
imageView.setImageResource(R.drawable.test); return imageView;
} @Override
public void changePre() { if (adIndex > 0) {
adIndex--;
} else {
adIndex = pointIvs.length - 1;
} for (int i = 0; i < pointIvs.length; i++) { if (adIndex == i) {
pointIvs[i].setImageResource(R.drawable.ad_point_pressed);
} else {
pointIvs[i].setImageResource(R.drawable.ad_point_normal);
}
}
} @Override
public void changeNext() { if (adIndex < pointIvs.length - 1) {
adIndex++;
} else {
adIndex = 0;
} for (int i = 0; i < pointIvs.length; i++) { if (adIndex == i) {
pointIvs[i].setImageResource(R.drawable.ad_point_pressed);
} else {
pointIvs[i].setImageResource(R.drawable.ad_point_normal);
}
}
} @Override public boolean onTouch(View v, MotionEvent event) { return detector.onTouchEvent(event);
} @Override
public boolean onDown(MotionEvent arg0) { return false;
} @Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) { if (e1.getX() - e2.getX() > 120) {
adVf.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
adVf.showNext();// 向右滑動
return true;
} else if (e1.getX() - e2.getX() < -120) {
adVf.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_in));
adVf.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_out));
adVf.showPrevious();// 向左滑動
return true;
} return false;
} @Override
public void onLongPress(MotionEvent arg0) {
} @Override
public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2, float arg3) { return false;
} @Override
public void onShowPress(MotionEvent arg0) {
} @Override
public boolean onSingleTapUp(MotionEvent arg0) { return false;
}
} 第三步：要想有輪播滑動的動畫效果，我們就得寫一個anim的文件，從而才會有這種效果。
代碼如下：
1、push_left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="500"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set>
2、push_left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500"/> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" /> </set>
3、push_right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="500"/> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" /> </set>
4、push_right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="500"/> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="500" /> </set>
到這里基本就完事了，其實很簡單，誰有更好的實現方法，歡迎大家共享出來，一起共同學習進步。
移動開發者的聚集地，公眾號“非著名程序員”，每天一篇原創技術分享和移動互聯網知識分享，微信公眾號：smart_android
本文由用戶 hitlbg 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！