关于ViewDragHelper通过addView动态修改UI的坑

ViewDragHelper是用来处理触摸滑动操作的一个很强大的帮助类。最近我在用它做一个类似365日历的时候，碰到了一个坑，特意写出来免得有更多的人跳进去

来看看一个demo

先来写一个简单的 ScrollLayout 可以让内部的控件进行上下滑动，先来看看整体的布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.haibuzou.viewdragheiper.MainActivity">    <com.haibuzou.viewdragheiper.ScrollLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <LinearLayout            android:id="@+id/content_layout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <TextView                android:id="@+id/top_text"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" />            <Button                android:id="@+id/button"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="点我刷新" />            <TextView                android:id="@+id/bottom_text"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="\n\n\" />        </LinearLayout>    </com.haibuzou.viewdragheiper.ScrollLayout></RelativeLayout>

ScrollLayout中放入一个子layout：content_layout，滑动的操作主要通过操作content_layout来完成，content_layout内部的top_text和bottom_text主要用来占位方便实现滑动的效果，没有其他的功用。这里我准备响应button的点击事件，对content_layout进行addView()操作来动态的修改UI。

ScrollLayout

接下来就是用于实现滑动的ScrollLayout，滑动的实现由ViewDragHelper 来完成

public class ScrollLayout extends FrameLayout {    //button上方的占位TextView    TextView topTxt;    Button btn;    //整体的Layout    LinearLayout contentLayout;    ViewDragHelper viewDragHelper;    int layoutTop;    public ScrollLayout(Context context) {        this(context, null);    }    public ScrollLayout(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ScrollLayout(final Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        viewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {            @Override            public boolean tryCaptureView(View child, int pointerId) {                //操作的View是contentLayout才准许滑动                return child == contentLayout;            }            @Override            public int clampViewPositionVertical(View child, int top, int dy) {                //限制向上的滑动最多只能让button滑动到顶部                if (top <= -topTxt.getHeight()) {                    return -topTxt.getHeight();                //限制在回到初始的位置时不能再向下滑动                } else if (top >= 0) {                    return 0;                }                return top;            }        });    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return viewDragHelper.shouldInterceptTouchEvent(ev);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        viewDragHelper.processTouchEvent(event);        return true;    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        contentLayout = (LinearLayout) findViewById(R.id.content_layout);        topTxt = (TextView)findViewById(R.id.top_text);        btn = (Button)findViewById(R.id.button);    }}

初始操作都很简单，唯一要注意的就是在clampViewPositionVertical()方法中限制了滑动的范围向上能让button滑到顶部，也就是topText已经完全划出屏幕 top <= -topTxt.getHeight()，向下只能滑到原来的位置。

MainActivity

public class MainActivity extends AppCompatActivity {    Button btn;    LinearLayout contentLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btn = (Button) findViewById(R.id.button);        contentLayout = (LinearLayout) findViewById(R.id.content_layout);        btn.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                        LinearLayout.LayoutParams.WRAP_CONTENT,                         LinearLayout.LayoutParams.WRAP_CONTENT);                TextView addTxt = new TextView(MainActivity.this);                addTxt.setText("添加的内容");                addTxt.setTextSize(20);                contentLayout.addView(addTxt, params);            }        });      }    }

MainActivity中响应Button的点击事件来addview，现在编码已经完成让我们来看看效果。

首先我们先点击button正常的addview()，然后我们再将button滑动到顶部，再次点击button addview

本应再顶部的button在addview之后再次回到了初始位置，看到这里我的内心是崩毁的
我不禁陷入沉思为何会这样

思路

首先这个界面通过addview操作来进行动态改变，那么必然会走界面重画，这里有一个重要的信息，界面重画有2种一种是invalidate() 一种是requestLayout() ， invalidate()是迫使view进行重画也就是重走onDraw方法，requestLayout()则会重走 onMeasure()和 onLayout()方法，重走onlayout()就意味着重新进行布局，似乎看到了一点希望了，再看看addView的源码

    public void addView(View child, int index, LayoutParams params) {        if (DBG) {            System.out.println(this + " addView");        }        if (child == null) {            throw new IllegalArgumentException("Cannot add a null child view to a ViewGroup");        }        // addViewInner() will call child.requestLayout() when setting the new LayoutParams        // therefore, we call requestLayout() on ourselves before, so that the child's request        // will be blocked at our level        requestLayout();        invalidate(true);        addViewInner(child, index, params, false);    }

果然调用了requestLayout() 同时注意这句话addViewInner() will call child.requestLayout() when setting the new LayoutParams 这就意味这整个布局都会重新layout一次，我们的button也有可能就这样重新layout到了原来的位置，如何来证明这个猜想呢？ 很简单，判断button滑动到顶部的时候不进行layout

int layoutTop = 0;    @Override    public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy)             {               //不断的获取top坐标用来判断是否已经滑动到顶部                layoutTop = top;    }    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        //通过顶部坐标判断 button 是否滑动到顶部，滑动到顶部就不走默认的onLayout方法        if(!(layoutTop <= -topTxt.getMeasuredHeight())){            super.onLayout(changed, left, top, right, bottom);        }    }

首先在onViewPositionChanged方法中获取的顶部坐标，然后onLayout()方法中通过判断顶部坐标是否已经比topText的高度的还要小，也就是topText已经滑触屏幕（注意这里向上是负值)，的情况下就不走默认的

super.onLayout(changed, left, top, right, bottom);

来看看运行效果:

nice ! 猜想得到了验证，滑动到顶部点击button已经不会重新回到原来的位置了，但是由于没有重新onlayout所以在addview后的新view并没有成功的显示出来，而是在回到原来的位置可以运行onlayout方法的时候才能显示出来，不过这已经难不倒我了，既然要layout自己去定义位置不久好了吗 EZ

    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        contentLayout.layout(0,layoutTop,contentLayout.getMeasuredWidth(),contentLayout.getMeasuredHeight());    }

通过通过实时获取的layoutTop坐标我们可以很容易的定义top左边，right和bottom就更简单了，获取contentlayout的宽度和高度就是right和bottom嘛，来再运行一下

完美解决！！

最后一个小细节

onLayout()方法中我是通过contentLayout.getMeasuredHeight()来获取高度，clampViewPositionVertical方法中我是通过getHeight()方法来获取高度，这2个方法有什么区别呢？
其实也不复杂，contentLayout.getMeasuredHeight() 如同他的方法名一样是通过Measure测量的来，也就是说走完了onMeasure方法 getMeasuredHeight()方法就会有值。getHeight()呢？

    public final int getHeight() {        return mBottom - mTop;    }

通过源码可以看出来getHeight()的值是通过坐标来算出来的，所以如果你在onLayout中用getHeight()来获取高度是获取不到的，因为layout还没有完成，坐标也没有确定。这个细节很重要！！！！