ListView滑动删除实现之二——scrollTo、scrollBy详解

前言：一个项目终于要结束了，最最坑的莫过于少估了一个巨复杂的页面的开发时间，队长，你这是要多坑队友才行啊……本来定的一个月要看的内容，看来是高估自己能力了，拖拉严重啊，以后要早起了，把早上的时间也利用起来，一天睡九个小时着时有点多……可趴在床上就想睡这可怎么破……

相关文章：

1、《 ListView滑动删除实现之一——merge标签与LayoutInflater.inflate()》

2、《ListView滑动删除实现之二——scrollTo、scrollBy详解》

3、《 ListView滑动删除实现之三——创建可滑动删除的ListView》

4、《ListView滑动删除实现之四——Scroller类与listview缓慢滑动》

上篇给大家讲了有关merge标签和LayoutInflater的相关内容，这篇就开始接触点实际的东东了，这篇给大家讲讲如何通过scrollTo和scrollBy来移动视图范围。

一、scrollTo及scrollBy的真正意义

1、定义

先来看一下scrollTo和scrollBy的用法和含义。

public void scrollTo(int x, int y) public void scrollBy(int x, int y) 

scrollTo:直接将视图原点其移动到目标位置；
scrollBy:在现在视图所在位置的基础上，再向X，Y位置上移动指定像素

2、简单示例

我们先看一个例子，然后再具体讲解，这两个函数的意义。
效果图如下：

在效果图中可以看到：
1、点击scrollTo运行的代码是：scrollTo(100,100)，一次将位置移动到指定位置；多次点击无效。
2、点击scrollBy运行的代码是：scrollBy(50,50)，在现有位置的基础上一次次移动
3、复位使用代码是：scrollTo(0,0)
大家仔细观察可能会发现一个疑问：为什么scrollTo(100,100)，按照正常情况下的坐标正方向来算（向左是X轴正方向，向下是Y轴正方向），不应该往右下方移动吗，为什么这里是往左上方移动呢，正好反过来？
关于这个问题，我们后面再讲，先看看上面效果的代码实现
首先看activity_main.xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    tools:context=".MainActivity" >    <Button        android:id="@+id/btn_scroll_to"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="scroll to" />    <Button        android:id="@+id/btn_scroll_by"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="scroll by" />    <Button        android:id="@+id/btn_scroll_reset"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="复位" />    <LinearLayout        android:id="@+id/root"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center_vertical|right"        android:background="#ff00ff"        android:orientation="vertical">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textSize="20dp"            android:text="@string/hello_world" />    </LinearLayout></LinearLayout>

根据视图效果得出上面的布局代码难度不大，这里要注意的一点是在底部TextView外面包裹了一层LinearLayout，我们调用scrollTo的并不是TextView而是LinearLayout，这也是为什么在布局中，为LinearLayout设置了ID参数：android:id="@+id/root"，而textView却什么都没有的原因。
在MainActivity中的实现如下：

public class MainActivity extends Activity implements View.OnClickListener {    private Button btnScrollTo, btnScrollBy, btnScrollReset;    private LinearLayout rootLinLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btnScrollTo = (Button) findViewById(R.id.btn_scroll_to);        btnScrollBy = (Button) findViewById(R.id.btn_scroll_by);        btnScrollReset = (Button) findViewById(R.id.btn_scroll_reset);        rootLinLayout = (LinearLayout) findViewById(R.id.root);        btnScrollTo.setOnClickListener(this);        btnScrollBy.setOnClickListener(this);        btnScrollReset.setOnClickListener(this);    }    @Override    public void onClick(View v) {        int id = v.getId();        switch (id) {            case R.id.btn_scroll_to: {                rootLinLayout.scrollTo(100, 100);            }            break;            case R.id.btn_scroll_by: {                rootLinLayout.scrollBy(50, 50);            }            break;            case R.id.btn_scroll_reset: {                rootLinLayout.scrollTo(0, 0);            }            break;            default:                break;        }    }}

大家看懂上面的代码难度不大，最关键的是下面几行：

