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. 设置SO_RECVBUF和SO_SENDBUF套接字选项

    控制套接字的行为(如修改缓冲区的大小). int getsockopt(int sockfd,int level,int optname,void *optval,socklen_t *optlen) ...

  2. Ocelot网关

    Ocelot是一个.net core框架下的网关的开源项目,下图是官方给出的基础实现图,即把后台的多个服务统一到网关处,前端应用:桌面端,web端,app端都只用访问网关即可. Ocelot的实现原理 ...

  3. mysql 双机热备注意事项

    上一篇文章已经介绍过    主从复制,   本文对主从复制只是简单描述,如对主从复制不清楚的,可以先看上一篇文章   主从复制  一:介绍 mysql版本:5.7.20 第一个主服服务器ip:192. ...

  4. 2017蓝桥杯省赛C/C++B(补题中)

    标题:等差素数列 2,3,5,7,11,13,....是素数序列. 类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列公差为30,长度为6. 200 ...

  5. fiddler+android抓包工具配置使用

    今天临时增加一个工作,手机需要抓包,查看了不同的抓包工具,最后确定使用fiddler抓包工具进行操作,这里以android为例记录一下工具的配置和使用操作. fiddler的安装 网上有很多fiddl ...

  6. otter双A同步配置

    otter双A配置 最近做跨国服务器的数据同步,用了阿里的otter开源框架,遇到了不少问题,写一下文档为以后做参考. 第一步: 下载所需的文件 :otter,zookeeper,aria2 otte ...

  7. mongoDB之数据类型

    mongoDB之数据类型 Object  ID :文档的id String: 字符串,最常用,必须是utf-8 Boolean:布尔值,true 或者false Integer:整数 Double:浮 ...

  8. windows环境Caffe安装配置步骤(无GPU)及mnist训练

    在硕士第二年,义无反顾地投身到了深度学习的浪潮中.从之前的惯性导航转到这个方向,一切从头开始,在此,仅以此文记录自己的打怪之路. 最初的想法是动手熟悉Caffe,考虑到直接上手Ubuntu会有些难度, ...

  9. idea快速搭建springboot项目

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置',实现零配置. 那么,如何在idea中创建一个spri ...

  10. C#将dataGridView中显示的数据导出到Excel(大数据量超有用版)

    开发中非常多情况下须要将dataGridView控件中显示的数据结果以Excel或者Word的形式导出来,本例就来实现这个功能. 因为从数据库中查找出某些数据列可能不是必需显示出来,在dataGrid ...