android仿IOS,滑动隐藏底部ScrollView

原创 2015年07月07日 17:33:08

       在我们开发android app时,会有很多效果都需要模仿IOS,最近在做一个页面时,其中用到了 ScrollView,但要做成IOS那种在ScrollView滑动时,浮在ScrollView的功能按钮要隐藏,当滑动结束后,功能按钮又要显示出来。效果如下图所示:

      gif实在是不好搞,所以只能截个静态图来表示一下,当ScrollView滑动时,浮在最下面的按钮会以动画的形式隐藏,当停止滑动时,又会已动画的形式回到原位置。

       思路:当监听到ScrollView滑动时,播放属性动画隐藏,当滑动结束的时候播放相反的动画,使View回到原位置。

       代码如下: 

package view;
/**********************************************************
 * @文件名称:CustomScrollView.java
 * @文件作者:rzq
 * @创建时间:2015年7月7日 下午2:20:16
 * @文件描述:滑动隐藏ScrollView
 * @修改历史:2015年7月7日创建初始版本
 **********************************************************/
public class CustomScrollView extends ScrollView
{
	/**
	 * UI
	 */
	private View contentView;
	/**
	 * data
	 */
	private ValueAnimator apperaAnim;
	private ValueAnimator hiddenAnim;
	private int downScrollY;
	private int moveScrollY;
	private boolean isHidding;

	public CustomScrollView(Context context, AttributeSet attrs)
	{
		super(context, attrs);
	}

	@Override
	protected void onFinishInflate()
	{
		if (getChildCount() > 0)
		{
			contentView = getChildAt(0);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev)
	{
		switch (ev.getAction())
		{
		case MotionEvent.ACTION_DOWN:
			downScrollY = getScrollY();
			break;
		case MotionEvent.ACTION_MOVE:
			moveScrollY = getScrollY();
			if (moveScrollY != downScrollY)
			{
				startHiddenAnimation();
			}
			break;
		case MotionEvent.ACTION_UP:
		case MotionEvent.ACTION_CANCEL:
			moveScrollY = 0;
			downScrollY = 0;
			break;
		}
		return super.onTouchEvent(ev);
	}

	public void setAnimationView(final View animationView)
	{
		/**
		 * 创建动画
		 */
		hiddenAnim = ValueAnimator.ofFloat(0, animationView.getHeight());
		hiddenAnim.setDuration(500);
		hiddenAnim.setTarget(animationView);
		hiddenAnim.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
				animationView.setTranslationY((Float) animation.getAnimatedValue());
			}
		});
		hiddenAnim.addListener(new AnimatorListenerAdapter()
		{
			@Override
			public void onAnimationEnd(Animator animation)
			{
				startApperaAnimation();
			}

			@Override
			public void onAnimationStart(Animator animation)
			{
				isHidding = true;
			}
		});

		apperaAnim = ValueAnimator.ofFloat(animationView.getHeight(), 0);
		apperaAnim.setDuration(500);
		apperaAnim.setTarget(animationView);
		apperaAnim.addUpdateListener(new AnimatorUpdateListener()
		{
			@Override
			public void onAnimationUpdate(ValueAnimator animation)
			{
				animationView.setTranslationY((Float) animation.getAnimatedValue());
			}
		});

		apperaAnim.addListener(new AnimatorListenerAdapter()
		{
			@Override
			public void onAnimationEnd(Animator animation)
			{
				isHidding = false;
			}

			@Override
			public void onAnimationStart(Animator animation)
			{
			}
		});
	}

	private void startHiddenAnimation()
	{
		if (!hiddenAnim.isRunning() && !isHidding)
		{
			hiddenAnim.start();
		}
	}

	private void startApperaAnimation()
	{
		if (!apperaAnim.isRunning())
		{
			apperaAnim.start();
		}
	}

	/**
	 * 是否直接滑动到底部
	 */
	protected boolean isScrollDown()
	{
		return getHeight() + getScrollY() == contentView.getHeight();
	}

	/**
	 * 是否直接滑到顶部
	 */
	protected boolean isScrollUp()
	{
		return getScrollY() == 0;
	}
}

   /**
    * 在Activity中使用
    */
   public class CustomActivity extends Activity
   {
    private TextView textView;
    private CustomScrollView2 scrollView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.custom_scrollview_layout);
        scrollView = (CustomScrollView2) findViewById(R.id.scoll_view);
        textView = (TextView) findViewById(R.id.animation_view);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus)
    {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus)
        {
            scrollView.setAnimationView(textView);
        }
    }
}


        最后:主要就使用用了一个属性动画,属性动画还是很重要的,一定的学会并熟练应用。

       

滑动底部工具条显示与隐藏

public class ScrollerBottomLayoutDelegation { private NestedScrollViewmNestedScroller; private...
  • hard_working1
  • hard_working1
  • 2016年08月15日 09:19
  • 962

实现滑动隐藏标题栏底部导航栏

实现滑动隐藏标题栏底部导航栏
  • u014608640
  • u014608640
  • 2016年11月18日 20:56
  • 1139

Android实现上下滑动隐藏/显示工具栏

对于移动端,为了留出更多的空间来显示内容,我们在向上滑动视图的时候,总是希望,顶部工具栏和底部工具栏可以随着我们向上滑动的手势而自动隐藏。而当我们浏览完内容,向下滑动视图的时候,又希望工具栏可以自动显...
  • futureshine1
  • futureshine1
  • 2016年02月29日 22:02
  • 3888

仿底部工具栏上滑消失下滑出现

仿底部工具栏上滑消失下滑出现先看效果图吧! 这个效果图确实不错,设计思想也很好。所以呢?我们肯定是要拿来主义了。这个页面来自携程的app,具体的效果可以去查看下。实现思路 类似这种效果,我考虑了好...
  • Mr_dsw
  • Mr_dsw
  • 2016年01月16日 11:18
  • 3640

滑动ListView自动隐藏页面头部和底部元素

现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+。在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐...
  • IJUST
  • IJUST
  • 2014年12月04日 20:33
  • 1990

Android滑动ScrollView时使导航栏停留的效果(仿ios的tableview分区)

  • 2016年09月20日 16:32
  • 21.03MB
  • 下载

android 仿ios 弹性ScrollView 上下滑动

  • 2016年08月30日 22:03
  • 7KB
  • 下载

Android滑动ScrollView时使导航栏停留的效果(仿ios的tableview分区)

首先,我们来看下效果图,如下:   让我们来分析一下这个图,这是一个scrollview,有4个条目,当我们向上滑动的时候,如果条目2滑到顶端,会把 条目1顶上去,然后条目2停留,等待条目...
  • AA_chao
  • AA_chao
  • 2016年09月20日 14:34
  • 683

android:ScrollView滑动到底部显示加载更多

本文转载自:http://blog.csdn.net/su20145104009/article/details/50733463 这是效果 主要是onTouchListener监听事件,...
  • SXS120730
  • SXS120730
  • 2017年12月29日 20:00
  • 49

Android控件:ScrollView的使用,滑动到底部的监听

* ScrollView的滑动到 底部的监听,需要设置触摸监听。并且,需要去获取ScrollView的子控件的真实高度,已经,当前滑动的距离。已经控件在屏幕上显示的高度。 * ScrollView的...
  • DucklikeJAVA
  • DucklikeJAVA
  • 2015年10月01日 22:05
  • 3102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android仿IOS,滑动隐藏底部ScrollView
举报原因:
原因补充:

(最多只允许输入30个字)