…………rootLinLayout = (LinearLayout) findViewById(R.id.root);…………public void onClick(View v) {    int id = v.getId();    switch (id) {        case R.id.btn_scroll_to: {            rootLinLayout.scrollTo(100, 100);        }        break;        case R.id.btn_scroll_by: {            rootLinLayout.scrollBy(50, 50);        }        break;        case R.id.btn_scroll_reset: {            rootLinLayout.scrollTo(0, 0);        }        break;        default:            break;    }

大家从这里可以看到，我们调用scrollTo和scrollBy的是TextView的LinearLayout，那为什么移动的却是它里面的TextView呢，其实这是个错觉。下面具体分析这个代码的移动过程

源码在文章底部给出

3、ScrollTo的移动过程

我们着重分析这句代码：

rootLinLayout.scrollTo(100, 100);

我们的疑问在于：为什么明明指定的是移动距离是（100，100），即向右移动100，向下移动100，而TextView却明明反过来移动了呢？
看下面这个图：

上面所有的想法都是错误的！！！！我们调用scrollTo的是LinearLayout，那么移动的肯定也是LinearLayout！！！！我们想像一个场景：在一块大布上，你拿着放大镜来回看，随着我们移动放大镜的位置，那显示的区域也就变得不一样。同样的道理，LinearLayout就是我们的一块大画布，而在屏幕上的显示区域就是我们的放大镜！所以我们将放大镜（显示区域）放右下角移动了（100，100），画布是没有变的，也就是说，TextView的位置是没有变的，由于我们的放大镜（显示区域）向右下角移动了（100，100），所以看起来，TextView就向左上方移动的，其实这是个错觉！！！！
那我们又想了，那如果我在原来LinearLayout的右下角有东西的话，而由于显示区域（放大镜）没放在这个位置而没显示出来，那按你这么说，把显示范围往右下角移动了之后，那是不是就可以显示出来了？当然！！我们下面就看个例子！

二、Merge标签的超范围视图显示

先看下示例的效果图：
下面显示的是，整个MainActivity的背景色是紫色，然后我们利用merge标签将两个布局合并在一起，刚开始显示全屏的蓝色page 1，在page 1的旁边有一小条黄色的布局，由于在初始化时蓝色的page 1布满全屏，这时候我们点击scrollBy(50, 50)，将视角往右下方移动，就可以看到随着我们视角的移动的布局变化：首先就可以看到原来看不到的黄色的一条，当黄色和黄色布局都过去的时候，就可以看到原本的activity_mian的底色（紫色）

我们先看一下代码实现，然后再分析整个实现过程：

1、首先，我们看一下主布局（activity_main.xml）：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    tools:context=".MainActivity" >    <Button        android:id="@+id/btn_scroll_by"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="scroll by" />    <com.harvic.com.tryscrolltoscrollby.MyLinearLayout        android:id="@+id/root"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#ff00ff">    </com.harvic.com.tryscrolltoscrollby.MyLinearLayout></LinearLayout>

布局很简单，一个按钮和一个自定义控件，那我们看看这个自定义控件是什么

2、MyLinearLayout 定义

class MyLinearLayout extends LinearLayout {    public MyLinearLayout(Context context, AttributeSet attrs) {        super(context, attrs);        setOrientation(LinearLayout.HORIZONTAL);        LayoutInflater inflater = LayoutInflater.from(context);        inflater.inflate(R.layout.merge_layout,this,true);    }}

从代码中非常容易看出来，MyLinearLayout 派生于LinearLayout，我们在这里只做了两件事，第一：把布局方向设为水平方向布局；第二：将R.layout.merge_layout这个布局加载到它里面来，做为它的子布局；因为在inflater.inflate中，我们将布局的根结点设为了MyLinearLayout本身，而且将attachToRoot参数设为了TRUE；有关inflater.inflate(R.layout.merge_layout,this,true);里第三个参数attachToRoot的含义，在第一篇中已经详细讲述，就是把传进去的LAYOUT做为子结点添加到指定的根结点上，而我们这里指定的根结点就是MyLinearLayout它自已。
下面，我们就来看看这个R.layout.merge_layout布局到底是个什么东东。

3、通过merge标签整个布局

首先，在上一篇中，我们提到merge标签能到将它下面的所有控件并列地添加到根结点中，因为我们这里的根结点是MyLinearLayout，所以下面这两个控件会一个个地添加到MyLinearLayout中，我们看一下merge标签，将两个布局整合在一起的代码：

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/view_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#0000ff"        android:orientation="horizontal" >        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="page 1"            android:textSize="35dp" />    </LinearLayout>     <LinearLayout        android:id="@+id/holder"        android:layout_width="120dp"        android:layout_height="match_parent"        android:clickable="true"        android:background="#ffff00">        <TextView            android:id="@+id/delete"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:layout_gravity="center"            android:textColor="#ff0000"            android:text="删除" />    </LinearLayout></merge>

我们这里定义了两个布局，第一个就是那个背景是蓝色的布局，由于它的layout_width、layout_height参数全部设为match_parent，所以它就直接占据了整个屏幕。而第二个布局，黄色背景的布局，它的宽度设为120dp，高度设为与区域同高。
所以，拼出来图应该是这样子：

红色的框表示MyLinearLayout的显示视角，当我们移动时，它的视角变化就是这样的：

上面就是在视角移动时的，可视区域变化。
当然，最就MainActivity的代码了：

public class MainActivity extends Activity implements View.OnClickListener {    private Button  btnScrollBy;    private MyLinearLayout rootLinLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btnScrollBy = (Button) findViewById(R.id.btn_scroll_by);        rootLinLayout = (MyLinearLayout) findViewById(R.id.root);        btnScrollBy.setOnClickListener(this);    }    @Override    public void onClick(View v) {        int id = v.getId();        switch (id) {            case R.id.btn_scroll_by: {                rootLinLayout.scrollBy(50, 50);            }            break;            default:                break;        }    }}

