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. Html吸顶效果

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

  4. 基于scroll的吸顶效果

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

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

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

  6. js之吸顶效果

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

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

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

  8. 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...

  9. Vue开发——实现吸顶效果

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...

随机推荐

  1. 浅谈Linux中的信号处理机制(二)

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  2. Eclipse利用Maven2搭建SpringMVC框架的Web工程

    一.准备工作: 下载apache-maven--> 配置Maven_home -->下载Eclipse Maven插件 二.新建工程:   选择新建Maven Project  arche ...

  3. owl-carousel轮播插件的使用

    插件github地址:https://github.com/OwlFonk/OwlCarousel: 插件官网演示地址:http://owlgraphic.com/owlcarousel/: 1.选择 ...

  4. iOS:插件制作入门

    本文将介绍创建一个Xcode4插件所需要的基本步骤以及一些常用的方法.请注意为Xcode创建插件并没有任何的官方支持,因此本文所描述的方法和提供的信息可能会随Apple在Xcode上做的变化而失效.另 ...

  5. ubuntu安装配置gradle

    在Ubuntu安装Gradle也是很简单.切记请勿使用apt-get安装Gradle.因为Ubuntu源的Gradle实在太旧.安装好基本不能用. 下面是安装步骤: 1.在官网下载最新的Gradle版 ...

  6. Java 遍历文件下jpg图片并解析图片

      package filetest; import java.io.File; import java.io.FilenameFilter; import java.io.IOException; ...

  7. linux下显示不规则图片窗口

    测试环境是ubuntu15.04,使用的图形库是gtk+. 图片格式采用的是X11的xpm格式,首先从网上找一个背景透明的png图片,然后用图形转换工具(比如gimp)转换为xpm格式. 程序代码如下 ...

  8. 【学习】数据处理基础知识(汇总和计算描述统计)【pandas】

    pd对象拥有一组常用的数学和统计方法.大部分都属于约简和汇总统计,用于从Series中单个值,如sum 和 mean 或从DF的行或列中提取一个Series. 1. 描述和汇总统计方法 #汇总和计算描 ...

  9. Java 多生产者消费者问题

    /* 生产者,消费者.   多生产者,多消费者的问题. if判断标记,只有一次,会导致不该运行的线程运行了.出现了数据错误的情况. while判断标记,解决了线程获取执行权后,是否要运行!   not ...

  10. linux-CentOS6.4安装Memcached+memcached扩展+安装memcache扩展+Memcache+mecached同步SESSION的几种方法

    一.编译环境的准备 yum install gcc  yum install gcc-c++ libstdc++-devel  yum install zlib-devel 二.源代码包准备 wget ...