Android 简单实现控件滑动固定效果

效果图:

控件滑动固定

实现思路:

  首先我们需要实时的获取滑动的Y值scrollDistanceY(可以理解为滑动了的距离),可以通过ScrollView的getScrollY();方法来获取。我们继承ScrollView重写Touch方法,随触摸事件反馈scrollDistanceY。需要特殊处理手指离开后屏幕还在滑动导致 scrollDistanceY改变的情况。
  在xml布局中,绿色的固定布局View我们需要写两个,一个与头部布局重合,位于APP顶部,另一个与列表中。在Activity我们获取内部固定布局距离顶部的高度,与我们实时获取的scrollDistanceY做比较,控制外部固定布局是否显示,达到效果图的效果。

代码实现:

  1. 重写ScrollView,实时反馈scrollDistanceY
package com.wusy.adv;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;


/**
 * Created by XIAO RONG on 2018/8/23.
 * 这是一个能够实时向主View提供滑动距离Y值的ScrollView(滑动的高度)
 * 能够运用此ScrollView实现在内部View固定顶部布局的需求
 */

public class FixedHeadScrollView extends ScrollView{
    public FixedHeadScrollViewListener listener;
    private int scrollDistanceY;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case 1:
                    int newY=getScrollY();//在手指离开屏幕的短暂时间间隔后再次获取Y值
                    if(newY!=scrollDistanceY){//如果不相等,说明手指离开后,屏幕仍然在滑动,继续更新scrollDistanceY的值
                        scrollDistanceY=newY;
                        listener.sendDistanceY(scrollDistanceY);
                        handler.sendEmptyMessageDelayed(1,5);
                    }
                    break;
            }
        }
    };
    public FixedHeadScrollView(Context context) {
        this(context,null);
    }

    public FixedHeadScrollView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public FixedHeadScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if(ev.getAction()==MotionEvent.ACTION_UP){
            handler.sendEmptyMessageDelayed(1,30);
        }
        scrollDistanceY=getScrollY();
        listener.sendDistanceY(scrollDistanceY);
        return super.onTouchEvent(ev);

    }

    public interface  FixedHeadScrollViewListener{
        void sendDistanceY(int distance);
    }

    public void setFixedHeadScrollViewListener(FixedHeadScrollViewListener listener) {
        this.listener = listener;
    }
}
  1. 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"
    android:id="@+id/layout_total">

    <com.wusy.adv.FixedHeadScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/layout_head"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#e21919"
                android:gravity="center"
                android:text="头部布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:id="@+id/layout_fixed_inside"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#10e91b"
                android:gravity="center"
                android:text="固定布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />


            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#19ace2"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#d408bc"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#f7eb00"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#192de2"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#19ace2"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#d408bc"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#f7eb00"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="#192de2"
                android:gravity="center"
                android:text="列表布局"
                android:textColor="#ffffff"
                android:textSize="17dp" />
        </LinearLayout>

    </com.wusy.adv.FixedHeadScrollView>

    <TextView
        android:id="@+id/layout_fixed_outside"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#10e91b"
        android:gravity="center"
        android:visibility="gone"
        android:text="固定布局"
        android:textColor="#ffffff"
        android:textSize="17dp" />
</RelativeLayout>
  1. Activity中,实现FixedHeadScrollView提供的接口。获取内层固定布局距离固定位置的高度,与scrollDistanceY比较,当内层固定布局达到固定位置,则显示外层固定布局,反之隐藏。
package com.wusy.adv;

import android.util.Log;
import android.view.View;
import android.widget.TextView;

import com.wusy.wusylibrary.base.BaseActivity;

/**
 * Created by XIAO RONG on 2018/8/23.
 */

public class HomeActivity extends BaseActivity implements FixedHeadScrollView.FixedHeadScrollViewListener{
    private TextView layout_inside,layout_outside;
    private int topDistance;
    private FixedHeadScrollView scrollView;

    @Override
    public int getContentViewId() {
        return R.layout.activity_home;
    }

    @Override
    public void findView() {
        layout_inside=findViewById(R.id.layout_fixed_inside);
        layout_outside=findViewById(R.id.layout_fixed_outside);
        scrollView=findViewById(R.id.scrollview);
    }

    @Override
    public void init() {
        scrollView.setFixedHeadScrollViewListener(this);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hasFocus){
            topDistance=layout_inside.getTop();
            Log.i("msg","topDistance="+topDistance);
        }
    }

    @Override
    public void sendDistanceY(int distance) {
        Log.i("msg","看这里——"+distance);
        if(distance>=topDistance){
            layout_outside.setVisibility(View.VISIBLE);
        }else{
            layout_outside.setVisibility(View.GONE);
        }
    }
}

注意:

  1. 在获取内部固定布局距离顶部的距离的时候,不要在onCreate()中去执行,由于界面还没有完全绘制完成,获取到的距离值永远为0。建议在onWindowFocusChanged()中去获取。
  2. xml中,外部固定布局一定要放在scrollView外面。
  3. 记得处理手指离开屏幕后,界面仍然在滑动,导致外层固定布局的显示隐藏控制有误。

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=32rm642dvbr7

End

笔者的Github Blog,希望各位大大提意见,点个star,谢谢
传送门:WusyBlog

求互粉互赞,互赞所有文章可以私聊我。哈哈,希望我们的原创文章能让更多朋友看到,一起变强。

笔者新开通了微信公众号——饮水思源|wusy 计划持续运营,每日为您分享Android干货、原创文章。微信扫描下方的二维码关注我,开发学习路上不迷路。谢谢各位


饮水思源|wusy.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容