不知从某某时间開始,这样的效果開始在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顶部粘至视图具体解释的更多相关文章

  1. Android Touch事件传递机制具体解释 下

    尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...

  2. Android 自学之列表视图ListView和ListActivity

    ListView是手机系统中使用非常广泛的一种组件,它以垂直列表的形式显示所有列表项. 创建ListView有两种方式: 直接使用ListView创建. 让Activity继承ListActivity ...

  3. android 测量控件视图的方法

    在实际项目中经常要用到 测量一个控件或者视图的高,宽.然后根据这个高宽进行一些逻辑. 计算视图宽高有几种方式先简单的了解下android 视图的绘制过程会促进理解. 一.android View绘制过 ...

  4. android事件拦截处理机制具体解释

    前段时间刚接触过android手机开发.对它的事件传播机制不是非常了解,尽管网上也查了相关的资料,可是总认为理解模模糊糊,似是而非,于是自己就写个小demo測试了一下. 总算搞明确了它的详细机制.写下 ...

  5. [翻译] Android是怎样绘制视图的

    原文:How Android Draws Views 当一个Activity获取到焦点的时候,它的布局就开始被绘制. 绘制的过程由Android framework处理.但布局层级的根节点必须由Act ...

  6. Android中的自定义视图控件

    简介 当现有控件不能满足需求时,就需要自定义控件. 自定义控件属性 自定义控件首先要继承自View,重写两个构造函数. 第一个是代码中使用的: public MyRect(Context contex ...

  7. Android——GridView(网格视图)相关知识总结贴

    Android API中文文档GridView http://www.apkbus.com/android-14131-1-1.html   Android API 中文 (15) —— GridVi ...

  8. Android 自学之滚动视图ScrollView

    滚动视图ScrollView由FarmeLayout派生而出,他就是一个用于为普通组件添加垂直滚动条的组件:ScrollView里面最多包含一个组件,而ScrollView的作用就是为该组件添加一个垂 ...

  9. android学习日记06--SurfaceView视图

    一.API关SurfaceView的介绍 SurfaceView是视图(View)的继承类,这个视图里内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸.Surfacev ...

随机推荐

  1. .net 获取当前网页的的url

    正确的方法是:HttpContext.Current.Request.Url.PathAndQuery1.通过ASP.NET获取 如果测试的url地址是http://www.test.com/test ...

  2. P1629 邮递员送信(未完成)

    题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员每 ...

  3. Tomcat应用通过Nat123部署到外网(Tomcat+Nat123)

    这里吐槽下,我先想到的方式是用花生壳域名解析,但是花生壳坑太多不易新手操作,用户体验做的不好.然后度娘后才知道有Nat123这个比花生壳简易操作的软件. 1.到nat123官网下载客户端  http: ...

  4. Arduino UNO R3

    Arduino 常见型号 当然还有 LilyPad,附图: 最常见的自然是UNO,最新版是第三版R3: 国内也有一些改进的板子.我用的是一般的板子,拿到货也只能默默了. 简介 The Uno is a ...

  5. 几个方便编程的C++特性

    前言: C++11的自动化特性给编程提供了不少方便,同时也给调试增加了很多负担,至于取舍看程序员的风格和侧重而定. auto:自动类型推断 在C++11之前,auto关键字用来指定存储期.在新标准中, ...

  6. 读书笔记「Python编程:从入门到实践」_2.变量和简单数据类型

    做了大半年RPA了,用的工具是Kapow. 工作没有那么忙,不想就这么荒废着,想学点什么.就Python吧. 为期三个月,希望能坚持下来. 2.1 变量的命名和使用 变量名只能包含字母.数字和下划线. ...

  7. 04--奠定MYSQL江湖地位的开发注意要点

    为不同的行业提供不同的MYSQL应用场景 吴炳锡老师谈到,不同行业的业务有不同的特点,选择好一个适合自己行业的MYSQL应用场景至关重要. 互联网行业 速度一直都是互联网发展的第一要义,互联网行业所使 ...

  8. JS 20180416课时训练

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. eclipse创建maven的ssm项目

    自己接触ssm框架有一段时间了,从最早的接触新版ITOO项目的(SSM/H+Dobbu zk),再到自己近期来学习到的<淘淘商城>一个ssm框架的电商项目.用过,但是还真的没有自己搭建过, ...

  10. windows mongodb启动

    D:\MongoDB\bin\mongod.exe --service --dbpath D:\MongoDB\data --logpath=D:\MongoDB\logs\mongodb.log - ...