Android顶部粘至视图具体解释
不知从某某时间開始,这样的效果開始在UI设计中流行起来了。让我们先来看看效果:
大家在支付宝、美团等非常多App中都有使用。要实现这个效果,我们能够来分析下思路:
我们肯定要用2个一样的布局来显示我们的粘至布局。一个是正常的、还有一个是到顶部不动的。正常的那个,随着scroll一起滚,该滚到哪滚到哪。仅仅是他滚到最上面的时候,
我们须要用粘至的布局,放到顶部。当然。他还在后面继续滚,ok。如今我们来看看详细怎样实现:
先看布局,just a demo。用几张图片略微做做样子。
粘至布局:
<? xml version="1.0" encoding="UTF-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal" > <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#FFFFFF"
android:background="#232323"
android:text="我不会动"
android:textSize="30dp" /> </LinearLayout>
主布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/parent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <com.xys.scrolltrick.TrickScroll
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" > <FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" > <ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/ic_launcher"
android:scaleType="centerCrop" /> <include
android:id="@+id/stick"
layout="@layout/stick_layout" /> <ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/ic_launcher"
android:scaleType="centerCrop" /> <ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/ic_launcher"
android:scaleType="centerCrop" /> <ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/ic_launcher"
android:scaleType="centerCrop" />
</LinearLayout> <include
android:id="@+id/normal"
layout="@layout/stick_layout" />
</FrameLayout>
</com.xys.scrolltrick.TrickScroll> </LinearLayout>
加入多个imageview是为了让他能滚起来
因为ScrollView中并没有提供scroll listener,因此我们仅仅能重写下,来创建一个接口:
package com.xys.scrolltrick; import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView; public class TrickScroll extends ScrollView { public interface onScrollListener {
public void onScroll(int scrollY);
} private onScrollListener onScrollListener; public TrickScroll(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} public TrickScroll(Context context, AttributeSet attrs) {
super(context, attrs);
} public TrickScroll(Context context) {
super(context);
} public void setOnScrollListener(onScrollListener onsScrollListener) {
this.onScrollListener = onsScrollListener;
} @Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (onScrollListener != null) {
onScrollListener.onScroll(t);
}
}
}
我们给他的滑动。提供一个监听接口。
主程序:
package com.xys.scrolltrick; import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout; import com.xys.scrolltrick.TrickScroll.onScrollListener; public class MainActivity extends Activity implements onScrollListener { private TrickScroll mScroll;
// 正常状态下的布局
private LinearLayout mLayout1;
// 顶部粘至的布局
private LinearLayout mLayout2; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mScroll = (TrickScroll) findViewById(R.id.scrollView);
mLayout1 = (LinearLayout) findViewById(R.id.stick);
mLayout2 = (LinearLayout) findViewById(R.id.normal); mScroll.setOnScrollListener(this); // 根布局状态下。监听布局改变
findViewById(R.id.parent_layout).getViewTreeObserver()
.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override
public void onGlobalLayout() {
onScroll(mScroll.getScrollY());
}
});
} @Override
public void onScroll(int scrollY) {
// 获取正常布局的位置来又一次设置粘至布局的位置
int layoutTop = Math.max(scrollY, mLayout1.getTop());
mLayout2.layout(0, layoutTop, mLayout2.getWidth(),
layoutTop + mLayout2.getHeight());
}
}
当中的核心就在onScroll(int scrollY)这种方法中。我们用max函数来推断当前最大值
这里须要注意2个方法:
1、getTop():该方法返回该view到容器的top像素
2、getScrollY():该方法返回的是。你的scrollview已经滚了多少
-------------------一旦这个世界有了scroll整个世界就不一样了-------------------
知道了这2个方法后。我们就能够推断了,当滚的距离小于getTop()的时候。保持与正常的一样,大于的时候,就须要用getScrollY()了,这个比較难理解,事实上你能够把布局想象成一个纸带,而手机屏幕是一个挖了孔的框,我们在后面从下往上拉纸带,这样就模拟了scroll滑动,这样理解的话,会比較清楚点
以上。
Android顶部粘至视图具体解释的更多相关文章
- Android Touch事件传递机制具体解释 下
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...
- Android 自学之列表视图ListView和ListActivity
ListView是手机系统中使用非常广泛的一种组件,它以垂直列表的形式显示所有列表项. 创建ListView有两种方式: 直接使用ListView创建. 让Activity继承ListActivity ...
- android 测量控件视图的方法
在实际项目中经常要用到 测量一个控件或者视图的高,宽.然后根据这个高宽进行一些逻辑. 计算视图宽高有几种方式先简单的了解下android 视图的绘制过程会促进理解. 一.android View绘制过 ...
- android事件拦截处理机制具体解释
前段时间刚接触过android手机开发.对它的事件传播机制不是非常了解,尽管网上也查了相关的资料,可是总认为理解模模糊糊,似是而非,于是自己就写个小demo測试了一下. 总算搞明确了它的详细机制.写下 ...
- [翻译] Android是怎样绘制视图的
原文:How Android Draws Views 当一个Activity获取到焦点的时候,它的布局就开始被绘制. 绘制的过程由Android framework处理.但布局层级的根节点必须由Act ...
- Android中的自定义视图控件
简介 当现有控件不能满足需求时,就需要自定义控件. 自定义控件属性 自定义控件首先要继承自View,重写两个构造函数. 第一个是代码中使用的: public MyRect(Context contex ...
- Android——GridView(网格视图)相关知识总结贴
Android API中文文档GridView http://www.apkbus.com/android-14131-1-1.html Android API 中文 (15) —— GridVi ...
- Android 自学之滚动视图ScrollView
滚动视图ScrollView由FarmeLayout派生而出,他就是一个用于为普通组件添加垂直滚动条的组件:ScrollView里面最多包含一个组件,而ScrollView的作用就是为该组件添加一个垂 ...
- android学习日记06--SurfaceView视图
一.API关SurfaceView的介绍 SurfaceView是视图(View)的继承类,这个视图里内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸.Surfacev ...
随机推荐
- hiho一下第76周《Suzhou Adventure》
我是菜鸡,我是菜鸡,我是菜鸡....重要的事说三遍 算是第一次做树形dp的题吧,不太难.. 园林构成一棵树,root为1,Hi从root出发,有k个园林必须玩,每个园林游玩后会得到权值w[i],最多玩 ...
- 【BZOJ1565】【NOI2009】植物大战僵尸
好久没写博客了 题目 题目在这里 思路&做法 没什么好说的 应该很容易看出是 最大闭合子图 吧? 不过要注意一下的是,这题 可能有植物是不可能被击溃的 , 所以要先跑一遍 拓扑排序 把这些点排 ...
- shopping car 2.0
#!/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2018/5/13 0013 10:20# @Author : Anthony.Waa# @ ...
- css relative设置top为百分比值
前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...
- outlook 2010 搜索不到邮件
打开outlook 2010 文件, 选项, 加载项, 转到 windows search eamil indexer(打勾) 关闭outlook 控制面板, 索引选项, 高级, 重建索引
- dotnetnuke7.3.3 下弹出对话框(dnnConfirm())的使用
今天用dnn做一个列表里边有一个删除操作,就想做个对话框确定是否删除? 正常理解马上想到js的confirm("")函数,但是发现Dnn把这个函数给重写啦,弹出的对话框竟然是英文的 ...
- Computer Vision的尴尬
原文: Computer Vision是AI的一个非常活跃的领域,每年大会小会不断,发表的文章数以千计(单是CVPR每年就录取300多,各种二流会议每年的文章更可谓不计其数),新模型新算法新应用层出不 ...
- MySQL_视图/触发器/事务/存储过程/函数
视图.触发器.事务.存储过程.函数 视图 视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,可以将该结果集当作表来使用 #创建视 ...
- MongoDB 学习笔记(七):主从复制与副本集
一.主从复制 1.主从复制是一个简单的数据库同步备份的集群技术,如下图:要明确的知道主服务器与从服务器,且从服务器要明确的知道主服务器的存在. 2.在MongoDB中在启动数据库服务时,可以用mast ...
- Ubuntu 18.04 安装 Xfce桌面和VNC的方法
首先安装Xfce4桌面环境.Xfce4是在Unix和Unix-like(Linux, FreeBSD)上运行的开源桌面环境,其特点是快速,轻量,同时拥有美观的交互界面,易于使用. Xfce4的安装十分 ...