这里的代码理解起来没什么难度，就是对MyLinearLayout实例调用scrollBy函数，将视角每次同时向右和向下各平移50；
我想通过上面这个例子大家对视角的移动应该都有了较深的认识，下面我们再回过头来看看上面的代码存在什么问题。

4、反思：自定义LinearLayout与merge标签的等价方案

从上面的代码中，我们自定义的控件MyLinearLayout只有这三行代码：

class MyLinearLayout extends LinearLayout {    public MyLinearLayout(Context context, AttributeSet attrs) {        super(context, attrs);        setOrientation(LinearLayout.HORIZONTAL);        LayoutInflater inflater = LayoutInflater.from(context);        inflater.inflate(R.layout.merge_layout,this,true);    }}

其实它什么也没做啊，就是把布局设为水平，然后添加了几个控件。前面我们也讲过,merge代码的作用就是把merge标签下的东东，并列地添加到指定的根结点中。所以，我们自定义的LinearLayout与merge标签部分跟下面的代码是完全等价的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <Button        android:id="@+id/btn_scroll_by"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="scroll by" />    <LinearLayout        android:id="@+id/root"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal"        android:background="#ff00ff">        <LinearLayout            android:id="@+id/view_content"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="#0000ff"            android:orientation="horizontal">            <TextView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:gravity="center"                android:text="page 1"                android:textSize="35dp" />        </LinearLayout>        <LinearLayout            android:id="@+id/holder"            android:layout_width="120dp"            android:layout_height="match_parent"            android:clickable="true"            android:background="#ffff00">            <TextView                android:id="@+id/delete"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerInParent="true"                android:layout_gravity="center"                android:textColor="#ff0000"                android:text="删除" />        </LinearLayout>    </LinearLayout></LinearLayout>

这上面我们把scroll_by Button下面的MyLinearLayout换成了这一坨：

<LinearLayout    android:id="@+id/root"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    android:background="#ff00ff">    <LinearLayout        android:id="@+id/view_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#0000ff"        android:orientation="horizontal">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="page 1"            android:textSize="35dp" />    </LinearLayout>    <LinearLayout        android:id="@+id/holder"        android:layout_width="120dp"        android:layout_height="match_parent"        android:clickable="true"        android:background="#ffff00">        <TextView            android:id="@+id/delete"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:layout_gravity="center"            android:textColor="#ff0000"            android:text="删除" />    </LinearLayout></LinearLayout>

1、首先，把根部的LinearLayout设为水平布局
2、然后把原来merge标签下的所有部分移到这个布局的下面
然后是MainActivity里的操作代码：

public class MainActivity extends Activity implements View.OnClickListener {    private Button btnScrollBy;    private LinearLayout rootLinLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btnScrollBy = (Button) findViewById(R.id.btn_scroll_by);        rootLinLayout = (LinearLayout) findViewById(R.id.root);        btnScrollBy.setOnClickListener(this);    }    @Override    public void onClick(View v) {        int id = v.getId();        switch (id) {            case R.id.btn_scroll_by: {                rootLinLayout.scrollBy(50, 50);            }            break;            default:                break;        }    }}

同样，当点击scrollBy按钮时，一步步向右下角移动id为root的LinearLayout布局的视角。这里的效果与上面效果完全一致。

三、更正

本文中提到了视角的移动，这样理解起来就会更容易一些，但在源码中实际情况并不是这样的，而是在重绘时invalidate()中：

tmpr.set(l - scrollX, t - scrollY, r - scrollX, b - scrollY);p.invalidateChild(this, tmpr);

直接将scrollX,scrollY作为减数传到重绘区域中(tmpr)，然后根据这个坐标来重绘所有子控件，就是是为什么当scrollX为正时，子控件往左移动的根本的原因

更多内容请参考：《Android源码角度分析View的scrollBy()和scrollTo()的参数正负问题》

好了，到这里就结束了，到这有关移动的知识基本就讲完了，下面就来实现滑动删除的效果了，嘿嘿。

如果本文有帮到你，记得加关注哦

源码地址：http://download.csdn.net/detail/harvic880925/8622517

请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/45176813 谢谢