初学Android,不得不承认Android在UI效果实现上的强大,完全不在html5之下,不过这还得归功于Android丰富的SDK,以下尝试借助ViewFlipper类来实现通过手势滑动图片的效果,先上Java代码:
package com.example.sportdemo;import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;public class MainActivity extends Activity implements OnTouchListener, OnGestureListener {
private ViewFlipper mViewFlipper;
private GestureDetector mGestureDetector;@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);mViewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
mGestureDetector = new GestureDetector(this, this);
mViewFlipper.setOnTouchListener(this);
}@Override
public boolean onTouch(View v, MotionEvent event) {
return mGestureDetector.onTouchEvent(event);
}@Override
public boolean onDown(MotionEvent e) {
return true;
}@Override
public void onShowPress(MotionEvent e) {}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
return false;
}@Override
public void onLongPress(MotionEvent e) {}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2,
float velocityX, float velocityY) {
if (e1.getX() > e2.getX()) {
showNext();
}
else if (e1.getX() < e2.getX()) {
showPrev();
}return false;
}private void showPrev() {
if (mViewFlipper.getChildCount() <= 1) {
return;
}mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
mViewFlipper.showPrevious();
}private void showNext() {
if (mViewFlipper.getChildCount() <= 1) {
return;
}mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
mViewFlipper.showNext();
}
}
这里强调一点, onDown回调函数要返回true,否则onFling会不被调用。
Xml布局文件:
<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content" ><RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" ><ImageView
android:id="@+id/image01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/ad_text01"
android:src="@drawable/image01" /><TextView
android:id="@+id/text01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image01"
android:gravity="center_horizontal"
android:text="@string/ad_text01" /></RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" ><ImageView
android:id="@+id/image02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/image02"
android:contentDescription="@string/ad_text02" /><TextView
android:id="@+id/text02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image02"
android:gravity="center_horizontal"
android:text="@string/ad_text02" /></RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" ><ImageView
android:id="@+id/image03"
android:layout_width="match_parent"android:layout_height="wrap_content"
android:src="@drawable/image03"
android:contentDescription="@string/ad_text03" /><TextView
android:id="@+id/text03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image03"
android:gravity="center_horizontal"
android:text="@string/ad_text03" /></RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" ><ImageView
android:id="@+id/image04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/image04"
android:contentDescription="@string/ad_text04" /><TextView
android:id="@+id/text04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/image04"
android:gravity="center_horizontal"
android:text="@string/ad_text04" /></RelativeLayout>
</ViewFlipper>
Xml动画文件:
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="600" />
</set>
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="600" />
</set>
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="600" />
</set>
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="600" />
</set>
纯属学习笔记,欢迎指正。