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滑动，这样理解的话，会比較清楚点

以上。

巴特西

Android顶部粘至视图具体解释

最新文章

热门文章