Android应用开发系列课程------ViewPager与ViewFlipper较量-白红宇

Android应用开发系列课程------ViewPager与ViewFlipper较量

阅读量：7211 次

发布时间：2019-06-29

本文共 12571 字，大约阅读时间需要 41 分钟。

本讲主要讲解ViewPager与ViewFlipper，通过一个案例来让大家感受它们之间的区别。

案例：实现应用介绍导航界面。

案例效果图：

一.ViewPager实现代码：

（1）布局文件代码：

guide_viewpager.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<RelativeLayout

android:id="@+id/rl_main"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

</RelativeLayout>

</LinearLayout>

home.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center"

android:orientation="vertical" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="30sp"

android:text="欢迎进入首页" />

</LinearLayout>

(2)功能代码：

ViewPagerActivity.java

package com.anjoyo.viewpager;

import java.util.ArrayList;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

import android.widget.LinearLayout.LayoutParams;

import android.widget.RelativeLayout;

public class ViewPagerActivity extends Activity {

private ArrayList<View> pagerList;

private ViewPager viewPager;

private RelativeLayout mMainLayout;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.guide_viewpager);

mMainLayout = (RelativeLayout) this.findViewById(R.id.rl_main);

addMainLayout(mMainLayout);

}

private void addMainLayout(RelativeLayout layout) {

viewPager = new ViewPager(this);

createView();

RelativeLayout.LayoutParams params_cal = new RelativeLayout.LayoutParams(

LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

layout.addView(viewPager, params_cal);

}

private void createView() {

ImageView preView = new ImageView(ViewPagerActivity.this);

preView.setBackgroundResource(R.drawable.new_version_1);

ImageView currentView = new ImageView(ViewPagerActivity.this);

currentView.setBackgroundResource(R.drawable.new_version_2);

ImageView last_1_View = new ImageView(ViewPagerActivity.this);

last_1_View.setBackgroundResource(R.drawable.new_version_3);

ImageView last_2_View = new ImageView(ViewPagerActivity.this);

last_2_View.setBackgroundResource(R.drawable.new_version_4);

ImageView last_3_View = new ImageView(ViewPagerActivity.this);

last_3_View.setBackgroundResource(R.drawable.new_version_5);

last_3_View.setId(5);

pagerList = new ArrayList<View>();

pagerList.add(preView);

pagerList.add(currentView);

pagerList.add(last_1_View);

pagerList.add(last_2_View);

pagerList.add(last_3_View);

viewPager.setAdapter(new GuidePageAdapter());

last_3_View.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Intent intent = new Intent(ViewPagerActivity.this,

HomeActivity.class);

startActivity(intent);

}

});

}

class GuidePageAdapter extends PagerAdapter {

@Override

public int getCount() {

return pagerList.size();

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

@Override

public void destroyItem(View container, int position, Object object) {

((ViewPager) container).removeView(pagerList.get(position));

}

@Override

public Object instantiateItem(View container, int position) {

((ViewPager) container).addView(pagerList.get(position));

return pagerList.get(position);

}

HomeActivity.java

package com.anjoyo.viewpager;

import android.app.Activity;

import android.os.Bundle;

public class HomeActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.home);

}

（3）清单文件代码：

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.anjoyo.viewpager"

android:versionCode="1"

android:versionName="1.0" >

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

android:name=".ViewPagerActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

<activity

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

android:name=".HomeActivity" >

</activity>

</application>

</manifest>

二.ViewFlipper实现代码

（1）布局文件代码：

guide.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<RelativeLayout

android:id="@+id/rl_main"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

</RelativeLayout>

</LinearLayout>

home.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center"

android:orientation="vertical" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="30sp"

android:text="欢迎进入首页" />

</LinearLayout>

slide_left_in.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:duration="400"

android:fromXDelta="100%p"

android:toXDelta="0" >

</translate>

</set>

slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:duration="400"

android:fromXDelta="0"

android:toXDelta="-100%p" >

</translate>

</set>

slide_right_in.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:duration="400"

android:fromXDelta="-100%p"

android:toXDelta="0" >

</translate>

</set>

slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>

<translate

android:duration="400"

android:fromXDelta="0"

android:toXDelta="100%p" >

</translate>

</set>

(2)功能代码：

GuideActivity.java

package com.anjoyo.gesture;

import android.app.Activity;

import android.content.Intent;

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.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.LinearLayout.LayoutParams;

import android.widget.RelativeLayout;

import android.widget.ViewFlipper;

public class GuideActivity extends Activity {

private static final int SWIPE_MIN_DISTANCE = 120;//手势滑动的最短距离

private static final int SWIPE_THRESHOLD_VELOCITY = 200;//手势滑动最低滑动速度

private GestureDetector mGesture;//手势识别类

private ViewFlipper viewFlipper;

private Animation mSlideLeftIn;//左进动画

private Animation mSlideLeftOut;//左出动画

private Animation mSlideRightIn;//右进动画

private Animation mSlideRightOut;//右出动画

private RelativeLayout mMainLayout;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.guide);

mGesture = new GestureDetector(this, new MyOnGestureListener());

