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

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

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

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

 源码： https://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>