Android 开发实践 ViewGroup 实现左右滑出窗口（一）

利用假期把以前做的东西总结整理一下，先从简单的开始吧。
实现的效果是这样的：

  做了个截屏动画，比例有点不对了，凑合着看吧。

整个窗口有3部分组成，中间的主界面是个列表，左边的滑出界面是个菜单，右边的滑出界面是编辑框等。左边菜单是半屏的，右边的是全屏的。
最后其实我只用到了左边的滑出窗口，但还是把左右的算法都做全了。
并且设计了一个方法，让activity可以指定两个滑出窗口的宽度。

源码： http://files.cnblogs.com/inkheart0124/PushSlider.zip

一、自定义PushSlider类 继承ViewGroup 并实现手势listener

PushSlider.java

public class PushSlider extends ViewGroup implements OnGestureListener

public static final int SLIDER_PAGE_LEFT = 0;
public static final int SLIDER_PAGE_MIDDLE = 1;
public static final int SLIDER_PAGE_RIGHT = 2;

三个Child View的index，其中SLIDER_PAGE_MIDDLE是定宽的（全屏宽度），SLIDER_PAGE_LEFT和SLIDER_PAGE_RIGHT可以设置View的宽度。

 public PushSlider(Context context, AttributeSet attrs) {
     super(context, attrs);
     setHapticFeedbackEnabled(false);
     mContext = context;
     mForbidden = false;
     mGDetector = new GestureDetector(mContext,this);
     focusedIndex = SLIDER_PAGE_MIDDLE;
     mMoveFlag = MOVE_FLAG_ALLOW_LEFT|MOVE_FLAG_ALLOW_RIGHT;
     mDensity = getResources().getDisplayMetrics().density;
     mScroller = new Scroller(mContext, new AccelerateInterpolator());
     mChildWidth = new int[3];

     }

初始化数据：

5行，mForbidden = false; 初始状态默认允许滑动，activity可以通过mPushView.pushForbid(true)方法禁止滑动。

6行，mGDetector = new GestureDetector(mContext,this); 创建手势监听对象。

7行，初始focus的view。

9行，获取像素密度，后面要用它来计算位置。

10行，Scroller是一个实现View group平滑滚动的一个helper类。mScroller和mGDetector就是后面手势滑动的主角。

11行，数组mChildWidth[] 记录每个子view的宽度

重写onMeasure和onLayout方法：

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
     super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     int widthSize = MeasureSpec.getSize(widthMeasureSpec);
     int heightSize = MeasureSpec.getSize(heightMeasureSpec);
     if(mChild == null){
         initChildren(widthSize,heightSize);
     }
     else{
         int newSpec = MeasureSpec.makeMeasureSpec(mChildWidth[focusedIndex], MeasureSpec.EXACTLY);
         mChild[focusedIndex].measure(newSpec, heightMeasureSpec);
     }
 }      

入参是父view的尺寸，第7行第一次执行onMeasure时会根据父view的宽和高 (这里等于屏的宽和高) 来初始化子view。

 private void initChildren(int width, int height){
     if(mChild == null){
         mChild = new View[3];
         mChildWidth[SLIDER_PAGE_FIX]=width;
     }

     for(int i=SLIDER_PAGE_LEFT; i<=SLIDER_PAGE_RIGHT; i++){
         mChild[i] = getChildAt(i);
         if(mChild[i] != null){
             mChild[i].setVisibility(View.VISIBLE);
             int childWidth = mChildWidth[i];
             if(childWidth > width){
                 childWidth = width;
                 mChildWidth[i] = width;
             }
             int widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
             int heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
             mChild[i].measure(widthMeasureSpec, heightMeasureSpec);
         }
     }
     changeFocus();
 }            

initChildren方法 初始化数组mChild，记录每个子view的对象。

4行，定宽的那个子view直接设置成全屏宽度。定宽的是索引为SLIDER_PAGE_MIDDLE的子view。

7～19行，getChildAt(i)获得ViewGroup中的每个子View，根据每个子view的宽度设置调用它们的measure方法。

因此，主activity必须在onCreate方法中执行pushSlider的setPageWidth方法，设置左右两个子view的宽度。

mPushView.setPageWidth(PushSlider.SLIDER_PAGE_LEFT, screenWidth/2);
           mPushView.setPageWidth(PushSlider.SLIDER_PAGE_RIGHT, screenWidth);

public void setPageWidth(int index, int width){
    if(index == SLIDER_PAGE_FIX)
    return;

    mChildWidth[index]=width;
}

