Android 开发实践 ViewGroup 实现左右滑出窗口(一)

时间:2023-03-09 07:07:37
Android 开发实践 ViewGroup 实现左右滑出窗口(一)

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

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>