自定义tab吸顶效果一(原理)

时间:2021-06-03 19:41:27

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

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

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

自定义tab吸顶效果一(原理)自定义tab吸顶效果一(原理)

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

先上效果图:

自定义tab吸顶效果一(原理)

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

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

自定义tab吸顶效果一(原理)

<?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

自定义tab吸顶效果一(原理)

<?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);
}
}
}); }
}

完。