onLayout

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {

     if(changed){

         if(mChild[focusedIndex] != null){
             int w = mChildWidth[focusedIndex];
             if(w == 0){
                 w = r-l;
             }
             mChild[focusedIndex].layout(l,t,l+w,b);
         }

         for(int next=SLIDER_PAGE_LEFT; next<=SLIDER_PAGE_RIGHT; next++){
             if(next == focusedIndex){
                 continue;
             }
             if(mChild[next] != null){
                 int w1 = mChildWidth[next];
                 int x = 0;
                 if((next== SLIDER_PAGE_LEFT)&&(focusedIndex == SLIDER_PAGE_MIDDLE)){
                     x = l- w1;
                 }else if((next== SLIDER_PAGE_LEFT)&&(focusedIndex == SLIDER_PAGE_RIGHT)){
                     x = l- mChildWidth[SLIDER_PAGE_MIDDLE] - w1;
                 }else if((next== SLIDER_PAGE_MIDDLE)&&(focusedIndex == SLIDER_PAGE_LEFT)){
                     x = l+ mChildWidth[SLIDER_PAGE_LEFT];
                 }else if((next== SLIDER_PAGE_MIDDLE)&&(focusedIndex == SLIDER_PAGE_RIGHT)){
                     x = l-w1;
                 }else if((next== SLIDER_PAGE_RIGHT)&&(focusedIndex == SLIDER_PAGE_MIDDLE)){
                     x = l+mChildWidth[SLIDER_PAGE_MIDDLE];
                 }
                else if((next== SLIDER_PAGE_RIGHT)&&(focusedIndex == SLIDER_PAGE_LEFT)){
                     x = l+mChildWidth[SLIDER_PAGE_LEFT]+mChildWidth[SLIDER_PAGE_MIDDLE];
                 }
                 mChild[next].layout(x,t,x+w1,b);
             }
         }

         mLeftPosX = -mChildWidth[SLIDER_PAGE_LEFT];
         if(mChild[SLIDER_PAGE_RIGHT] != null)
             mRightPosX = mChildWidth[SLIDER_PAGE_MIDDLE];
         else
             mRightPosX = 0;
     }else{

         if(mChild[focusedIndex] != null){
             int w = mChildWidth[focusedIndex];
             mChild[focusedIndex].layout(l,t,l+w,b);
         }
     }
 }    

onLayout 没什么特别的，就是把每个子view布局一下，调用子view的layout(l,t,r,b)方法。

以我的手机屏宽720pixels，中间的view从l=0到r=719，左边的就是-359到0，右边的720到1439。

=================================================================

这两个函数看起来很简单，无非是算位置烦一点。但是在这里我犯了一个错误，导致后面花了很多时间找原因。

我的menifest里是这样的

<activity
  android:name=".MainActivity"
  android:label="@string/activity_car"
  android:screenOrientation="portrait"
  android:configChanges="orientation|keyboardHidden"
>

只支持竖屏。当时的考虑是，对pushSlider来说，onMeasure只需在第一次执行时measure每个子view就可以了，因为子view的尺寸是不会变化的。而onLayout也只需要在changed == true的时候layout子view，其位置相对于父view来说也是固定的。（scroller滚动的是整个父view相对屏的位置）

但是，我的middle view中布局了一个ListView，于是悲剧了。我发现list动态修改item后不会刷新，调用mAdapter.notifyDataSetChanged()后也不刷新。

各种猜测以及试验以及百度了很久，最后发现ListView的条目发生改变后，父view的onMeasure和onLayout会被调用，这里必须调用list所在view的measure和layout方法，否则就会导致上面的不刷新问题。

=================================================================

这样三个子view的布局就ok了。在开始滑动之前，还需要定义个监听接口，让activity中能监听到滑动后子view的焦点切换情况。

private OnPageChangedListener mPageChangedListener = null;

public interface OnPageChangedListener{
    void onPageChanged(View v, int whichHandle);
}

public void setOnPageChangedListener(OnPageChangedListener listener){
    mPageChangedListener = listener;
}

activity需要调用mPushView.setOnPageChangedListener(this);注册监听，并实现void onPageChanged(View v, int whichHandle)，两个传参分别是获得焦点的子view和其索引值。

手势滑动部分请参考 <Android 开发实践 ViewGroup 实现左右滑出窗口（二）http://www.cnblogs.com/inkheart0124/p/3534165.html>