Android处子Demo—简易的UC首页动画

最新推荐文章于 2023-04-25 15:50:22 发布
最新推荐文章于 2023-04-25 15:50:22 发布
阅读量1.3k 收藏
点赞数
分类专栏： android 文章标签： android ui 动画 uc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013771967/article/details/47402037
版权

源代码在这里：https://github.com/biricky/UCHome

源代码说明：

功能的实现在UCLinear.java文件中，返回键及home键的监听在MainActivity中。

忽略DragHelperCallBack及NewsSetting两个文件。

UI抽象

              

整体布局：将首页的布局抽象为五部分：

第一部分是被隐藏的新闻导航栏，暂时用TextView替代；

第二部分是搜索栏，用TextView替代；

第三部分为网站导航，由多个Button组成，仅画一个作为代表；

第四部分为新闻栏，使用ScrollView实现；

第五部分为底部导航，由多个Button横向线性排列；

源代码位置：res/layout/

 

类介绍

介绍具体实现之前，要介绍一下使用到的几个类。

两个最最最重要的类

ViewDragHelp 

https://developer.android.com/reference/android/support/v4/widget/ViewDragHelper.html

直接把它的说明翻译过来（英语很渣...）：

ViewDragHelper是一个用来编写用户自定义ViewGroups的实用类，它为用户提供了许多实用的方法，可以跟踪用户的拖拽动作，并可以重新定位子views在其父ViewGroup中的位置。

 

ViewDragHelp.Callback

http://developer.android.com/reference/android/support/v4/widget/ViewDragHelper.Callback.html

类的名字已经很明显了，就是ViewDragHelper的回调函数。

关于他的使用方法，这里给了一个非常好的总结：http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/


VelocityTracker

http://developer.android.com/reference/android/view/VelocityTracker.html

获取滑动速度的类。

UCLinear.java

package com.example.ucfirstpage;