mMainLayout = (RelativeLayout) this.findViewById(R.id.rl_main);

addMainLayout(mMainLayout);

}

* 初始界面

* */

private void addMainLayout(RelativeLayout layout) {

viewFlipper = new ViewFlipper(this);

createView();

RelativeLayout.LayoutParams params_cal = new RelativeLayout.LayoutParams(

LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

layout.addView(viewFlipper, params_cal);

}

//动画监听器

AnimationListener animationListener = new AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

// 当动画完成后调用

createView();

}

};

* 动态加载的界面View

* */

private void createView() {

ImageView preView = new ImageView(GuideActivity.this);

preView.setId(1);

preView.setBackgroundResource(R.drawable.new_version_1);

ImageView currentView = new ImageView(GuideActivity.this);

currentView.setBackgroundResource(R.drawable.new_version_2);

ImageView last_1_View = new ImageView(GuideActivity.this);

last_1_View.setBackgroundResource(R.drawable.new_version_3);

ImageView last_2_View = new ImageView(GuideActivity.this);

last_2_View.setBackgroundResource(R.drawable.new_version_4);

ImageView last_3_View = new ImageView(GuideActivity.this);

last_3_View.setBackgroundResource(R.drawable.new_version_5);

last_3_View.setId(5);

viewFlipper.addView(preView);

viewFlipper.addView(currentView);

viewFlipper.addView(last_1_View);

viewFlipper.addView(last_2_View);

viewFlipper.addView(last_3_View);

mSlideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);

mSlideLeftOut = AnimationUtils.loadAnimation(this,

R.anim.slide_left_out);

mSlideRightIn = AnimationUtils.loadAnimation(this,

R.anim.slide_right_in);

mSlideRightOut = AnimationUtils.loadAnimation(this,

R.anim.slide_right_out);

mSlideLeftIn.setAnimationListener(animationListener);

mSlideLeftOut.setAnimationListener(animationListener);

mSlideRightIn.setAnimationListener(animationListener);

mSlideRightOut.setAnimationListener(animationListener);

last_3_View.setOnTouchListener(null);

last_3_View.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Intent intent = new Intent(GuideActivity.this, HomeActivity.class);

startActivity(intent);

}

});

}

@Override

public boolean onTouchEvent(MotionEvent event) {

return mGesture.onTouchEvent(event);

}

//手机屏幕手势监听器

class MyOnGestureListener implements OnGestureListener {

@Override

public boolean onSingleTapUp(MotionEvent e) {

return false;

}

@Override

public void onShowPress(MotionEvent e) {

}

@Override

public boolean onScroll(MotionEvent e1, MotionEvent e2,

float distanceX, float distanceY) {

// 监听滚动事件

// Toast.makeText(MainActivity.this, "我被滚动了", 0).show();

return false;

}

@Override

public void onLongPress(MotionEvent e) {

// 监听长按事件

// Toast.makeText(MainActivity.this, "我被长按了", 0).show();

}

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {

// 监听左右滑动事件

// Toast.makeText(MainActivity.this, "我被滑动了", 0).show();

// right to left swipe

if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE

&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

// Toast.makeText(MainActivity.this, "向左滑动了", 0).show();

if (viewFlipper.getCurrentView().getId() == 5) {

return false;

} else {

viewFlipper.setInAnimation(mSlideLeftIn);

viewFlipper.setOutAnimation(mSlideLeftOut);

viewFlipper.showNext();

return true;

}

// left to right swipe

} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE

&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

// Toast.makeText(MainActivity.this, "向右滑动了", 0).show();

if (viewFlipper.getCurrentView().getId() == 1) {

return false;

} else {

viewFlipper.setInAnimation(mSlideRightIn);

viewFlipper.setOutAnimation(mSlideRightOut);

viewFlipper.showPrevious();

return true;

}

return false;

}

@Override

public boolean onDown(MotionEvent e) {

// 监听按下事件

// Toast.makeText(MainActivity.this, "我被按下了", 0).show();

return false;

}

HomeActivity.java

package com.anjoyo.gesture;

import android.app.Activity;

import android.os.Bundle;

public class HomeActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.home);

}

（3）清单文件代码：

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.anjoyo.gesture"

android:versionCode="1"

android:versionName="1.0" >

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:name=".GuideActivity"

android:label="@string/app_name"

android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >

<intent-filter>

</intent-filter>

</activity>

<activity

android:name=".HomeActivity"

android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >

</activity>

</application>

</manifest>

转载于:https://blog.51cto.com/zhangkeyong/1304043

你可能感兴趣的文章

JEECMS中FreeMarker的Macro

HTTP Keep-Alive是什么？如何工作？

使用elasticsearch1.5.2实现查找附近的人

查看>>

SQL SERVER 批量将修改字段名为大、小写

查看>>

#ifdef __cplusplus extern C{}与C和C++间的关系

德国罗森伯格荣获2013年度中国综合布线十大品牌以及数据中心标准化产品应用奖...

查看>>

使用vue开发项目需要注意的问题和可能踩到的坑

查看>>

webpack 模块标识符(Module Identifiers)

精读《Optional chaining》

查看>>