自定义滚的CustomScrollView

1、常见的滚动视图控件

Android中常用的滚动控件有ScrollView、ListView、GridView、ExpandListView等。

2、视图滚动原理

在android中，视图模式是层叠卡片式的，但又和现实中的层叠卡片有些区别。例如，把屏幕当然一张卡片，每一个view控件都是直接或者是间接地层叠在屏幕之上的，如下面这张图。

screen处于卡片的底部，container叠在screen之上，在container这张卡片中，又贴有childview这张卡片。
如上示例图，container的明显比childview要小，如果完全按物理显示的话，childview就将与container同一个等级的视图卡片挡住。
在android中，子view的显示大小，由其所在的父view决定。
因此，虽然childview比container大小要大很多，但是在屏幕中也只求显示container大小的部分，超过container大小的部分，已经被系统遮盖住了。

这时候，为了将childview被遮盖的内容显示出来，视图滚动就因此而生了。
我们可以想像这样的一个情景：把childview一点一点的往上挪动，这时候，childview被遮盖住的内容是不是就可以显示出来了？
答案是肯定的。
android中的滚动，正是基于此原理而形成的。

实现滚动的例子

布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000"
    android:orientation="vertical" >

    <com.example.customscroller.CustomScrollerView
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#0000FF"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/customscrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="001"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="002"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="003"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="004"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="005"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="006"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="007"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="008"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="009"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="#123456"
                android:gravity="center"
                android:text="010"
                android:textColor="#FFFFFF"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#FFFFFF" />
        </LinearLayout>
    </com.example.customscroller.CustomScrollerView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#987654"
        android:gravity="center"
        android:text="区外"
        android:textColor="#FFFFFF"
        android:textSize="40sp" />

</LinearLayout>

CustomScrollerView.java

package com.example.customscroller;

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

/**
* @author winway-laohw
* @time 2017年11月21日 下午2:29:26
*/
public class CustomScrollerView extends LinearLayout {

    public CustomScrollerView(Context context) {
        super(context);
    }

    @SuppressLint("NewApi")
    public CustomScrollerView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        // TODO Auto-generated constructor stub
    }

    public CustomScrollerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public CustomScrollerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    private View childview;
    private MarginLayoutParams params;
    private float scrollY = 0;
    private float downY = 0;
    int maxHeight = 0;

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        if (null == childview) {
            childview = getChildAt(0);
            maxHeight = childview.getHeight();
        }
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            downY = ev.getY();
        }
        if (ev.getAction() == MotionEvent.ACTION_MOVE) {
            if (null == params) {
                params = (MarginLayoutParams) childview.getLayoutParams();
            }
            float move = ev.getY() - downY;
            params.topMargin = (int) (scrollY + move);
            childview.setLayoutParams(params);
        }
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            scrollY = scrollY + ev.getY() - downY;
        }
        return true;
    }
}

MainActivity.java

package com.example.customscroller;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}