模仿赶集网主界面，上下滑动隐藏布局

于 2015-11-11 18:51:45 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： android 文章标签： android 自定义 ScrollerLayout 滑动隐藏View 上下滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/acmnickzhang/article/details/49785285
本文详细阐述了如何使用移动开发技术实现复杂UI布局，包括布局动态调整、颜色渐变效果及弹性滑动机制，旨在提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

思路：

1.如何实现移动：通过调用onlayout布局，不断改变contentView的top值，就能实现黄色区域的上下移动，绿色部分同样道理，但是移动偏移量不一样

2.如何实现绿色部分变暗的效果：仔细看会发现 随着上移，绿色会慢慢变暗。实现的方式是，首先将整改外层的layout设置黑色背景色，然后不断改变hideview(也就是绿色部分)的透明度。

3.弹性滑动：通过ValueAnimator实现弹性滑动（具体看代码）

4.事件分发逻辑：重写了 onInterceptTouchEvent和 onTouchEvent， 如果满足   if((moveLen > 0 && contentViewTop < hideViewHeight && scrollY == 0)
                    || (moveLen < 0 && contentViewTop > 0))  ----------------------①moveLen>0 表示向下移动  那么判断黄色部分的top小于hideView的高度 并且 滚动条在最上面；或则 ②移动上移，并且黄色部分不在标题栏下面；满足以上两个条件，那么拦截下事件，分发给touchEvent，由它来处理黄色移动。否则不拦截，交给子view处理


代码：

package com.demo.android.toolbar_drawlayout_demo.view;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class ScrollViewLayout extends LinearLayout{

    private View hideView;
    private ScrollView contentView;

    private int myHeight; //自己的高度
    private int hideViewHeight;  //隐藏VIEW的高度
    private int contentViewWidth;  //内容VIEW的宽度
    private int contentViewHeight; //内容VIEW的高度

    private float downX;  //按下的x
    private float downY;  //按下的y
//    private long downTime; //记录按下的时间
//    private long upTime;  //记录抬起的时间

    private int moveLen;  //移动距离
    private int contentViewTop;  //当前内容View的top位置
    private float alpha = 0.5f;

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hideView == null && contentView == null){
            init();
        }
    }

    public ScrollViewLayout(Context context) {
        super(context);
        init();
    }

    public ScrollViewLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        myHeight = getMeasuredHeight();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        int top = contentViewTop + moveLen;
        if(contentView != null && top>=0 && top<=hideViewHeight) {
            contentView.layout(0, top, contentViewWidth, myHeight);
            int hideViewTop = -(hideViewHeight - top)/3;
            hideView.layout(0, hideViewTop, contentViewWidth, hideViewHeight);
            hideView.setAlpha(1 - (alpha * (hideViewHeight - top) / hideViewHeight));
//            System.out.println("top = " + top + "   movelen = " + moveLen + "  contentViewTop = " + contentViewTop);
        }
    }

    private void init() {
        hideView = (View)getChildAt(0);
        if(hideView != null) {
            hideViewHeight = hideView.getHeight();
            contentViewTop = hideViewHeight;
        }
        contentView = (ScrollView)getChildAt(1);
        if(contentView != null) {
            contentViewHeight = contentView.getHeight();
            contentViewWidth = contentView.getWidth();
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        int scrollY = contentView.getScrollY();
        if(action == MotionEvent.ACTION_DOWN){
            downX = ev.getX();
            downY = ev.getY();
//            downTime = System.currentTimeMillis();
        } else if(action == MotionEvent.ACTION_MOVE){
            float moveY = ev.getY();
            moveLen = (int)(moveY - downY);
            if((moveLen > 0 && contentViewTop < hideViewHeight && scrollY == 0)
                    || (moveLen < 0 && contentViewTop > 0))
                return true;
            downY = moveY;
        } else if(action == MotionEvent.ACTION_UP){
            saveState();
        }
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if(action == MotionEvent.ACTION_DOWN){
            downX = ev.getX();
            downY = ev.getY();
        } else if(action == MotionEvent.ACTION_MOVE){
            float moveY = ev.getY();
            moveLen = (int)(moveY - downY);
            moveContentView(ev);
//            System.out.println("moveLen = " + moveLen + "  moveY = " + moveY + "  downY = " + downY);
        } else if(action == MotionEvent.ACTION_UP){
            saveState();
//            System.out.println("moveLen = " + moveLen + "  upY = " + ev.getY());
        }
        return false;
    }

    private void saveState() {
        contentViewTop = contentView.getTop();
        smoothMove();
    }

    private void moveContentView(MotionEvent event){
        float moveY = event.getY();
        moveLen = (int)(moveY - downY);
        int top = contentViewTop + moveLen;
        if( top >= 0 && top<= hideViewHeight) {
            requestLayout();
        }
    }

    private void smoothMove(){
        long duration = 300L;  //整体滑动时间
        final int restDistence;
        if(moveLen < 0){
            duration = duration * contentViewTop / hideViewHeight; //计算剩下需要多久时间
            restDistence = -contentViewTop; //剩下需要移动的距离  方向决定 正负
        } else {
            duration = duration * (hideViewHeight - contentViewTop) / hideViewHeight; //计算剩下需要多久时间
            restDistence = (hideViewHeight - contentViewTop); //剩下需要移动的距离  方向决定 正负
        }
//        System.out.println("duration = " +duration + "  restDistence = " + restDistence);
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                moveLen = (int) (restDistence * value);
//                System.out.println("value = " + value + "  moveLen = " + moveLen);
                requestLayout();
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                contentViewTop = contentView.getTop();
                if (contentViewTop < 10) {
                    contentViewTop = 0;  //最后如果还有几像素留着 就清零
                    moveLen = 0;
                }
                if ((hideViewHeight - contentViewTop) < 10) {
                    contentViewTop = hideViewHeight;
                    moveLen = 0;
                }
//                System.out.println("  contentViewTop = " + contentViewTop);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        valueAnimator.start();
    }
}

