自定义tab吸顶效果一（原理）

cMusketeer

发布于 2018-03-28 10:55:13

2.1K0

发布于 2018-03-28 10:55:13

文章被收录于专栏：Android机器圈Android机器圈

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






    }
}

完。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-12-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

android

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

android

登录后参与评论

0 条评论

热度

自定义tab吸顶效果一（原理）

自定义tab吸顶效果一（原理）

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