今天几乎用半天折腾Fragment,总算做出来了,打算稍后与大家一起分享。今天想和大家分享的是ViewFilpper。ViewFilpper是一个在项目中实现多个View滑动效果的控件,通过ViewFlipper我们可以实现很漂亮的手势滑动效果,在很多应用的设计中都会有所体现。今天想实现的一个简单示例是引导页。何谓引导页?引导页就是当我们第一次使用一个应用程序时,通常可以通过前面的引导页来了解这个应用程序的重要更新、设计理念、全新功能等等。例如下面是腾讯微博的引导页。
好,现在就让我们来开始制作引导页效果。首先是页面布局代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ViewFlipper
android:id="@+id/ViewFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ImageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/screen0" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ImageView2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/screen1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ImageView3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/screen2"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ImageView4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/screen3"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
在这个布局中,我们使用四个ImageView来做为我们要切换的View。下面来看主要的逻辑代码:
package com.Android.ViewFilpper;
import com.Android.ViewFliper.R;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.Window;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
public class MainActivity extends Activity {
private ViewFlipper mViewFilpper;
private float StartX;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mViewFilpper=(ViewFlipper)findViewById(R.id.ViewFlipper);
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
switch(event.getAction())
{
case MotionEvent.ACTION_DOWN:
StartX=event.getX();
break;
case MotionEvent.ACTION_UP:
if(event.getX()>StartX)
{
mViewFilpper.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
mViewFilpper.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
mViewFilpper.showNext();
}else if(event.getX()<StartX)
{
mViewFilpper.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
mViewFilpper.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
mViewFilpper.showPrevious();
}
break;
}
return super.onTouchEvent(event);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
最终的运行效果如下图所示:
这种方法实现的滑动切换虽然简单,但是缺点是滑动地时候阻尼感太强,滑动感较为僵硬,画面切换不自然。在后面的文章中,我会为大家分享较为完美的解决方案,感谢大家的关注,以后我的博客每天会更新一篇,希望大家多多支持!