当前位置: 代码迷 >> Android >> 黑马软件工程师_android中常用的淡入淡出的滑屏效果
  详细解决方案

黑马软件工程师_android中常用的淡入淡出的滑屏效果

热度:95   发布时间:2016-05-01 11:33:57.0
黑马程序员_android中常用的淡入淡出的滑屏效果

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?------ android培训、java培训、期待与您交流! ----------

?

?

我们经常在手机浏览器中看到这样的效果,当我们的手从左往右滑的时候,现在屏幕中的分页就会慢慢的向右滑动且会淡出,从左边的方向也会有一个界面向右滑动且淡入。给人的感觉就是我们将当前分页拖出屏幕,另一个分页拖入一样,效果非常好。

?

在我跟随若水老师学习新闻客户端的开发的时候,也想加入这个效果。但当时不懂,后来当我学习了这个知识animation的知识之后,才懂得了一些原理。也想通过自己的努力实现这个效果,但是总是差强人意。后来研究了别人写的代码,总算有点心得,记录下来是非常有必要的。

?

这个功能是在新闻客户端的哪里应用的呢?

是这样的,当我在读某一条新闻的时候,我向左滑可以得到上一条新闻,向右滑可以得到下一条新闻。

?

经过我的详细的分析,因为这个项目是过年前跟着老师一起写的了,我现在是为了总结一些特别有用的知识而重新阅读,所以项目里面的代码非常多,但是我又想尽可能的抽离出这一个效果。这样的话,相当于我在博客里面作了一个封装,以后方便我再次多次使用。

?

现在来分析:

使用到一个最重要的类:ViewFlipper

?

根据下面的介绍:

Class Overview

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

?

根据常识我觉得大家都应该猜到了,我们需要将不同的view添加到一个ViewFlipper的对象中去,再实现切换到下一个view,切换到上一个view等功能。

?

先说添加,看google提供的参考文献的时候,我又明白了几个道理。当我在查viewflipper这个类的时候

?

?

java.lang.Object

? ??android.view.View

? ? ?android.view.ViewGroup

? ? ?android.widget.FrameLayout

? ? ?android.widget.ViewAnimator

? ? ?android.widget.ViewFlipper

?

google会提供给我继承的关系。

?

当我查找addView这个方法的时候

From class android.widget.ViewAnimator:void addView(View child, int index, ViewGroup.LayoutParams params):Adds a child view with the specified layout parameters.

会有许多说明。所以我现在才明白,原来

在我的新闻客户端中使用的void addView(View child, int index):Adds a child view.的这个方法,其实不是viewflipper特有的方法,而是From class android.view.ViewGroup。

?

接着,我看了看详细解释

public void addView (View child, int index)

Adds a child view. If no layout parameters are already set on the child, the default parameters for this ViewGroup are set on the child.

Parameters

childthe child view to add

indexthe position at which to add the child

?

我就明白为什么若水老师就在这种情况下使用这个addView的方法了(如果看google的参考文档会发现有很多addview的方法),因为我们的新闻的排列是有序的,比如时间上的顺序,我们必须保证我们将每条显示新闻详细内容的view有序添加到viewflipper里面去,这里用户看下一条,上一条的时候才有规律。

?

我们紧接着看切换上一条和下一条的方法:

?

public void showNext ()

Manually shows the next child.

?

public void showPrevious ()

Manually shows the previous child.

?

两个方法都From class android.widget.ViewAnimator。

?

直接调用这个两个方法,很顺利的切换到下一个view或者上一个view,但是非常生硬的感觉。

所以还要和另外两个方法结合使用才好:

?

void setInAnimation(Context context, int resourceID)

Specifies the animation used to animate a View that enters the screen.

void setInAnimation(Animation inAnimation)

Specifies the animation used to animate a View that enters the screen.

void setOutAnimation(Animation outAnimation)

Specifies the animation used to animate a View that exit the screen.

void setOutAnimation(Context context, int resourceID)

Specifies the animation used to animate a View that exit the screen.

?

以上4个方法两两成对,只是传入的参数不同,但是实现的功能是相同的,这里我们使用了

void setOutAnimation(Context context, int resourceID)和void setInAnimation(Context context, int resourceID)这样两个方法。

?

只要这两个方法设置好了,那么在调用shownext和showprevious的时候就不再生硬,而是呈现出我们我们设定好进入和退出动画。

?

为了达到我们想要的题目所属的效果,我们是如下将两对函数集合放在相应的位置。

this.viewflipper.setInAnimation(this, R.anim.push_left_in);

this.viewflipper.setOutAnimation(this, R.anim.push_left_out);

this.viewflipper.showNext();

?

this.viewflipper.setInAnimation(this, R.anim.push_right_in);

this.viewflipper.setOutAnimation(this,R.anim.push_right_out);

this.viewflipper.showPrevious();

?

接着:我们就需要设置push_left_in、push_left_out、push_right_in、push_right_out。这4个动画文件(都需要放在res/anim文件下)

?

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.1" android:toAlpha="1.0"        android:duration="500" /></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="500" />    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"        android:duration="500" /></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="500" />    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"        android:duration="500" /></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="500" />    <alpha android:fromAlpha="1.0" android:toAlpha="0.1"        android:duration="500" /></set>  

?只分析其中一个,另外三个同理可得:translate表示移动,android:fromXDelta表示开始的位置,android:toXDelta表示到结束的位置。另外的duation就太简单了。

其中比较特别的要知道:fromXDelta="100%p"中的100%p表示的位置和-100%p的位置如下图所示:



?最后,我再想说明一下滑动手指的问题,也就手指向左滑和向滑时候的代码。

private OnTouchListener newsBodyOnTouchListener=new OnTouchListener() {						@Override		public boolean onTouch(View v, MotionEvent event) {			switch (event.getAction())			{			//手指按下			case MotionEvent.ACTION_DOWN:				mStartX=event.getX();				break;						//手指抬起			case MotionEvent.ACTION_UP:				//向左滑动,我是想看下一个新闻,这里和点击左边的按钮完全是两种感觉				if(event.getX()<mStartX) {					showNext();//看下一个新闻					break;				}else if(event.getX()>mStartX) {//向右滑,					showPrevious();//看上一个新闻					break;				}			default:				break;					}			return true;		}	};

?虽然代码中只写了showNext();和showPrevious();但是不要忘了要与void setOutAnimation(Context context, int resourceID)和void setInAnimation(Context context, int resourceID)结合使用才有动态效果。

?

哎,不得不啰说一句,要记得注册这个newsBodyOnTouchListener。才能执行new OnTouchListener()的内部类

?

也就是要在屏幕中相应的位置写上:View.setOnTouchListener(newsBodyOnTouchListener);表示由newsBodyOnTouchListener监听这个view,一旦view上有touch事件发生,将会执行new OnTouchListener()的内部类的内容。

?

到底结束,这次总结的还算比较满意,渐渐推进,深刻理解,并且英文也大有长进。晚安

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?------- android培训、java培训、期待与您交流! ----------

  相关解决方案