本文详细解析了Android中的ExpandableLayout实现，包括构造函数、init()、collapse()、expand()方法。ExpandableLayout继承自RelativeLayout，实现点击展开和收起下拉视图的效果。此外，还介绍了ExpandableLayoutItem和ExpandableLayoutListView的特性，以及在ListView中的应用。
github地址：https://github.com/traex/
如果你相自己实现，可以看我的另一篇文章： 一步一步带你实现ListView动画展开布局， ExpandableLayout实现
效果：
如图，如果我们向实现点击ListView的Item,在item下面展示一个view，可以使用ExpandableLayout来实现。
项目结构
在library下面，定义了ExpandableLayout的源码。我们来看
ExpandableLayout： 继承自RelativeLayout，实现了点击view向下出现要弹出的view的效果
ExpandableLayoutItem： ExpandableLayoutListView的item的view的类型
ExpandableLayoutListView： 实现了一个ListView,点击item会弹出一个下拉视图，在点击一次视图会收缩回去。
我们先来看ExpandableLayout.java的实现:
ExpandableLayout的实现
ExpandableLayout有几个重要的方法：
1.collapse(final View v):下拉视图消失
2.expand(final View v):展开下拉视图
3.getContentLayout()：得到下拉视图
4.getHeaderLayout()：得到item视图
5.hide():隐藏下拉视图，内部调用了collapse(final View v)函数
6.show():展开下拉视图，内部调用了expand(final View v)函数
好了，现在我们从构造函数来一步一步的看
构造函数:
public ExpandableLayout(Context context)
{
super(context);
}
public ExpandableLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
init(context, attrs);
}
public ExpandableLayout(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
init(context, attrs);
}可以看到，在构造中，调用了init()方法，我们来看一下init做了什么
init()方法：
private void init(final Context context, AttributeSet attrs)
{
final View rootView = View.inflate(context, R.layout.view_expandable, this);
headerLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_headerlayout);
final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableLayout);
final int headerID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_headerLayout, -1);
final int contentID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_contentLayout, -1);
contentLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_contentLayout);
if (headerID == -1 || contentID == -1)
throw new IllegalArgumentException("HeaderLayout and ContentLayout cannot be null!");
if (isInEditMode())
return;
duration = typedArray.getInt(R.styleable.ExpandableLayout_el_duration, getContext().getResources().getInteger(android.R.integer.config_shortAnimTime));
final View headerView = View.inflate(context, headerID, null);
headerView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
headerLayout.addView(headerView);
final View contentView = View.inflate(context, contentID, null);
contentView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
contentLayout.addView(contentView);
contentLayout.setVisibility(GONE);
headerLayout.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (!isAnimationRunning)
{
if (contentLayout.getVisibility() == VISIBLE)
collapse(contentLayout);
else
expand(contentLayout);
isAnimationRunning = true;
new Handler().postDelayed(new Runnable()
{
@Override
public void run()
{
isAnimationRunning = false;
}
}, duration);
}
}
});
typedArray.recycle();
}第一句
final View rootView = View.inflate(context, R.layout.view_expandable, this);加载R.layout.view_expandable布局文件到自己上，来看以下R.layout.view_expandable是怎么定义的：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="@+id/view_expandable_headerlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/view_expandable_contentLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/view_expandable_headerlayout"/>
</RelativeLayout>一个RelativeLayout包裹了两个FrameLayout,分别是headerLayout和contentLayout,其中，contentLayout在headerLayout的下面。
我们继续看init()
headerLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_headerlayout);
final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableLayout);
final int headerID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_headerLayout, -1);
final int contentID = typedArray.getResourceId(R.styleable.ExpandableLayout_el_contentLayout, -1);
contentLayout = (FrameLayout) rootView.findViewById(R.id.view_expandable_contentLayout);分别通过findViewById得到headerLayout和contentLayout,
同时，如下，得到了headerID和contentID，headerID和contentID是在attr.xml中定义的。
<resources>
<declare-styleable name="ExpandableLayout">
<attr name="el_headerLayout" format="reference"/>
<attr name="el_contentLayout" format="reference" />
<attr name="el_duration" format="integer" />
</declare-styleable>
</resources>继续init函数
duration = typedArray.getInt(R.styleable.ExpandableLayout_el_duration, getContext().getResources().getInteger(android.R.integer.config_shortAnimTime));得到duration,它表示下拉和收起下拉视图时动画执行的时间。
final View headerView = View.inflate(context, headerID, null);
headerView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
headerLayout.addView(headerView);
final View contentView = View.inflate(context, contentID, null);
contentView.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
contentLayout.addView(contentView);
contentLayout.setVisibility(GONE);这一段代码，通过headerID和contentID得到headerView和contentView,并且把headerView添加到headerLayout中，把contentView添加到contentLayout中。设置contentLayout不可见。
到此，该view的结构如图：
好了，继续看init()
headerLayout.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (!isAnimationRunning)
{
if (contentLayout.getVisibility() == VISIBLE)
collapse(contentLayout);
else
expand(contentLayout);
isAnimationRunning = true;
new Handler().postDelayed(new Runnable()
{
@Override
public void run()
{
isAnimationRunning = false;
}
}, duration);
}
}
});
typedArray.recycle();这段代码，为headerLayout设置点击事件，点击的时候，如果contentLayout可见，就执行collapse,否则执行expand,并且duration之后执行handler.
到此，init()方法结束。我们开看collapse()方法和expand方法
collapse()方法：
private void collapse(final View v)
{
final int initialHeight = v.getMeasuredHeight();
animation = new Animation()
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
//在绘制动画的过程中会反复的调用applyTransformation函数，
// 每次调用参数interpolatedTime值都会变化，该参数从0渐 变为1，当该参数为1时表明动画结束
if(interpolatedTime == 1) //动画结束
{
v.setVisibility(View.GONE);
isOpened = false;
}
else{
v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
v.requestLayout();
}
}
@Override
public boolean willChangeBounds() {
return true;
}
};
animation.setDuration(duration);
v.startAnimation(animation);
}代码就是执行了一个动画，使contentLayout的LayoutParams的height不断变小，最后动画结束的时候，contentLayout设置为不可见。
expand()方法
private void expand(final View v)
{
v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
final int targetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 0;
v.setVisibility(VISIBLE);
animation = new Animation()
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
if (interpolatedTime == 1)
isOpened = true;
v.getLayoutParams().height = (interpolatedTime == 1) ? LayoutParams.WRAP_CONTENT : (int) (targetHeight * interpolatedTime);
v.requestLayout();
}
@Override
public boolean willChangeBounds() {
return true;
}
};
animation.setDuration(duration);
v.startAnimation(animation);
}与collapse相反，expand执行了一段动画，在动画执行前使contentLayout可见，动画执行过程中不断增加contentLayout的LayoutParams的height。
值得注意的是，在collpase和expand函数中，我们一直用isOpen来标志contentLayout是否已经完全看见。
好了，以上就是ExpandableLayout的源码解析。
ExpandableLayoutItem
与ExpandableLayout相似，我们来看ExpandableLayoutItem.
与ExpandableLayout的大部分代码都一样，主要的不同在于init()函数的最后有setOnClickListenr改为setOnTouchListener
headerLayout.setOnTouchListener(new OnTouchListener()
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
if (isOpened() && event.getAction() == MotionEvent.ACTION_UP)
{
hide();
closeByUser = true;
}
return isOpened() && event.getAction() == MotionEvent.ACTION_DOWN;
}
});
ExpandableLayoutListView
public class ExpandableLayoutListView extends ListView
{
private Integer position = -1;
public ExpandableLayoutListView(Context context)
{
super(context);
setOnScrollListener(new OnExpandableLayoutScrollListener());
}
public ExpandableLayoutListView(Context context, AttributeSet attrs)
{
super(context, attrs);
setOnScrollListener(new OnExpandableLayoutScrollListener());
}
public ExpandableLayoutListView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
setOnScrollListener(new OnExpandableLayoutScrollListener());
}
@Override
public boolean performItemClick(View view, int position, long id)
{
this.position = position;
for (int index = 0; index < getChildCount(); ++index)
{
if (index != (position - getFirstVisiblePosition()))
{
ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
currentExpandableLayout.hide();
}
}
ExpandableLayoutItem expandableLayout = (ExpandableLayoutItem) getChildAt(position - getFirstVisiblePosition()).findViewWithTag(ExpandableLayoutItem.class.getName());
if (expandableLayout.isOpened())
expandableLayout.hide();
else
expandableLayout.show();
return super.performItemClick(view, position, id);
}
@Override
public void setOnScrollListener(OnScrollListener l)
{
if (!(l instanceof OnExpandableLayoutScrollListener))
throw new IllegalArgumentException("OnScrollListner must be an OnExpandableLayoutScrollListener");
super.setOnScrollListener(l);
}
public class OnExpandableLayoutScrollListener implements OnScrollListener
{
private int scrollState = 0;
@Override
public void onScrollStateChanged(AbsListView view, int scrollState)
{
this.scrollState = scrollState;
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
{
if (scrollState != SCROLL_STATE_IDLE)
{
for (int index = 0; index < getChildCount(); ++index)
{
ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
{
currentExpandableLayout.hideNow();
}
else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
{
currentExpandableLayout.showNow();
}
}
}
}
}
}ExpandableLayoutListView代码主要的部分就是onScrollListener和performItemClick.我们一个一个来看。
performItemClick
for (int index = 0; index < getChildCount(); ++index)
{
if (index != (position - getFirstVisiblePosition()))
{
ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
currentExpandableLayout.hide();
}
}这段代码，循环遍历所有的item,使所有的item的contentLayout收起。
ExpandableLayoutItem expandableLayout = (ExpandableLayoutItem) getChildAt(position - getFirstVisiblePosition()).findViewWithTag(ExpandableLayoutItem.class.getName());
if (expandableLayout.isOpened())
expandableLayout.hide();
else
expandableLayout.show();这段代码，得到点击的item view,如果是打开的，就关闭，如果是关闭的，就打开。
onScrollListener
public class OnExpandableLayoutScrollListener implements OnScrollListener
{
private int scrollState = 0;
@Override
public void onScrollStateChanged(AbsListView view, int scrollState)
{
this.scrollState = scrollState;
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
{
if (scrollState != SCROLL_STATE_IDLE)
{
for (int index = 0; index < getChildCount(); ++index)
{
ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
{
currentExpandableLayout.hideNow();
}
else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
{
currentExpandableLayout.showNow();
}
}
}
}
}我们看onScroll方法内的操作。
if (scrollState != SCROLL_STATE_IDLE)如果在滚动状态，进行操作。
for (int index = 0; index < getChildCount(); ++index)
{
ExpandableLayoutItem currentExpandableLayout = (ExpandableLayoutItem) getChildAt(index).findViewWithTag(ExpandableLayoutItem.class.getName());
if (currentExpandableLayout.isOpened() && index != (position - getFirstVisiblePosition()))
{
currentExpandableLayout.hideNow();
}
else if (!currentExpandableLayout.getCloseByUser() && !currentExpandableLayout.isOpened() && index == (position - getFirstVisiblePosition()))
{
currentExpandableLayout.showNow();
}
}遍历所有的item.
如果item view是打开的，但是不在屏幕内，就关闭了。
如果在屏幕内的item view不是由用户关闭的，就显示打开状态。
扫一扫
9473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
