文档章节

android模仿UC首页天气效果

亓斌哥哥
 亓斌哥哥
发布于 2014/10/12 19:45
字数 1167
阅读 525
收藏 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
莱芜
程序员
私信 提问
android怎么用viewFlipper 实现像uc或墨迹天气那样的view跟着手指偏移的效果?

android怎么用viewFlipper 实现像uc或墨迹天气那样的view跟着手指偏移的效果?

优奔兔
2011/02/23
6.6K
1
android 实现网页读取进度

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

qhboy
2012/11/07
177
0
2017 我用 5 个月分享了 98 篇优秀博文

对上半年所分享的文章进行一个整理,很多读者当时忘记了收藏,以致于查找一篇历史文章很费劲,因此在这里顺便做下记录。目前就分下下面几个大类,没有更多细分,已基本可以查找了。 如果觉得...

code小生
10/30
0
0
android 在手机主界面添加一个类似于在界面的天气提醒的悬浮框控件

android开发,怎样点击一个按钮后在手机主界面添加一个dialog(或TextView等)类似于在界面的天气提醒的悬浮框,里面能显示数据库的内容 我是想在手机的主界面添加一个显示控件(像天气提醒悬...

yhl126
2012/11/23
2.3K
2
Android Browser学习〇 为什么要学习Android Browser代码

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

SuShine
2014/02/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

tomcat编译超过64k大小的jsp文件报错原因

  今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回...

SEOwhywhy
14分钟前
0
0
flutter http 请求客户端

1、pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,通过网址“https://pub.dartlang.org/packages/http#-installing-tab-”确认版本号后,将http(0...

渣渣曦
15分钟前
0
0
Django基本命令及moduls举例

一、Django基本命令 1.创建项目 django-admin.py startproject mysite 创建后的项目结构:- mysite - mysite #对整个程序进行配置 - init #导入包专用- settings ...

枫叶云
30分钟前
4
0
zabbix安装

rpm -ivh http://repo.webtatic.com/yum/el6/latest.rpm 安装jdk rpm -ivh (自行在网上下载rpm包) 安装php并修改相应参数 yum -y install php56w php56w-gd php56w-mysqlnd php56w-bcmath......

muoushi
31分钟前
3
0
MySQL自增属性auto_increment_increment和auto_increment_offset

MySQL的系统变量或会话变量auto_increment_increment(自增步长)和auto_increment_offset(自增偏移量)控制着数据表的自增列ID。 mysql> show tables;Empty set (0.00 sec)mysql> CREATE TA......

野雪球
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部