文档章节

android模仿UC首页天气效果

亓斌哥哥
 亓斌哥哥
发布于 2014/10/12 19:45
字数 1167
阅读 519
收藏 3

这个效果写了两边才搞出来,写第一遍的时候是凭着自己对这个效果的记忆去写的,重写了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
莱芜
程序员
关于微信的那点帖。。。。。。(各种实例)

照惯例发帖先吐槽一下:最近看到大家发防微信功能特别的多,所以就汇总了一下,看看大家还有什么其他方面的汇总需求,回复我噢,均可满足。。。。。 (ps:有些帖子由于主观、客观还有神马原因...

程序袁_绪龙
2015/04/01
0
0
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
0
Android Browser学习〇 为什么要学习Android Browser代码

Browser的代码总算是看的差不多了,但是给我最大的感觉还是,乱.可能是我能力不够?但是说实话却是乱,结构混乱,感觉和OSC客户端的代码差距不少.感觉是一个哥们信手敲出来的,前期没什么规划什么的...

SuShine
2014/02/08
0
0
工作小结,简单的主页框架,可左右滑动,viewpage+fragment,

一款安卓应用,好歹也是一个系统啊,既然称得上是系统,就要考虑系统的稳定性,功能模块的耦合性,复用程度等等,所以一个好的开发模型必然达到事半功倍的效果。 目前(2015年11月),常见的...

Carbenson
2015/11/18
0
0
RadioGroup结合RadioButton使用切换Fragment片段

界面布局activitylanqiu,代码xml设置如下:

鹭明
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

LSM-Tree 大数据索引技术

一、LSM-Tree概述 核心思想就是放弃部分读能力,换取写入能力的最大化。LSM-Tree ,这个概念就是结构化合并树(Log-Structured Merge Tree)的意思,它的核心思路其实非常简单,就是假定内存...

PeakFang-BOK
15分钟前
0
0
vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新...

peakedness丶
21分钟前
0
0
Weblogic补丁升级操作步骤

linux平台: weblogic1036 1:停止weblogic服务 2:打FMJJ补丁 a:获取weblogic_home目录并执行命令:export weblogic_home="/weblogic/wls1036_x64",(此目录一般为目录“user_projects”上...

fang_faye
34分钟前
0
0
04-《Apache Tomcat 9 User Guide》之部署项目

1.Introduction Deployment is the term used for the process of installing a web application (either a 3rd party WAR or your own custom web application) into the Tomcat server. 部......

飞鱼说编程
35分钟前
0
0
一位十年的老码农他眼中的区块链

大家可能已经听说过比特币、莱特币、以太币等等,以及它们作为一种新货币在市场上的潜力。 有趣的是,很多投资比特币的人也提到了区块链之类的东西。 显然,这项技术是比特币等其他东西的"基...

小刀爱编程
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部