不知从某某时间开始,这种效果开始在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>
由于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滑动,这样理解的话,会比较清楚点
以上。
原文地址:http://blog.csdn.net/eclipsexys/article/details/39693573