自定义tab吸顶效果一

PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用?
在很多app商城中,介绍软件的时候就会使用吸顶效果,
吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模块,不需要再滑到顶部,有时我们在查看一个软件的简介的时候上拉布局,导航栏还在,这里以App Store为例:如
自定义tab吸顶效果一
文章图片
自定义tab吸顶效果一
文章图片


吸顶该怎么用呢,这里有一个简单的实现方法,在这期间有一个问题,是说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
自定义tab吸顶效果一
文章图片





这里有个导航栏的布局,bottom layout.xml
自定义tab吸顶效果一
文章图片










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吸顶效果一】

    推荐阅读