[英]How to implement expandable panels in Android?
Is there an easy way to create expandable/collapsible blocks like seen in official market app? 有没有一种简单的方法可以创建可扩展/可折叠的块,就像在官方市场应用程序中看到的那样?
Screenshot of Market app, when you click on "More" button, the description section expands with animation: 市场应用程序的屏幕截图,当您单击“更多”按钮时,描述部分将展开动画:
I know of SlidingDrawer but it doesn't seem to be suited for stuff like this--it's supposed to be put in overlay, and doesn't support half-open states. 我知道SlidingDrawer但它似乎不适合这样的东西 - 它应该被放在叠加中,并且不支持半开状态。
Update: 更新:
Here's my half-working solution. 这是我的半工作解决方案。 It's a custom widget that extends
LinearLayout
. 这是一个扩展
LinearLayout
的自定义小部件。 It kind-of works, but doesn't handle edge cases well, like content height smaller than collapsedHeight
parameter. 它很有用,但不能很好地处理边缘情况,例如内容高度小于
collapsedHeight
参数。 I'm sure with enough staring, digging in code and experimenting the quirks could be fixed. 我确信有足够的凝视力,挖掘代码并试验怪癖可以修复。 Was hoping to avoid doing that, and save some time by using a ready-made official or 3rd party solution.
希望避免这样做,并通过使用现成的官方或第三方解决方案节省一些时间。 Anyway, here it is, code:
无论如何,这里是代码:
package com.example.androidapp.widgets;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;
import com.example.androidapp.R;
public class ExpandablePanel extends LinearLayout {
private final int mHandleId;
private final int mContentId;
private View mHandle;
private View mContent;
private boolean mExpanded = true;
private int mCollapsedHeight = 0;
private int mContentHeight = 0;
public ExpandablePanel(Context context) {
this(context, null);
}
public ExpandablePanel(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ExpandablePanel, 0, 0);
// How high the content should be in "collapsed" state
mCollapsedHeight = (int) a.getDimension(
R.styleable.ExpandablePanel_collapsedHeight, 0.0f);
int handleId = a.getResourceId(R.styleable.ExpandablePanel_handle, 0);
if (handleId == 0) {
throw new IllegalArgumentException(
"The handle attribute is required and must refer "
+ "to a valid child.");
}
int contentId = a.getResourceId(R.styleable.ExpandablePanel_content, 0);
if (contentId == 0) {
throw new IllegalArgumentException(
"The content attribute is required and must refer "
+ "to a valid child.");
}
mHandleId = handleId;
mContentId = contentId;
a.recycle();
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mHandle = findViewById(mHandleId);
if (mHandle == null) {
throw new IllegalArgumentException(
"The handle attribute is must refer to an"
+ " existing child.");
}
mContent = findViewById(mContentId);
if (mContent == null) {
throw new IllegalArgumentException(
"The content attribute is must refer to an"
+ " existing child.");
}
mHandle.setOnClickListener(new PanelToggler());
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (mContentHeight == 0) {
// First, measure how high content wants to be
mContent.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
mContentHeight = mContent.getMeasuredHeight();
}
// Then let the usual thing happen
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
private class PanelToggler implements OnClickListener {
public void onClick(View v) {
Animation a;
if (mExpanded) {
a = new ExpandAnimation(mContentHeight, mCollapsedHeight);
} else {
a = new ExpandAnimation(mCollapsedHeight, mContentHeight);
}
a.setDuration(500);
mContent.startAnimation(a);
mExpanded = !mExpanded;
}
}
private class ExpandAnimation extends Animation {
private final int mStartHeight;
private final int mDeltaHeight;
public ExpandAnimation(int startHeight, int endHeight) {
mStartHeight = startHeight;
mDeltaHeight = endHeight - startHeight;
}
@Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = (int) (mStartHeight + mDeltaHeight * interpolatedTime);
mContent.setLayoutParams(lp);
}
@Override
public boolean willChangeBounds() {
// TODO Auto-generated method stub
return true;
}
}
}
Here's res/values/attrs.xml
: 这是
res/values/attrs.xml
:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ExpandablePanel">
<attr name="handle" format="reference" />
<attr name="content" format="reference" />
<attr name="collapsedHeight" format="dimension" />
</declare-styleable>
</resources>
And here's how I use it in layout: 以下是我在布局中使用它的方法:
<com.example.androidapp.widgets.ExpandablePanel
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
example:handle="@+id/expand"
example:content="@+id/value"
example:collapsedHeight="50dip">
<TextView
android:id="@id/value"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxHeight="50dip"
/>
<Button
android:id="@id/expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More" />
</com.example.androidapp.widgets.ExpandablePanel>
Thanks very much OP! 非常感谢OP! For anyone interested I took OP's solution and refined it a bit.
对于任何有兴趣的人,我都采用了OP的解决方案并对其进行了改进。
Here's the updated code: 这是更新的代码:
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;
public class ExpandablePanel extends LinearLayout {
private final int mHandleId;
private final int mContentId;
private View mHandle;
private View mContent;
private boolean mExpanded = false;
private int mCollapsedHeight = 0;
private int mContentHeight = 0;
private int mAnimationDuration = 0;
private OnExpandListener mListener;
public ExpandablePanel(Context context) {
this(context, null);
}
public ExpandablePanel(Context context, AttributeSet attrs) {
super(context, attrs);
mListener = new DefaultOnExpandListener();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ExpandablePanel, 0, 0);
// How high the content should be in "collapsed" state
mCollapsedHeight = (int) a.getDimension(R.styleable.ExpandablePanel_collapsedHeight, 0.0f);
// How long the animation should take
mAnimationDuration = a.getInteger(R.styleable.ExpandablePanel_animationDuration, 500);
int handleId = a.getResourceId(R.styleable.ExpandablePanel_handle, 0);
if (handleId == 0) {
throw new IllegalArgumentException(
"The handle attribute is required and must refer "
+ "to a valid child.");
}
int contentId = a.getResourceId(R.styleable.ExpandablePanel_content, 0);
if (contentId == 0) {
throw new IllegalArgumentException("The content attribute is required and must refer to a valid child.");
}
mHandleId = handleId;
mContentId = contentId;
a.recycle();
}
public void setOnExpandListener(OnExpandListener listener) {
mListener = listener;
}
public void setCollapsedHeight(int collapsedHeight) {
mCollapsedHeight = collapsedHeight;
}
public void setAnimationDuration(int animationDuration) {
mAnimationDuration = animationDuration;
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mHandle = findViewById(mHandleId);
if (mHandle == null) {
throw new IllegalArgumentException(
"The handle attribute is must refer to an"
+ " existing child.");
}
mContent = findViewById(mContentId);
if (mContent == null) {
throw new IllegalArgumentException(
"The content attribute must refer to an"
+ " existing child.");
}
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = mCollapsedHeight;
mContent.setLayoutParams(lp);
mHandle.setOnClickListener(new PanelToggler());
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// First, measure how high content wants to be
mContent.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
mContentHeight = mContent.getMeasuredHeight();
if (mContentHeight < mCollapsedHeight) {
mHandle.setVisibility(View.GONE);
} else {
mHandle.setVisibility(View.VISIBLE);
}
// Then let the usual thing happen
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
private class PanelToggler implements OnClickListener {
public void onClick(View v) {
Animation a;
if (mExpanded) {
a = new ExpandAnimation(mContentHeight, mCollapsedHeight);
mListener.onCollapse(mHandle, mContent);
} else {
a = new ExpandAnimation(mCollapsedHeight, mContentHeight);
mListener.onExpand(mHandle, mContent);
}
a.setDuration(mAnimationDuration);
mContent.startAnimation(a);
mExpanded = !mExpanded;
}
}
private class ExpandAnimation extends Animation {
private final int mStartHeight;
private final int mDeltaHeight;
public ExpandAnimation(int startHeight, int endHeight) {
mStartHeight = startHeight;
mDeltaHeight = endHeight - startHeight;
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = (int) (mStartHeight + mDeltaHeight * interpolatedTime);
mContent.setLayoutParams(lp);
}
@Override
public boolean willChangeBounds() {
return true;
}
}
public interface OnExpandListener {
public void onExpand(View handle, View content);
public void onCollapse(View handle, View content);
}
private class DefaultOnExpandListener implements OnExpandListener {
public void onCollapse(View handle, View content) {}
public void onExpand(View handle, View content) {}
}
}
And don't forget the attrs.xml: 并且不要忘记attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ExpandablePanel">
<attr name="handle" format="reference" />
<attr name="content" format="reference" />
<attr name="collapsedHeight" format="dimension"/>
<attr name="animationDuration" format="integer"/>
</declare-styleable>
</resources>
See OP's example usage for the XML layout above. 请参阅上面的XML布局的OP示例用法。 Here's an example for the listeners:
以下是听众的示例:
// Set expandable panel listener
ExpandablePanel panel = (ExpandablePanel)view.findViewById(R.id.foo);
panel.setOnExpandListener(new ExpandablePanel.OnExpandListener() {
public void onCollapse(View handle, View content) {
Button btn = (Button)handle;
btn.setText("More");
}
public void onExpand(View handle, View content) {
Button btn = (Button)handle;
btn.setText("Less");
}
});
I know this is an old question but for those who are interested, I made additions to what ahal and Pēteris Caune did. 我知道这是一个古老的问题,但对于那些感兴趣的人,我对ahal和PēterisHaune所做的事情做了补充。
Additions 附加
Updated Code 更新的代码
ExpandablePanel Class ExpandablePanel类
package com.example.myandroidhustles;
import com.example.myandroidhustles.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;
public class ExpandablePanel extends LinearLayout {
private final int mHandleId;
private final int mContentId;
private final int mViewGroupId;
private final boolean isViewGroup;
private View mHandle;
private View mContent;
private ViewGroup viewGroup;
private boolean mExpanded = false;
private int mCollapsedHeight = 0;
private int mContentHeight = 0;
private int mAnimationDuration = 0;
private OnExpandListener mListener;
public ExpandablePanel(Context context) {
this(context, null);
}
public ExpandablePanel(Context context, AttributeSet attrs) {
super(context, attrs);
mListener = new DefaultOnExpandListener();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ExpandablePanel, 0, 0);
// How high the content should be in "collapsed" state
mCollapsedHeight = (int) a.getDimension(R.styleable.ExpandablePanel_collapsedHeight, 0.0f);
// How long the animation should take
mAnimationDuration = a.getInteger(R.styleable.ExpandablePanel_animationDuration, 500);
int handleId = a.getResourceId(R.styleable.ExpandablePanel_handle, 0);
if (handleId == 0) {
throw new IllegalArgumentException(
"The handle attribute is required and must refer "
+ "to a valid child.");
}
int contentId = a.getResourceId(R.styleable.ExpandablePanel_content, 0);
if (contentId == 0) {
throw new IllegalArgumentException("The content attribute is required and must refer to a valid child.");
}
int isViewGroupId = a.getResourceId(R.styleable.ExpandablePanel_isviewgroup, 0);
int viewGroupId = a.getResourceId(R.styleable.ExpandablePanel_viewgroup, 0);
// isViewGroup = findViewById(isViewGroupId);
isViewGroup = a.getBoolean(R.styleable.ExpandablePanel_isviewgroup, false);
if (isViewGroup) {
mViewGroupId = viewGroupId;
}
else {
mViewGroupId = 0;
}
mHandleId = handleId;
mContentId = contentId;
a.recycle();
}
public void setOnExpandListener(OnExpandListener listener) {
mListener = listener;
}
public void setCollapsedHeight(int collapsedHeight) {
mCollapsedHeight = collapsedHeight;
}
public void setAnimationDuration(int animationDuration) {
mAnimationDuration = animationDuration;
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mHandle = findViewById(mHandleId);
if (mHandle == null) {
throw new IllegalArgumentException(
"The handle attribute is must refer to an"
+ " existing child.");
}
if(mViewGroupId != 0) {
viewGroup = (ViewGroup) findViewById(mViewGroupId);
}
mContent = findViewById(mContentId);
if (mContent == null) {
throw new IllegalArgumentException(
"The content attribute must refer to an"
+ " existing child.");
}
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = mCollapsedHeight;
mContent.setLayoutParams(lp);
mHandle.setOnClickListener(new PanelToggler());
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// First, measure how high content wants to be
mContent.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
mContentHeight = mContent.getMeasuredHeight();
if (mContentHeight < mCollapsedHeight) {
viewGroup.setVisibility(View.GONE);
// mHandle.setVisibility(View.GONE);
} else {
viewGroup.setVisibility(View.VISIBLE);
// mHandle.setVisibility(View.VISIBLE);
}
// Then let the usual thing happen
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
private class PanelToggler implements OnClickListener {
public void onClick(View v) {
Animation a;
if (mExpanded) {
a = new ExpandAnimation(mContentHeight, mCollapsedHeight);
mListener.onCollapse(mHandle, mContent);
} else {
a = new ExpandAnimation(mCollapsedHeight, mContentHeight);
mListener.onExpand(mHandle, mContent);
}
a.setDuration(mAnimationDuration);
if(mContent.getLayoutParams().height == 0) //Need to do this or else the animation will not play if the height is 0
{
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = 1;
mContent.setLayoutParams(lp);
mContent.requestLayout();
}
mContent.startAnimation(a);
mExpanded = !mExpanded;
}
}
private class ExpandAnimation extends Animation {
private final int mStartHeight;
private final int mDeltaHeight;
public ExpandAnimation(int startHeight, int endHeight) {
mStartHeight = startHeight;
mDeltaHeight = endHeight - startHeight;
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = (int) (mStartHeight + mDeltaHeight * interpolatedTime);
mContent.setLayoutParams(lp);
}
@Override
public boolean willChangeBounds() {
return true;
}
}
public interface OnExpandListener {
public void onExpand(View handle, View content);
public void onCollapse(View handle, View content);
}
private class DefaultOnExpandListener implements OnExpandListener {
public void onCollapse(View handle, View content) {}
public void onExpand(View handle, View content) {}
}
}
attrs.xml attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ExpandablePanel">
<attr name="handle" format="reference" />
<attr name="content" format="reference" />
<attr name="viewgroup" format="reference"/>
<attr name="isviewgroup" format="boolean"/>
<attr name="collapsedHeight" format="dimension"/>
<attr name="animationDuration" format="integer"/>
</declare-styleable>
</resources>
Layout: tryExpandablePanel.xml 布局:tryExpandablePanel.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:example="http://schemas.android.com/apk/res/com.example.myandroidhustles"
android:layout_width="fill_parent"
android:layout_height="match_parent" >
<com.example.myandroidhustles.ExpandablePanel
android:id="@+id/expandablePanel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
example:collapsedHeight="50dip"
example:content="@+id/value"
example:handle="@+id/expand"
example:isviewgroup="true"
example:viewgroup="@+id/expandL" >
<TextView
android:id="@+id/value"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxHeight="100dip" />
<LinearLayout
android:id="@+id/expandL"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="10dp"
android:weightSum="100" >
<View
android:id="@+id/view"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_gravity="center_vertical|left"
android:layout_weight="30"
android:background="@android:color/darker_gray" />
<Button
android:id="@+id/expand"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="70"
android:text="More" />
</LinearLayout>
</com.example.myandroidhustles.ExpandablePanel>
</LinearLayout>
Implementation: ExpandablePanelImplementation Class 实现:ExpandablePanelImplementation类
package com.example.myandroidhustles;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class ExpandablePanelImplementation extends Activity {
ExpandablePanel panel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tryexpandable);
TextView text;
text = (TextView)findViewById(R.id.value);
text.setText("ksaflfsklafjsfj sdfjklds fj asklfjklasfjskladf fjslkafjf" +
"asfkdaslfjsf;sjdaflkadsjflkdsajfkldsajflkdsanfvsjvfdskljflkdnjdsadf" +
"askfvdsklfjvsdlkfjdsklvdkjkdsadsj;lkasjdfklvsddsjkdsljskldfj");
panel = (ExpandablePanel)findViewById(R.id.expandablePanel);
panel.setOnExpandListener(new ExpandablePanel.OnExpandListener() {
public void onCollapse(View handle, View content) {
Button btn = (Button)handle;
btn.setText("More");
panel.setCollapsedHeight(100);
}
public void onExpand(View handle, View content) {
Button btn = (Button)handle;
panel.setCollapsedHeight(50);
btn.setText("Less");
}
});
}
}
Have you tried having a ScrollView
at a set size that you make not clickable and not focusable? 您是否尝试过使用不可点击且无法调焦的设置大小的
ScrollView
? Then, when you expand it, you could just animate it getting bigger. 然后,当你展开它时,你可以让它变得越来越大。
Great extension ahal. 伟大的延伸ahal。 I have modified your code slightly to fix a bug I found.
我稍微修改了你的代码来修复我发现的错误。
I added this around line 128, after a.setDuration(mAnimationDuration);
我在
a.setDuration(mAnimationDuration);
之后在第128行附近添加了这个a.setDuration(mAnimationDuration);
in PanelToggler 在PanelToggler中
if(mContent.getLayoutParams().height == 0) //Need to do this or else the animation will not play if the height is 0
{
android.view.ViewGroup.LayoutParams lp = mContent.getLayoutParams();
lp.height = 1;
mContent.setLayoutParams(lp);
mContent.requestLayout();
}
I found that if the content height was 0, then the animation would not play, so it had to set it to 1 before the animation. 我发现如果内容高度为0,则动画将无法播放,因此必须在动画之前将其设置为1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.