PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用?

在很多app商城中,介绍软件的时候就会使用吸顶效果,

吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模块,不需要再滑到顶部,有时我们在查看一个软件的简介的时候上拉布局,导航栏还在,这里以App Store为例:如

吸顶该怎么用呢,这里有一个简单的实现方法,在这期间有一个问题,是说ScrollViewd的滑动监听不能检测布局距离的问题,我查了写资料,说是在6.0之前的sdk不支持,但是可以自己重写方法。反正重写很简单。

先上效果图:

实现原理:创建两个布局,这两个布局处于重叠状态,一个布局上面显示   背景为蓝色+导航栏+数据内容,注意这里的导航栏随着布局可移动,第二个布局显示导航栏但处于影藏状态,当滑动屏幕时,蓝色部分全部被拉上去后,第二个布局显示导航栏即可。

1:首先重写ScrollView里的滑动方法,可创建一个接口,来实现接口里的方法即可

 public interface ScrollViewListener {
void onScrollChanged(MyScrollView1 ceshimy, int l, int t, int oldl, int oldt);
}

MyScrollView1.java


package cn.views;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.ScrollView; /**
* Created by cMusketeer on 17/11/21.
*
* @author 刘志通
*/
public class MyScrollView1 extends ScrollView {
public ScrollViewListener scrollViewListener = null; public MyScrollView1(Context context) {
super(context);
} public MyScrollView1(Context context, AttributeSet attrs) {
super(context, attrs);
} public MyScrollView1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} @TargetApi(Build.VERSION_CODES.LOLLIPOP)
public MyScrollView1(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
} //上面都是自动生成的,下面为正文,是实现接口方法。
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
} @Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, l, t, oldl, oldt);
}
} public interface ScrollViewListener {
void onScrollChanged(MyScrollView1 ceshimy, int l, int t, int oldl, int oldt);
}
}

2:布局文件创建ceshilayout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"> <cn.views.MyScrollView1
android:id="@+id/id_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"> <RelativeLayout
android:id="@+id/id_zong"
android:layout_width="match_parent"
android:layout_height="match_parent"> <RelativeLayout
android:id="@+id/id_img"
android:layout_width="match_parent"
android:layout_height="300px"
android:layout_centerHorizontal="true"
android:background="@color/colorPrimary"
android:gravity="center"> <ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="false"
android:src="@mipmap/ic_launcher" />
</RelativeLayout> <RelativeLayout
android:id="@+id/wenzi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/id_img">
<include layout="@layout/bottomlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></include>
</RelativeLayout>
<TextView
android:layout_below="@id/wenzi"
android:textSize="20dp"
android:text=" Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用“安卓”或“安致”。Android操作系统最初由Andy Rubin开发,主要支持手机。2005年8月由Google收购注资。2007年11月,Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式,发布了Android的源代码。第一部Android智能手机发布于2008年10月。Android逐渐扩展到平板电脑及其他领域上,如电视、数码相机、游戏机等。2011年第一季度,Android在全球的市场份额首次超过塞班系统,跃居全球第一。 2013年的第四季度,Android平台手机的全球市场份额已经达到78.1%。[1] 2013年09月24日谷歌开发的操作系统Android在迎来了5岁生日,全世界采用这款系统的设备数量已经达到10亿台。"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </RelativeLayout> </cn.views.MyScrollView1> <RelativeLayout
android:id="@+id/id_xianshi"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<include layout="@layout/bottomlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></include>
</RelativeLayout> </RelativeLayout>

这里有个导航栏的布局,bottom layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#f5f4f4"
android:layout_height="51dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:textSize="20dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:textColor="#3e66dc"
android:text="简介"/> <TextView
android:textColor="#50dc3e"
android:gravity="center"
android:textSize="20dp"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:text="评论" />
<TextView
android:textColor="#50dc3e"
android:gravity="center"
android:textSize="20dp"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:text="相关" /> </LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/colorPrimary"></View> </LinearLayout>

3:关键代码,然而也就那么几行,不过需要注意的是,在xml文件中,蓝色背景的部分为300px,如果是300dp,则要把dp转成px单位。