import android.R.bool;
import android.R.integer;
import android.content.Context;
import android.support.v4.view.VelocityTrackerCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewTreeObserver.OnPreDrawListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterViewAnimator;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class UCLinear extends RelativeLayout{
	private static int CONTENT_ORI_TOP_LOC;
	
	private boolean isInRange = true; 
	public boolean isOrigin = true; //是否是初始状态,用于返回判断
	
	private ViewDragHelper mDragHelper;
	private DragHelperCallback mCallBack;
	private VelocityTracker mVTracker;
	
	private int mGuideHeight; //导航栏高度
	private int mSearchHeight; //搜索栏高度
	private int mWebGuideHeight; //网站导航高度
	private int mContentHeight; //内容高度
	private int mTotalHeight;  //总高度
	
	
	private View mViewGuide; //导航栏
	private View mViewSearch; //搜索部分
	private View mViewWebGuide; //网站导航
	private View mViewContent; //内容
	private View mViewBottom;//底部导航
	
	//bottom中的五个button
	private Button btnPrev,btnNext,btnMore,btnPage,btnToHome;

	public UCLinear(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		mCallBack = new DragHelperCallback();
		mDragHelper = ViewDragHelper.create(this, mCallBack);
		this.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {	
			@Override
			public boolean onPreDraw() {
				CONTENT_ORI_TOP_LOC = mViewContent.getTop();
				mGuideHeight = mViewGuide.getHeight();
				mSearchHeight = mViewSearch.getHeight();
				mWebGuideHeight = mViewWebGuide.getHeight();
				mTotalHeight = UCLinear.this.getHeight();
				mViewGuide.bringToFront();
				mViewGuide.setTranslationY(-mGuideHeight);
				UCLinear.this.getViewTreeObserver().removeOnPreDrawListener(this);
				return false;
			}
		});
	}

	public void setBackToOrigin(){
		if (!isOrigin){
			isInRange = true;
			isOrigin = true; 
			
			mViewSearch.setScaleX(1);
			mViewSearch.setScaleY(1);
			
			mViewWebGuide.setScaleX(1);
			mViewWebGuide.setScaleY(1);
			
			TranslateAnimation btnPrev_ta = new TranslateAnimation(0,-btnPrev.getTranslationX(), 0, 0);
			btnPrev_ta.setDuration(100);
			btnPrev_ta.setFillAfter(true);
			btnPrev.startAnimation(btnPrev_ta);
			btnPrev.setAlpha(1);
			btnPrev_ta.setAnimationListener(new AnimationListener() {
				
				@Override
				public void onAnimationStart(Animation animation) {				
				}			
				@Override
				public void onAnimationRepeat(Animation animation) {				
				}
				
				@Override
				public void onAnimationEnd(Animation animation) {
					btnPrev.setTranslationX(0);
					btnPrev.clearAnimation();
					
				}
			});
			
			TranslateAnimation btnNext_ta = new TranslateAnimation(0,-btnNext.getTranslationX(), 0, 0);
			btnNext_ta.setDuration(100);
			btnNext_ta.setFillAfter(true);
			btnNext.startAnimation(btnNext_ta);
			btnNext.setAlpha(1);
			btnNext_ta.setAnimationListener(new AnimationListener() {
				
				@Override
				public void onAnimationStart(Animation animation) {
				}
				
				@Override
				public void onAnimationRepeat(Animation animation) {
				}
				
				@Override
				public void onAnimationEnd(Animation animation) {
					btnNext.setTranslationX(0);
					btnNext.clearAnimation();
				}
			});
			
			TranslateAnimation btnPage_ta = new TranslateAnimation(0,-btnPage.getTranslationX(),  0, 0);
			btnPage_ta.setDuration(100);
			btnPage_ta.setFillAfter(true);
			btnPage.startAnimation(btnPage_ta);
			btnPage.setAlpha(1);
			btnPage_ta.setAnimationListener(new AnimationListener() {
				
				@Override
				public void onAnimationStart(Animation animation) {
					
				}
				
				@Override
				public void onAnimationRepeat(Animation animation) {
					
				}
				
				@Override
				public void onAnimationEnd(Animation animation) {
					btnPage.setTranslationX(0);
					btnPage.clearAnimation();
				}
			});
			TranslateAnimation btnToHome_ta = new TranslateAnimation(0, -btnToHome.getTranslationX(), 0, 0);
			btnToHome_ta.setDuration(100); 
			btnToHome_ta.setFillAfter(true);
			btnToHome.startAnimation(btnToHome_ta);
			btnToHome_ta.setAnimationListener(new AnimationListener() {
				
				@Override
				public void onAnimationStart(Animation animation) {
					
				}
				
				@Override
				public void onAnimationRepeat(Animation animation) {
					
				}
				
				@Override
				public void onAnimationEnd(Animation animation) {
					btnToHome.setTranslationX(0);
					btnToHome.clearAnimation();
				}
			});			
			btnMore.setAlpha(1);
			
			mViewGuide.setTranslationY(-mGuideHeight);
			mViewContent.setScrollY(-mViewContent.getScrollY());
			requestLayout();		
		}
	}
	//计算拖动速度
	@Override
	public void computeScroll() {
		if(mDragHelper.continueSettling(true)) {
			ViewCompat.postInvalidateOnAnimation(this);
		}
	}
	
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		if (mVTracker == null) {
			mVTracker = VelocityTracker.obtain();
		}
		mVTracker.addMovement(ev);
		final VelocityTracker vt = mVTracker;
		if (ev.getAction() == MotionEvent.ACTION_MOVE) {
			vt.computeCurrentVelocity(1000);
			if ( vt.getYVelocity() < -1500 && isInRange) {			
				mDragHelper.smoothSlideViewTo(mViewContent, 0, mGuideHeight);
				this.postInvalidate();
				
				isInRange = false;
				isOrigin = false;
				
				return false;			
			}
			else if (vt.getYVelocity() > 500 && mViewContent.getScrollY() == 0) {
				this.setBackToOrigin();
				return true;
			}
		}
		return mDragHelper.shouldInterceptTouchEvent(ev);
	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		mDragHelper.processTouchEvent(event);
		return false;
	}
	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		mViewGuide.layout(
				0, 
				0, 
				mViewGuide.getMeasuredWidth(), 
				mViewGuide.getMeasuredHeight());
		mViewSearch.layout(
				0, 
				0, 
				mViewSearch.getMeasuredWidth(), 
				mViewSearch.getMeasuredHeight());
		mViewWebGuide.layout(
				0, 
				mViewSearch.getMeasuredHeight(),
				mViewWebGuide.getMeasuredWidth(), 
				mViewSearch.getMeasuredHeight()+mViewWebGuide.getMeasuredHeight());
		mViewBottom.layout(
				0, 
				getMeasuredHeight()-mViewBottom.getMeasuredHeight(), 
				mViewBottom.getMeasuredWidth(),
				getMeasuredHeight());
		mViewContent.layout(
				0, 
				mViewWebGuide.getMeasuredHeight()+mViewSearch.getMeasuredHeight(), 
				mViewContent.getMeasuredWidth(),
				mViewWebGuide.getMeasuredHeight()+mViewSearch.getMeasuredHeight()+
							getMeasuredHeight()-mViewGuide.getMeasuredHeight()-
							mViewBottom.getMeasuredHeight());
	}
	
	public void initButton(){
		btnPrev = (Button) findViewById(R.id.btnPrev);
		btnNext = (Button) findViewById(R.id.btnNext);
		btnMore = (Button) findViewById(R.id.btnMore);
		btnPage = (Button) findViewById(R.id.btnPage);
		btnToHome = (Button) findViewById(R.id.btnToHome);
	}
	@Override
	protected void onFinishInflate() {
		initButton();
		mViewGuide= findViewById(R.id.uc_guide);
		mViewSearch=findViewById(R.id.uc_search);
		mViewWebGuide=findViewById(R.id.uc_webguide);
		mViewContent=findViewById(R.id.uc_news);
		mViewBottom=findViewById(R.id.uc_bottom);
	}
	
	
	
	class DragHelperCallback extends ViewDragHelper.Callback {

		/**
		 * 设置mViewContent可拖拽
		 */
		@Override
		public boolean tryCaptureView(View arg0, int arg1) {
			if (mDragHelper.continueSettling(true))
				return false;
			return mViewContent == arg0 && isInRange;
		}
		/**
		 * 垂直拖拽的处理，这里对拖拽过程中mViewContent的移动进行处理
		 */
		@Override
		public int clampViewPositionVertical(View child, int top, int dy) {
			int topBound = mGuideHeight;
			int bottomBound = mViewWebGuide.getBottom();
			int newTop = Math.min(Math.max(top, topBound), bottomBound);		
			return newTop;
		}
		/**
		 * 水平拖拽的处理
		 */
		@Override
		public int clampViewPositionHorizontal(View child, int left, int dx) {
			return super.clampViewPositionHorizontal(child, left, dx);
		}
		/**
		 * 水平可拖拽的距离范围
		 */
		@Override
		public int getViewHorizontalDragRange(View child) {
			return mViewContent.getWidth();
		}
		/**
		 * 垂直可拖拽的距离范围
		 */
		@Override
		public int getViewVerticalDragRange(View child) {
			return mTotalHeight;
		}
		/**
		 * 监听到View位置的变化，完成其他view动画的处理
		 */
		@Override
		public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
						
			//获取导航栏相对手指移动的相对距离
			float guidedy = dy / (float)(mSearchHeight+mWebGuideHeight-mGuideHeight) * mGuideHeight;
			mViewGuide.setTranslationY(mViewGuide.getTranslationY() - guidedy);
			
			//设置mViewSearch及mViewWebGuide缩放效果
			float scale = (float) ((mViewWebGuide.getBottom()-mViewContent.getTop()) /
					(float)(mSearchHeight+mWebGuideHeight-mGuideHeight));
			mViewSearch.setPivotY(mViewSearch.getTop());
			mViewSearch.setPivotX(getWidth()/2);
			mViewSearch.setScaleY(1-scale/10);
			mViewSearch.setScaleX(1-scale/10);
			mViewWebGuide.setPivotY(mViewSearch.getTop());
			mViewWebGuide.setPivotX(getWidth()/2);
			mViewWebGuide.setScaleY(1-scale/10);
			mViewWebGuide.setScaleX(1-scale/10);
			
			//设置bottom中各button的效果			 
			float alphady = (mViewWebGuide.getBottom() - mViewContent.getTop())/
					(float)(mSearchHeight+mWebGuideHeight-mGuideHeight);
			btnMore.setAlpha(1-alphady);
			
			float homedy_tran = dy / (float)(mSearchHeight+mWebGuideHeight-mGuideHeight) * 
					(mViewBottom.getWidth()/2-btnToHome.getWidth()/2);
			btnToHome.setTranslationX(btnToHome.getTranslationX() + homedy_tran);
			
			float pagedy_tran = dy/(float)(mSearchHeight+mWebGuideHeight-mGuideHeight) *
					(btnPage.getWidth()/2+btnMore.getWidth()/2);
			btnPage.setTranslationX(btnPage.getTranslationX() + pagedy_tran);
			btnPage.setAlpha(1-alphady);
			
			float prevdy_tran = dy / (float)(mSearchHeight+mWebGuideHeight-mGuideHeight) *
					(mViewBottom.getWidth()/2-btnPrev.getWidth()/2);
			btnPrev.setTranslationX(btnPrev.getTranslationX() - prevdy_tran);
			btnPrev.setAlpha(1-alphady);
			
			float nextdy_tran = dy/(float)(mSearchHeight+mWebGuideHeight-mGuideHeight) *
					(btnNext.getWidth()/2+btnMore.getWidth()/2);
			btnNext.setTranslationX(btnNext.getTranslationX() - nextdy_tran);
			btnNext.setAlpha(1-alphady);
		}
		/**
		 * 释放拖拽后执行，根据mViewContent的拖拽距离决定是否上滑或返回原位
		 */
		@Override
		public void onViewReleased(View releasedChild, float xvel, float yvel) {
			int movelen = CONTENT_ORI_TOP_LOC - mViewContent.getTop();
			if (movelen > mWebGuideHeight){
				isInRange = false;
				isOrigin = false;
				mDragHelper.settleCapturedViewAt(0, mGuideHeight);
				postInvalidate();
			}else {
				mDragHelper.settleCapturedViewAt(0, CONTENT_ORI_TOP_LOC);
				postInvalidate();
			}
		}
	}
}

