• Android顶部粘至视图具体解释


    不知从某某时间開始,这样的效果開始在UI设计中流行起来了。让我们先来看看效果:


    大家在支付宝、美团等非常多App中都有使用。要实现这个效果,我们能够来分析下思路:

    我们肯定要用2个一样的布局来显示我们的粘至布局。一个是正常的、还有一个是到顶部不动的。正常的那个,随着scroll一起滚,该滚到哪滚到哪。仅仅是他滚到最上面的时候,

    我们须要用粘至的布局,放到顶部。当然。他还在后面继续滚,ok。如今我们来看看详细怎样实现:

    先看布局,just a demo。用几张图片略微做做样子。

    粘至布局:

    <?

    xml version="1.0" encoding="UTF-8"?

    > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="50dp" android:orientation="horizontal" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textColor="#FFFFFF" android:background="#232323" android:text="我不会动" android:textSize="30dp" /> </LinearLayout>


    主布局:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <com.xys.scrolltrick.TrickScroll
            android:id="@+id/scrollView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
    
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >
    
                    <ImageView
                        android:id="@+id/iamge"
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="@drawable/ic_launcher"
                        android:scaleType="centerCrop" />
    
                    <include
                        android:id="@+id/stick"
                        layout="@layout/stick_layout" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="@drawable/ic_launcher"
                        android:scaleType="centerCrop" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="@drawable/ic_launcher"
                        android:scaleType="centerCrop" />
    
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="@drawable/ic_launcher"
                        android:scaleType="centerCrop" />
                </LinearLayout>
    
                <include
                    android:id="@+id/normal"
                    layout="@layout/stick_layout" />
            </FrameLayout>
        </com.xys.scrolltrick.TrickScroll>
    
    </LinearLayout>

    加入多个imageview是为了让他能滚起来

    因为ScrollView中并没有提供scroll listener,因此我们仅仅能重写下,来创建一个接口:

    package com.xys.scrolltrick;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.widget.ScrollView;
    
    public class TrickScroll extends ScrollView {
    
    	public interface onScrollListener {
    		public void onScroll(int scrollY);
    	}
    
    	private onScrollListener onScrollListener;
    
    	public TrickScroll(Context context, AttributeSet attrs, int defStyleAttr) {
    		super(context, attrs, defStyleAttr);
    	}
    
    	public TrickScroll(Context context, AttributeSet attrs) {
    		super(context, attrs);
    	}
    
    	public TrickScroll(Context context) {
    		super(context);
    	}
    
    	public void setOnScrollListener(onScrollListener onsScrollListener) {
    		this.onScrollListener = onsScrollListener;
    	}
    
    	@Override
    	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    		super.onScrollChanged(l, t, oldl, oldt);
    		if (onScrollListener != null) {
    			onScrollListener.onScroll(t);
    		}
    	}
    }
    

    我们给他的滑动。提供一个监听接口。

    主程序:

    package com.xys.scrolltrick;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.ViewTreeObserver.OnGlobalLayoutListener;
    import android.widget.LinearLayout;
    
    import com.xys.scrolltrick.TrickScroll.onScrollListener;
    
    public class MainActivity extends Activity implements onScrollListener {
    
    	private TrickScroll mScroll;
    	// 正常状态下的布局
    	private LinearLayout mLayout1;
    	// 顶部粘至的布局
    	private LinearLayout mLayout2;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		mScroll = (TrickScroll) findViewById(R.id.scrollView);
    		mLayout1 = (LinearLayout) findViewById(R.id.stick);
    		mLayout2 = (LinearLayout) findViewById(R.id.normal);
    
    		mScroll.setOnScrollListener(this);
    
    		// 根布局状态下。监听布局改变
    		findViewById(R.id.parent_layout).getViewTreeObserver()
    				.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    
    					@Override
    					public void onGlobalLayout() {
    						onScroll(mScroll.getScrollY());
    					}
    				});
    	}
    
    	@Override
    	public void onScroll(int scrollY) {
    		// 获取正常布局的位置来又一次设置粘至布局的位置
    		int layoutTop = Math.max(scrollY, mLayout1.getTop());
    		mLayout2.layout(0, layoutTop, mLayout2.getWidth(),
    				layoutTop + mLayout2.getHeight());
    	}
    }
    

    当中的核心就在onScroll(int scrollY)这种方法中。我们用max函数来推断当前最大值


    这里须要注意2个方法:

    1、getTop():该方法返回该view到容器的top像素

    2、getScrollY():该方法返回的是。你的scrollview已经滚了多少

    -------------------一旦这个世界有了scroll整个世界就不一样了-------------------

    知道了这2个方法后。我们就能够推断了,当滚的距离小于getTop()的时候。保持与正常的一样,大于的时候,就须要用getScrollY()了,这个比較难理解,事实上你能够把布局想象成一个纸带,而手机屏幕是一个挖了孔的框,我们在后面从下往上拉纸带,这样就模拟了scroll滑动,这样理解的话,会比較清楚点


    以上。


  • 相关阅读:
    QBoxLayout中setSpacing(int)和addSpacing(int)的区别
    BZOJ1017 树形DP
    树形DP 2415HDU
    树形DP基础题 HDU1520
    最小生成树个数 并查集压缩路径
    伸展树基本概念基本题目
    BZOJ1010单调性DP优化
    BZOJ1009 矩阵快速幂+DP+KMP
    字典树(数组实现)
    poj 1611 The Suspects(并查集输出集合个数)
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7077769.html
Copyright © 2020-2023  润新知