Android顶部粘至视图详解

泡在网上的日子 / 文 发表于2014-11-26 11:27 次阅读

转自:eclipse_xu的博客


不知从某某时间开始,这种效果开始在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滑动,这样理解的话,会比较清楚点


收藏 赞 (0) 踩 (1)
上一篇:android中如何下载文件并显示下载进度
最近开发中遇到需要下载文件的问题,对于一般的下载来说不用考虑断点续传,不用考虑多个线程,比如下载一个apk之类的,这篇文章讨论的就是这种情形。 这里主要讨论两种方式:AsyncTask和Service。 一、使用AsyncTask并在进度对话框中显示下载进度 这种方式的
下一篇:app开发的一些设计资源
背景资源 http://subtlepatterns.com/ ICON资源 https://www.iconfinder.com/ HOLO Color生成器 http://android-holo-colors.com/