MainActivity.java实现

package com.example.ucfirstpage;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {
	public UCLinear ucView;
	public Button btnHome;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ucView = (UCLinear)findViewById(R.id.uc_liner);
		btnHome = (Button) findViewById(R.id.btnToHome);
		btnHome.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (!ucView.isOrigin) {
					ucView.setBackToOrigin();
				}else {
					
				}
			}
		});
	}

	@Override
	public void onBackPressed() {
		if (!ucView.isOrigin) {
			ucView.setBackToOrigin();
		}else {
			super.onBackPressed();
		}
	}		
}

总结

收获：1. 学习了ViewGroup、View以及事件分发机制；

            2.  Animation的使用更熟练；

            3. 学习了ViewDragHelper；

            4.  Android UI的实现过程有了认识

            5. 熟悉了Android的开发环境

不足：

            1.下滑动画效果的处理不理想，这里需要解决ScrollView和ViewGroup动画冲突的问题，暂时想到的解决办法是覆盖ScrollView的onTouchevent（）。

            2.还需要继续扩展其他首页动画

            3.经验太浅，对Android中的类了解的太少，导致实现的过程走了不少弯路。




毕成成
关注
专栏目录
安卓小程序游戏 Demo（android源码）.rar
02-03
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，本人不对所涉及的版权问题或内容负法律责任。如有侵权，请举报或通知本人删除。
简易UC首页demo续
老毕的专栏
08-17 859
Github代码已经更新：https://github.com/biricky/UCHome/tree/master 增加功能： 1.      增加下滑动画效果 2.      增加左滑及右滑动画效果（需要从屏幕边界处滑动，且作用View为存放图面的那个View）   功能实现 下滑动画 onInterceptTouchEvent()方法中由VelocityTracker的值判断手
Android类似微信首页的页面开发教程(Kotlin)二
最新发布
安卓开发&音视频开发
04-25 6692
Android类似微信首页的页面开发教程
Android漂亮好看的登陆，注册界面！（有可运行Demo）
热门推荐
箍心而行
06-04 3万+
界面如上图所示
android demo例子大全
zhanglei892721的博客
04-16 1万+
1、BeautifulRefreshLayout-漂亮的美食下拉刷新 https://github.com/android-cjj/BeautifulRefreshLayout/tree/BeautifulRefreshForFood 2、Material Design-动画风格的选项卡tab切换功能 https://github.com/neokree/MaterialTabs 3、Twin...
静如处子,动如脱兔参考.doc
09-17
静如处子,动如脱兔参考.doc
静如处子,动如脱兔精选.doc
10-11
【知识点】 1. 语文测试卷结构：题目展示了九年级语文第一单元的测试卷，包含各种类型的题目，如填空、注音、改错、理解等，这些都是语文学习中的常见测试内容。 2. 词语选用：题目要求在给定的词汇中选择最合适的...
全球最长臂架泵车中联“擎天”101m武汉上演处子秀.pdf
09-21
全球最长臂架泵车中联“擎天”101m武汉上演处子秀.pdf
Android-使用Behavior高仿实现UC浏览器首页上下滑动效果
08-13
使用Behavior高仿实现UC浏览器首页上下滑动效果
android 高仿UC浏览器首页上拉面板效果
04-16
android 高仿UC浏览器首页上拉面板效果 博客地址 http://blog.csdn.net/only1994/article/details/51154070
仿UC浏览区首页页面切换效果
08-27
仿UC浏览区首页页面切换效果的源码，blog地址：http://blog.csdn.net/a260189701
android 打造炫酷导航栏（仿UC头条）
02-17
android 打造炫酷导航栏（仿UC头条）。我的博客地址：http://blog.csdn.net/qq_16064871。欢迎关注，留言。
Android-一分钟实现QQ首页动画特效
08-13
一分钟实现QQ首页动画特效
android 主题风格 demo,Android主题示例
weixin_34917128的博客
05-30 133
下面的例子演示如何使用的应用程序的主题(Theme)。修改默认 AppTheme 的默认文本，改变它的大小，系列，阴影等。现在开始创建一个简单的Android应用程序按照以下步骤：步骤描述1使用Android Studio创建一个Android应用程序，并将其命名为：ThemeDemo2修改src/MainActivity.java文件，以添加click事件侦听器和处理程序定义的两个按钮3定义样式...
Android 简单炫酷的UI界面 之欢迎界面
Mark~J的博客
05-17 7813
1.将启动图片splash.png，放置在res->drawable-hdpi文件夹中。 2新建布局文件splash.xml<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/mainFrame" android:layout_width="match_pa
Android APP常见首页效果的实现
jiangyudn的专栏
10-31 4415
总结一下最近做的一个项目首页，也是众多APP常见的首页效果：自动滚动的头图&ListView展示具体信息，效果大概类似于知乎日报的首页 写了一个简单的demo，没有仔细去设计布局，仅实现了类似的效果，并加上了google提倡的material design的下拉刷新风格，项目用到了以下几个著名的开源库： 1，图片加载库：imageloader 2，头图的小圆点：androidViewPager
Android好看的动画欢迎界面（附有详细代码）
m0_58941767的博客
08-18 1671
以上是xml文件的实现代码，总的来说还是比较简洁的，使用了LinearLayout，RelativeLayout布局方式，实现出来的静态效果如下所示。从视频效果中我们可以看到，这个欢迎界面的效果还是不错的，感兴趣的可以尝试一下，比较简单，下面会给出具体代码实现。想要实现动态效果，我们需要在MainActivity.java文件中去添加相关动画的配置，代码如下。我们发现，MainActivity,java中有相关的配置文件，配置文件在这里给出。1、首先第一步，我们需要在res目录下新建资源文件夹anim。..
Clojure灵活性与类型系统的探索：core.typed与spec实践
作者以属兔的处子（可能指代Clojure初学者或女性开发者何婧誉）的视角分享经验，她提到Clojure由于其动态类型特性而显得过于灵活，使得新手难以理解和控制，例如在处理JSON数据时，如果没有明确的类型指导，可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值