文档章节

android模仿UC首页天气效果

亓斌哥哥
 亓斌哥哥
发布于 2014/10/12 19:45
字数 1167
阅读 502
收藏 3
点赞 0
评论 0

这个效果写了两边才搞出来,写第一遍的时候是凭着自己对这个效果的记忆去写的,重写了ScrollView,在初始化完毕给它强制添加了一个View,并设置paddingtop为-view的高度隐藏它,然后通过onTouch事件一点点的显示。

等效果出来了,看着好像和记忆中的效果有点差距,这是才打开UC又对比了一下,结果:人家是从头部开始显示,而我的是从底部开始显示,导致的结果就是:我的像是普通的滑动显示,一点档次都没有。

那好吧,重写!

要从上面开始显示,那就只能默认的时候是下面的view全覆盖上面的view(暂且称之为cardview吧),然后通过拖拽来设置下面view的margintop,达到逐渐显示cardview的效果,有了思路,那就开干!

先来看看效果吧:

既然是用FrameLayout,那我先定义一个CardView继承自FrameLayout。然后强制在最上面添加一个cardview就ok,代码:

public class CardView extends FrameLayout {
	private static final float TEXT_MAX_SIZE = 50f;  // 文字最带值
	
	private ViewGroup mCardView; // 上面的cardlayout
	private View mFirstChild; 	// 该布局下的第一个子view 
	private TextView mCardText; // 文字
	
	private int mCardHeight;   // cardlayout的高度
	private int mStartY;       // 开始拖拽的y值
	private int mNowMarginTop; // 保存当前的margintop
	
	private boolean isShown;   // 记录cardlayout是否显示
	
	public CardView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	
	public CardView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// 获取cardLayout
		mCardView = (ViewGroup) LayoutInflater.from(context).inflate(
				R.layout.card_layout, null);
		mCardText = (TextView) mCardView.findViewById(R.id.card_text);
		
		// 设置默认属性
		mCardText.setTextSize(0.0f);
		mCardView.setAlpha(0.0f);
		
		// 测量一下cardlayout
		measureView(mCardView);
		// 测量后获取高度
		mCardHeight = mCardView.getMeasuredHeight();
		// 添加到当前布局中
		addView(mCardView, 0);
	}
	
	// 测量view
	private void measureView(View view) {
		ViewGroup.LayoutParams lp = view.getLayoutParams();
		if(null == lp) {
			lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 250);
			view.setLayoutParams(lp);
		}
		
		int widthMeasureSpec = ViewGroup.getChildMeasureSpec(0, 0, lp.width);
		int height = lp.height;
		int heightMeasureSpec;
		
		if(height > 0) {
			heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
		}else {
			heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
		}
		
		view.measure(widthMeasureSpec, heightMeasureSpec);
	}
	
	// 当布局加载完毕后
	// 这时getChildCount()才能取出值
	// 在前面getChildCount()为0
	// 因此这里开始才能使用getChildAt()
	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		if(getChildCount() <= 0) {
			System.err.println("no child was found!");
			return;
		}
		
		// 获取第一个布局文件中定义的第一个子view
		// 为什么是1呢? 因为我们上面手工添加了一个。
		mFirstChild = getChildAt(1);
	}
	
	// 滑动时,设置效果和属性
	private void setCurrent(int topMargin) {
		// 如果超过了cardlayout的高度
		// 则最大就是cardlayout的高度
		if(topMargin > mCardHeight) {
			topMargin = mCardHeight;
		}
		
		// 同样,小于0了,最小就是0
		if(topMargin <= 0) {
			topMargin = 0;
		}
		
		// 根据现在的topmargin设置cardlayout的alpha
		mCardView.setAlpha(topMargin/(float)mCardHeight);
		// 根据现在的topmargin设置文本的大小
		mCardText.setTextSize(topMargin/(float)mCardHeight * TEXT_MAX_SIZE);
		
		// 获取子view的layoutparams
		FrameLayout.LayoutParams lp = (LayoutParams) mFirstChild.getLayoutParams();
		if(null == lp) {
			lp = new FrameLayout.LayoutParams(
					FrameLayout.LayoutParams.MATCH_PARENT,
					FrameLayout.LayoutParams.WRAP_CONTENT);
		}
		
		// 设置margintop
		lp.topMargin = topMargin;
		mFirstChild.setLayoutParams(lp);
		mNowMarginTop = topMargin;
		invalidate(); // 刷新界面
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			mStartY = (int) event.getY(); // 当按下时,记录按下的y值
			break;
		case MotionEvent.ACTION_MOVE:
			int nowY = (int) event.getY();  // 移动时,获取y
			// 如果当前不是显示状态
			if(!isShown) {
				setCurrent(nowY - mStartY); // 非显示状态->显示状态:使用这个逻辑
			}else {
				setCurrent(mCardHeight-(mStartY - nowY)); // 显示状态->非显示状态:使用这个逻辑
			}
			break;
		case MotionEvent.ACTION_UP:
			mStartY = 0;  // 抬起的时候,重新设置mStartY
			
			// 抬起了,cardlayout只有两种状态
			// 显示/不显示
			// 如果现在的margin值大于cardlayout高度的二分之一,则全显示
			// 否则不显示
			if(mNowMarginTop >= mCardHeight / 2) {
				setCurrent(mCardHeight);
				isShown = true;
			}else {
				setCurrent(0);
				isShown = false;
			}
			break;
		}
		
		return true;
	}
}





