通过单击按钮展开和折叠 Relativelayout
Expand and collapse Relativelayout by button click
我有这个 RelativeLayout 可以在点击按钮时展开和折叠
它在一个按钮上工作正常。
我想在更多两个 RelativeLayout 上重用相同的方法
在相同的布局
并使用其他两个按钮展开。
这段代码 运行 没问题。只是想要更多布局来执行相同的操作。
布局：
这是我的代码：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="64dp"
android:background="#FFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:id="@+id/expandable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="@color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="133dp"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title 2"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:animateLayoutChanges="true"
android:id="@+id/expandable1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title 3"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore2"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:animateLayoutChanges="true"
android:id="@+id/expandable2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
源代码：
RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
Button viewmore, viewmore1, viewmore2;
ValueAnimator mAnimator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewmore);
relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);
viewmore = (Button) findViewById(R.id.viewmore);
viewmore1 = (Button) findViewById(R.id.viewmore1);
viewmore2 = (Button) findViewById(R.id.viewmore2);
viewmore.setOnClickListener(this);
viewmore1.setOnClickListener(this);
viewmore2.setOnClickListener(this);
relativeLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
relativeLayout.setVisibility(View.GONE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
relativeLayout.measure(widthSpec, heightSpec);
mAnimator = slideAnimator(0, relativeLayout.getMeasuredHeight());
return true;
}
});
}
private void expand() {
relativeLayout.setVisibility(View.VISIBLE);
mAnimator.start();
}
private void collapse() {
int finalHeight = relativeLayout.getHeight();
ValueAnimator mAnimator = slideAnimator(finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
//Height=0, but it set visibility to GONE
relativeLayout.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
mAnimator.start();
}
private ValueAnimator slideAnimator(int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = relativeLayout.getLayoutParams();
layoutParams.height = value;
relativeLayout.setLayoutParams(layoutParams);
}
});
return animator;
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.viewmore:
if (relativeLayout.getVisibility() == View.GONE) {
expand();
} else {
collapse();
}
break;
case R.id.viewmore1:
break;
case R.id.viewmore2:
break;
}
}
要继续您的方法，您必须将代码应用到您布置的所有三个部分。为此，您需要更改几个方法以接受 RelativeLayout 作为参数。
首先，在您的 onClick 侦听器中，填写 case 块，以便每个块调用 expand() 目标 RelativeLayout 和最大高度。使用目标 RelativeLayout 调用 collapse()。然后您需要修改 expand() 和 collapse() 来处理新参数：
您会在下面的代码中注意到我已经更改了创建动画器的方式和位置。动画师需要处理每个 RelativeLayout.
因此，onClick() 调用 expand()，后者又调用 slideAnimator()。对于每个调用，受影响的 RelativeLayout 作为参数传递。通过这种方式，您可以概括代码以处理多个 RelativeLayout.
预绘制侦听器还需要测量每个可展开的 RelativeLayout。
这里是全部汇总：
MainActivity.xml
public class MainActivity extends AppCompatActivity
implements View.OnClickListener {
RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
Button viewmore, viewmore1, viewmore2;
int height, height1, height2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewmore);
relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);
viewmore = (Button) findViewById(R.id.viewmore);
viewmore1 = (Button) findViewById(R.id.viewmore1);
viewmore2 = (Button) findViewById(R.id.viewmore2);
viewmore.setOnClickListener(this);
viewmore1.setOnClickListener(this);
viewmore2.setOnClickListener(this);
relativeLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
relativeLayout.setVisibility(View.GONE);
relativeLayout1.setVisibility(View.GONE);
relativeLayout2.setVisibility(View.GONE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
relativeLayout.measure(widthSpec, heightSpec);
height = relativeLayout.getMeasuredHeight();
relativeLayout1.measure(widthSpec, heightSpec);
height1 = relativeLayout.getMeasuredHeight();
relativeLayout2.measure(widthSpec, heightSpec);
height2 = relativeLayout.getMeasuredHeight();
return true;
}
});
}
private void expand(RelativeLayout layout, int layoutHeight) {
layout.setVisibility(View.VISIBLE);
ValueAnimator animator = slideAnimator(layout, 0, layoutHeight);
animator.start();
}
private void collapse(final RelativeLayout layout) {
int finalHeight = layout.getHeight();
ValueAnimator mAnimator = slideAnimator(layout, finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
//Height=0, but it set visibility to GONE
layout.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
mAnimator.start();
}
private ValueAnimator slideAnimator(final RelativeLayout layout, int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = layout.getLayoutParams();
layoutParams.height = value;
layout.setLayoutParams(layoutParams);
}
});
return animator;
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.viewmore:
if (relativeLayout.getVisibility() == View.GONE) {
expand(relativeLayout, height);
} else {
collapse(relativeLayout);
}
break;
case R.id.viewmore1:
if (relativeLayout1.getVisibility() == View.GONE) {
expand(relativeLayout1, height1);
} else {
collapse(relativeLayout1);
}
break;
case R.id.viewmore2:
if (relativeLayout2.getVisibility() == View.GONE) {
expand(relativeLayout2, height2);
} else {
collapse(relativeLayout2);
}
break;
}
}
}
您还可以创建自己的自定义可扩展项来扩展 android 相对布局。在该自定义视图上，您可以存储展开或折叠状态。您还可以创建自定义属性来定义您的视图默认状态，如展开或折叠。因此，您不需要比较视图状态，您只需调用切换功能即可将视图切换为展开或折叠，反之亦然
如果您想将折叠视图显示为默认视图，则不应在 onMeasure 函数之前更改视图可见性并存储您的视图测量高度。如果更改视图构造函数 onMeasure 函数的可见性，则跳过该视图的计算。您应该在 onPreDraw 函数上切换可见性。
我有这个 RelativeLayout 可以在点击按钮时展开和折叠 它在一个按钮上工作正常。 我想在更多两个 RelativeLayout 上重用相同的方法 在相同的布局 并使用其他两个按钮展开。
这段代码 运行 没问题。只是想要更多布局来执行相同的操作。
布局：
这是我的代码：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="64dp"
android:background="#FFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:id="@+id/expandable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:background="@color/colorAccent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="133dp"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title 2"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:animateLayoutChanges="true"
android:id="@+id/expandable1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title 3"
android:textSize="20sp" />
<Button
android:id="@+id/viewmore2"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="280dp"
android:background="@null"
android:text="viewmore" />
</RelativeLayout>
<RelativeLayout
android:visibility="gone"
android:animateLayoutChanges="true"
android:id="@+id/expandable2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="30dp"
android:background="@color/colorPrimary">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
源代码：
RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
Button viewmore, viewmore1, viewmore2;
ValueAnimator mAnimator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewmore);
relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);
viewmore = (Button) findViewById(R.id.viewmore);
viewmore1 = (Button) findViewById(R.id.viewmore1);
viewmore2 = (Button) findViewById(R.id.viewmore2);
viewmore.setOnClickListener(this);
viewmore1.setOnClickListener(this);
viewmore2.setOnClickListener(this);
relativeLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
relativeLayout.setVisibility(View.GONE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
relativeLayout.measure(widthSpec, heightSpec);
mAnimator = slideAnimator(0, relativeLayout.getMeasuredHeight());
return true;
}
});
}
private void expand() {
relativeLayout.setVisibility(View.VISIBLE);
mAnimator.start();
}
private void collapse() {
int finalHeight = relativeLayout.getHeight();
ValueAnimator mAnimator = slideAnimator(finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
//Height=0, but it set visibility to GONE
relativeLayout.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
mAnimator.start();
}
private ValueAnimator slideAnimator(int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = relativeLayout.getLayoutParams();
layoutParams.height = value;
relativeLayout.setLayoutParams(layoutParams);
}
});
return animator;
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.viewmore:
if (relativeLayout.getVisibility() == View.GONE) {
expand();
} else {
collapse();
}
break;
case R.id.viewmore1:
break;
case R.id.viewmore2:
break;
}
}
要继续您的方法，您必须将代码应用到您布置的所有三个部分。为此，您需要更改几个方法以接受 RelativeLayout 作为参数。
首先，在您的 onClick 侦听器中，填写 case 块，以便每个块调用 expand() 目标 RelativeLayout 和最大高度。使用目标 RelativeLayout 调用 collapse()。然后您需要修改 expand() 和 collapse() 来处理新参数：
您会在下面的代码中注意到我已经更改了创建动画器的方式和位置。动画师需要处理每个 RelativeLayout.
因此，onClick() 调用 expand()，后者又调用 slideAnimator()。对于每个调用，受影响的 RelativeLayout 作为参数传递。通过这种方式，您可以概括代码以处理多个 RelativeLayout.
预绘制侦听器还需要测量每个可展开的 RelativeLayout。
这里是全部汇总：
MainActivity.xml
public class MainActivity extends AppCompatActivity
implements View.OnClickListener {
RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
Button viewmore, viewmore1, viewmore2;
int height, height1, height2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewmore);
relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);
viewmore = (Button) findViewById(R.id.viewmore);
viewmore1 = (Button) findViewById(R.id.viewmore1);
viewmore2 = (Button) findViewById(R.id.viewmore2);
viewmore.setOnClickListener(this);
viewmore1.setOnClickListener(this);
viewmore2.setOnClickListener(this);
relativeLayout.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
relativeLayout.setVisibility(View.GONE);
relativeLayout1.setVisibility(View.GONE);
relativeLayout2.setVisibility(View.GONE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
relativeLayout.measure(widthSpec, heightSpec);
height = relativeLayout.getMeasuredHeight();
relativeLayout1.measure(widthSpec, heightSpec);
height1 = relativeLayout.getMeasuredHeight();
relativeLayout2.measure(widthSpec, heightSpec);
height2 = relativeLayout.getMeasuredHeight();
return true;
}
});
}
private void expand(RelativeLayout layout, int layoutHeight) {
layout.setVisibility(View.VISIBLE);
ValueAnimator animator = slideAnimator(layout, 0, layoutHeight);
animator.start();
}
private void collapse(final RelativeLayout layout) {
int finalHeight = layout.getHeight();
ValueAnimator mAnimator = slideAnimator(layout, finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
//Height=0, but it set visibility to GONE
layout.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
mAnimator.start();
}
private ValueAnimator slideAnimator(final RelativeLayout layout, int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//Update Height
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = layout.getLayoutParams();
layoutParams.height = value;
layout.setLayoutParams(layoutParams);
}
});
return animator;
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.viewmore:
if (relativeLayout.getVisibility() == View.GONE) {
expand(relativeLayout, height);
} else {
collapse(relativeLayout);
}
break;
case R.id.viewmore1:
if (relativeLayout1.getVisibility() == View.GONE) {
expand(relativeLayout1, height1);
} else {
collapse(relativeLayout1);
}
break;
case R.id.viewmore2:
if (relativeLayout2.getVisibility() == View.GONE) {
expand(relativeLayout2, height2);
} else {
collapse(relativeLayout2);
}
break;
}
}
}
您还可以创建自己的自定义可扩展项来扩展 android 相对布局。在该自定义视图上，您可以存储展开或折叠状态。您还可以创建自定义属性来定义您的视图默认状态，如展开或折叠。因此，您不需要比较视图状态，您只需调用切换功能即可将视图切换为展开或折叠，反之亦然
如果您想将折叠视图显示为默认视图，则不应在 onMeasure 函数之前更改视图可见性并存储您的视图测量高度。如果更改视图构造函数 onMeasure 函数的可见性，则跳过该视图的计算。您应该在 onPreDraw 函数上切换可见性。