Android开发学习之ViewFilpper

               今天几乎用半天折腾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;
	}

}
              最终的运行效果如下图所示:

 

            这种方法实现的滑动切换虽然简单,但是缺点是滑动地时候阻尼感太强,滑动感较为僵硬,画面切换不自然。在后面的文章中,我会为大家分享较为完美的解决方案,感谢大家的关注,以后我的博客每天会更新一篇,希望大家多多支持!           

      

雪轻鸿 CSDN认证博客专家 .NET Python 伪·全栈攻城狮
谢谢你,在这世界的角落,找到我,一个即将进入而立之年的中年大叔,常年以 飞鸿踏雪 的花名混迹江湖。在现实生活中,我是一名 伪·全栈攻城狮,因为我觉得,什么都略懂一点,生活会更多彩一些。目前,主要关注.NET、.NET Core、Python、数据分析、微服务、Web 等技术方向。日常行为:读书、写作、电影、烹饪、洞箫等。喜欢看日剧/纪录片/科普、刷B站、刷LeetCode等。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值