需要说明的有两点:

1、在CardView中,我们需要获取他的第一个子View(因为要改变他的margintop值来显示动态添加的那个view)。在哪获取呢?如果在构造方法中获取或报异常,因为这时候layout还没有加载完成,那我们就在layout加载完毕后获取吧,正好有个可以重写的方法:

protected void onFinishInflate()

我们在这里要做的工作很简单就是获取他的第一个view。

2、重写onTouchEvent方法,根据滑动的距离来显示card,在ACTION_MOVE中分了两种情况:“由无到有”和“由有到无”。然后不断的调用自定义方法:setCurrent来改变效果,注释里面写的很清楚了。

这里我们在ACTION_UP通过判断当前显示的是不是已经过半,如果过半,抬起的时候就全显示出来,如果没过半,就还原默认。


总结:

1、想了想slidemenu应该用这种方式也可以实现吧。

2、刚开始接触View重写,肯定还有不完美的地方,希望在以后再看到现在的代码时,能使劲的鄙视一下自己。

© 著作权归作者所有

共有 人打赏支持
亓斌哥哥

亓斌哥哥

粉丝 28
博文 34
码字总数 12346
作品 13
莱芜
程序员
android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码

Android精选源码 一个爬取美女图片的app(http://www.apkbus.com/thread-600077-1-1.html) Android高仿抖音(http://www.apkbus.com/thread-600081-1-1.html) android一个可以上拉下滑的Ui效果......

逆鳞龙 ⋅ 06/12 ⋅ 0

盘点最干净简洁的手机浏览器,到底哪个最好用?

X浏览器 用过的都说X浏览器的广告拦截很强悍 大小:0.8M,无开屏页,只有安卓版本。 用过 Chrome 的 都说X浏览器是好的备胎。 无新闻,无推送,无后台,不足1M却小而强大,给你淋漓尽致的浏览...

一个敲代码的前端妹子 ⋅ 05/31 ⋅ 0

Android中MVP模式的了解及实例

Android中MVP的由来 在了解MVP之前我相信很多人已经学习过MVC这个框架了!MVP的诞生可以说是建立在MVC在安卓某些不足的方面 MVC简介 .M对应Model,代表业务数据 .V对应View,代表视图 .C对应C...

九尾74 ⋅ 05/26 ⋅ 0

android 实现网页读取进度

想做一个自己的浏览器,首页有很多网站的链接,当打开某个链接时,出现一个等待进度条,当进度条满了,代表网页读取完毕,切换activity,不知道如何获取读取进度。类似于UC浏览器的这个效果...

qhboy ⋅ 2012/11/07 ⋅ 0

Android P 版本号为 9,第三个开发者预览版有这些变化

近日,Google 如期放出了 Android P 的第三个开发者预览版(以下简称 DP3)。DP3 主要面向应用开发者,将该版本操作系统的 API 等级正式确定为 API level 28,开发者可以借助相关的 SDK 面向...

h4cd ⋅ 06/10 ⋅ 0

Android 开发者应该知道的 Kotlin 技巧

今年的 Google I/O 大会上,Google 是这样评价 Kotlin:在过去一年里,有35%的专业 Android 开发者在使用 Kotlin,其中95%的开发者都对 Kotlin 非常满意。虽然 Kotlin 正处于发展的初始阶段,...

码云Gitee ⋅ 05/28 ⋅ 0

android清理缓存动画、天气APP、购物下单选择器、阅读APP、饿了么demo等源码

Android精选源码 android将文本内容局部变颜色代码(http://www.apkbus.com/thread-597560-1-1.html) Android遮罩对比图效果组件(http://www.apkbus.com/thread-597563-1-1.html) 一个能让你了...

逆鳞龙 ⋅ 04/17 ⋅ 0

如何让你的app在后台被干掉后优雅的启动。

作为一名Android开发师,肯定在处理用户的体验上下一定的功夫。有这么一个场景,在用户用着你开发的app的时候,突然某个聊天工具来消息了,切换到聊天工具后长时间停留,并且可能做了一些你不...

她的梦z ⋅ 04/11 ⋅ 0

仿知乎首页学习 CoordinateLayout

前言 第一次接触CoordinateLayout的时候深深的被其炫酷的特效所吸引;想着什么时候在实际项目中可以使用一下,无奈实际项目因行业特点,并不需要使用到CoordinateLayout这么高端的交互体验;...

IAM四十二 ⋅ 2016/12/22 ⋅ 0

react-native 启动页android

最近做一个项目,要用到启动页这个来解决启动白屏,就弄了一下,虽然网上一堆教程,但是还是踩了一堆坑,现在搞出来了,记录一下 下面是插件的GitHub地址 https://github.com/crazycodeboy/...

望-惘-尣 ⋅ 04/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部