scrollView.setScrollViewListener(new MyScrollView1.ScrollViewListener() {

            @Override
public void onScrollChanged(MyScrollView1 ceshimy, int l, int t, int oldl, int oldt) {
//需要注意的是这里比较是px单位,如果是dp还要转成px。
if(t>=300){
tv_show.setVisibility(View.VISIBLE);
}else{
tv_show.setVisibility(View.GONE);
}
}
});
 

CeshiActivity.java总代码

package day1.cn.xiaohangjia;

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.RelativeLayout; import cn.views.MyScrollView1; /**
* Created by cMusketeer on 17/11/21.
*
* @author 刘志通
*/
public class CeShiActivity extends AppCompatActivity { private RelativeLayout tv_show; @TargetApi(Build.VERSION_CODES.M)
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
setContentView(R.layout.ceshilayout); MyScrollView1 scrollView= (MyScrollView1) findViewById(R.id.id_scrollview);
tv_show = (RelativeLayout) findViewById(R.id.id_xianshi);
scrollView.setScrollViewListener(new MyScrollView1.ScrollViewListener() { @Override
public void onScrollChanged(MyScrollView1 ceshimy, int l, int t, int oldl, int oldt) {
//需要注意的是这里比较是px单位,如果是dp还要转成px。
if(t>=300){
tv_show.setVisibility(View.VISIBLE);
}else{
tv_show.setVisibility(View.GONE);
}
}
}); }
}

完。

自定义tab吸顶效果一(原理)的更多相关文章

  1. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  2. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  3. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

  4. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  5. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  6. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  7. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  9. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

随机推荐

  1. 五、Hadoop学习笔记————调优之硬件选择

    ResourceManageer服务器需要选择性能较好的 若有1TB数据,每天增量为10GB,则需要预留17.8TB,*3是因为有三分备份,*1.3是因为还需要预留出空间给操作系统等等 若集群在三十台 ...

  2. 【微服务】之二:从零开始,轻松搞定SpringCloud微服务系列--注册中心(一)

    微服务体系,有效解决项目庞大.互相依赖的问题.目前SpringCloud体系有强大的一整套针对微服务的解决方案.本文中,重点对微服务体系中的服务发现注册中心进行详细说明.本篇中的注册中心,采用Netf ...

  3. PHP面向对象之const常量修饰符

    在PHP中定义常量是通过define()函数来完成的,但在类中定义常量不能使用define(),而需要使用const修饰符.类中的常量使用const定义后,其访问方式和静态成员类似,都是通过类名或在成 ...

  4. Mac中配置nvm

    1.安装 nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 安装成功默认将 ...

  5. codeforces 895A Pizza Separation 枚举

    codeforces 895A Pizza Separation 题目大意: 分成两大部分,使得这两部分的差值最小(注意是圆形,首尾相连) 思路: 分割出来的部分是连续的,开二倍枚举. 注意不要看成0 ...

  6. 51Nod 1284 2 3 5 7的倍数 容斥原理

    1284 2 3 5 7的倍数基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注给出一个数N,求1至N中,有多少个数不是2 3 5 7的倍数. 例如N = 1 ...

  7. Centos下抓包

    刚才遇到一个问题,微信配置时token总是失败. 于是抓一下服务器的包.看看是否是数据传输出了问题. 先安装工具 [Shell] 纯文本查看 复制代码 ? 1 yum install -y wires ...

  8. 利用spring,实现package下的类扫描

    项目中需要用到包扫描的情况是很多的,一般是在项目初始化的时候,根据一些条件来对某个package下的类进行特殊处理.现在想实现的功能是,在一个filter或interceptor初始化的时候,扫描指定 ...

  9. System.Security.Cryptography.RSA.FromXmlString 系统找不到指定的文件和X509读取证书文件系统找不到指定的文件异常

    前言: 最近公司增加服务器,在新增加的服务器中发现一些问题. 1.应用程序在读取证书文件中出现"系统找不到指定的文件."异常,但是已经确认证书文件存在.本地测试也可以读取,就在新增 ...

  10. 游标遍历所有数据库循环执行修改数据库的sql命令

    MSSQL数据库服务器上有很多类似的数据库,需要将这些数据库统一修改其中的某些表或者某些命令,那么就会想到用游标来遍历. 先来说思路: 1,首先需要查询出所有的数据库: select [name] f ...