JAVA 



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="@color/color_weather_bg"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:gravity="center"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:text="标题"
                android:textColor="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        </LinearLayout>

    </android.support.v7.widget.Toolbar>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#fff"/>
    <com.demo.android.toolbar_drawlayout_demo.view.ScrollViewLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <LinearLayout
            android:orientation="vertical"
            android:background="@color/color_weather_bg"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:padding="10dp"
                android:gravity="center_vertical"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/activity_weather_temp"
                    android:textSize="36sp"
                    android:textStyle="bold"
                    android:text="18℃"
                    android:textColor="@color/white"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:src="@mipmap/ic_weather03"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content" />

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_weight="2"
                    android:gravity="center_vertical"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/activity_weather_sky"
                        android:textColor="@color/white"
                        android:text="阵雨"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:id="@+id/activity_weather_ltemp_htemp"
                        android:textColor="@color/white"
                        android:layout_toRightOf="@+id/activity_weather_sky"
                        android:layout_marginLeft="10dp"
                        android:text="最低--最高温度"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:id="@+id/activity_weather_windy"
                        android:textColor="@color/white"
                        android:layout_marginLeft="10dp"
                        android:layout_below="@+id/activity_weather_sky"
                        android:layout_alignLeft="@+id/activity_weather_sky"
                        android:text="南风1级"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                </RelativeLayout>

            </LinearLayout>

            <LinearLayout
                android:padding="10dp"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:text="明天"
                    android:textColor="@color/white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/activity_weak_day"
                    android:text="周五"
                    android:layout_marginLeft="10dp"
                    android:textColor="@color/white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/activity_weather_tommorrow_sky"
                    android:text="多云"
                    android:layout_marginLeft="10dp"
                    android:textColor="@color/white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/activity_weather_tommorrow_ltemp_htemp"
                    android:text="18--25℃"
                    android:layout_marginLeft="10dp"
                    android:textColor="@color/white"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            <RelativeLayout
                android:padding="10dp"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:textColor="@color/white"
                    android:text="空气质量"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/activity_weather_air_level"
                    android:textColor="@color/white"
                    android:text="空气良"
                    android:background="@color/color_orange_bg"
                    android:layout_alignParentRight="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <TextView
                    android:id="@+id/activity_weather_air_level_grade"
                    android:textColor="@color/white"
                    android:text="66"
                    android:layout_toLeftOf="@+id/activity_weather_air_level"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </RelativeLayout>

            <ImageView
                android:background="@mipmap/weather_cloud"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

        <ScrollView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <LinearLayout
                android:background="@color/color_orange_bg"
                android:gravity="center"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />


                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />


                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />


                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />


                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />


                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

                <TextView
                    android:text="Content"
                    android:padding="10dp"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent" />

            </LinearLayout>

        </ScrollView>

    </com.demo.android.toolbar_drawlayout_demo.view.ScrollViewLayout>


</LinearLayout>

布局代码



效果图


评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值