从屏幕底部向上滑动布局

我有一个隐藏的视图布局。 在一个button上单击我希望它从底部向上滑动，向上推动整个屏幕内容，非常类似于WhatsApp在聊天屏幕中显示表情符号面板的方式。

我见过SlidingDrawer，不适合我。 它需要一个图像作为在屏幕中心显示的句柄，我不想要这个。 它也滑过现有的屏幕内容，我正在寻找一种方法向上移动现有的内容。

更新1：

我尝试使用Sanket Kachhelabuild议的animation。 但隐藏的布局从不显示。 这是代码。

布局（activity_main.xml）：

<RelativeLayout android:id="@+id/main_screen" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_alignParentTop="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_centerInParent="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Slide up / down" android:layout_alignParentBottom="true" android:onClick="slideUpDown"/> </RelativeLayout> <RelativeLayout android:id="@+id/hidden_panel" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/main_screen"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" /> </RelativeLayout> 

活动（MainActivity.java）：

 package com.example.slideuplayout; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; public class MainActivity extends Activity { private ViewGroup hiddenPanel; private boolean isPanelShown; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel); hiddenPanel.setVisibility(View.INVISIBLE); isPanelShown = false; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } public void slideUpDown(final View view) { if(!isPanelShown) { // Show the panel Animation bottomUp = AnimationUtils.loadAnimation(this, R.anim.bottom_up); hiddenPanel.startAnimation(bottomUp); hiddenPanel.setVisibility(View.VISIBLE); isPanelShown = true; } else { // Hide the Panel Animation bottomDown = AnimationUtils.loadAnimation(this, R.anim.bottom_down); hiddenPanel.startAnimation(bottomDown); hiddenPanel.setVisibility(View.INVISIBLE); isPanelShown = false; } } } 

animation：

bottom_up.xml：

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="75%p" android:toYDelta="0%p" android:fillAfter="true" android:duration="500" /> </set> 

bottom_down.xml：

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0%p" android:toYDelta="100%p" android:fillAfter="true" android:interpolator="@android:anim/linear_interpolator" android:duration="500" /> </set> 

任何想法如何做到这一点？

谢谢。

Answer 1

使用这些animation：

bottom_up.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="75%p" android:toYDelta="0%p" android:fillAfter="true" android:duration="500"/> </set> 

bottom_down.xml

  <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromYDelta="0%p" android:toYDelta="100%p" android:fillAfter="true" android:interpolator="@android:anim/linear_interpolator" android:duration="500" /> </set> 

在您的活动中使用此代码来隐藏/animation您的视图：

 Animation bottomUp = AnimationUtils.loadAnimation(getContext(), R.anim.bottom_up); ViewGroup hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel); hiddenPanel.startAnimation(bottomUp); hiddenPanel.setVisibility(View.VISIBLE); 

Answer 2

你很近 关键是让隐藏的布局在高度和重量上膨胀到match_parent 。 只需从View.GONE开始。 这样，使用animation师中的百分比就能正常工作。

布局（activity_main.xml）：

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_screen" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="@string/hello_world" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/hello_world" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:onClick="slideUpDown" android:text="Slide up / down" /> <RelativeLayout android:id="@+id/hidden_panel" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:visibility="gone" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" android:layout_centerInParent="true" android:onClick="slideUpDown" /> </RelativeLayout> </RelativeLayout> 

活动（MainActivity.java）：

 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; public class OffscreenActivity extends Activity { private View hiddenPanel; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); hiddenPanel = findViewById(R.id.hidden_panel); } public void slideUpDown(final View view) { if (!isPanelShown()) { // Show the panel Animation bottomUp = AnimationUtils.loadAnimation(this, R.anim.bottom_up); hiddenPanel.startAnimation(bottomUp); hiddenPanel.setVisibility(View.VISIBLE); } else { // Hide the Panel Animation bottomDown = AnimationUtils.loadAnimation(this, R.anim.bottom_down); hiddenPanel.startAnimation(bottomDown); hiddenPanel.setVisibility(View.GONE); } } private boolean isPanelShown() { return hiddenPanel.getVisibility() == View.VISIBLE; } } 

只有我改变的其他东西是在bottom_up.xml 。 代替

 android:fromYDelta="75%p" 

我用了：

 android:fromYDelta="100%p" 

但是，我想这是一个偏好问题。

Answer 3

使用这个布局。 如果要为主视图缩小设置animation，则需要将animation添加到隐藏条的高度，购买它可能足以在条上使用翻译animation，并使主视图高度跳转而不是animation。

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:id="@+id/main_screen" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="@string/hello_world" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/hello_world" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:onClick="slideUpDown" android:text="Slide up / down" /> </RelativeLayout> <RelativeLayout android:id="@+id/hidden_panel" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="#fcc" android:visibility="visible" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/app_name" /> </RelativeLayout> </LinearLayout> 

Answer 4

这是最终对我有用的东西。

布局：

activity_main.xml中

 <RelativeLayout android:id="@+id/main_screen" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_alignParentBottom="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_alignParentTop="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_centerInParent="true" /> <Button android:id="@+id/slideButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Slide up / down" android:layout_alignParentBottom="true" android:onClick="slideUpDown"/> </RelativeLayout> 

hidden_​​panel.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/hidden_panel" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Test" /> </LinearLayout> 

Java： package com.example.slideuplayout;

 import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.ViewGroup; import android.view.ViewTreeObserver; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; public class MainActivity extends Activity { private ViewGroup hiddenPanel; private ViewGroup mainScreen; private boolean isPanelShown; private ViewGroup root; int screenHeight = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mainScreen = (ViewGroup)findViewById(R.id.main_screen); ViewTreeObserver vto = mainScreen.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { screenHeight = mainScreen.getHeight(); mainScreen.getViewTreeObserver().removeGlobalOnLayoutListener(this); } }); root = (ViewGroup)findViewById(R.id.root); hiddenPanel = (ViewGroup)getLayoutInflater().inflate(R.layout.hidden_panel, root, false); hiddenPanel.setVisibility(View.INVISIBLE); root.addView(hiddenPanel); isPanelShown = false; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } public void slideUpDown(final View view) { if(!isPanelShown) { // Show the panel mainScreen.layout(mainScreen.getLeft(), mainScreen.getTop() - (screenHeight * 25/100), mainScreen.getRight(), mainScreen.getBottom() - (screenHeight * 25/100)); hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight); hiddenPanel.setVisibility(View.VISIBLE); Animation bottomUp = AnimationUtils.loadAnimation(this, R.anim.bottom_up); hiddenPanel.startAnimation(bottomUp); isPanelShown = true; } else { isPanelShown = false; // Hide the Panel Animation bottomDown = AnimationUtils.loadAnimation(this, R.anim.bottom_down); bottomDown.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation arg0) { isPanelShown = false; mainScreen.layout(mainScreen.getLeft(), mainScreen.getTop() + (screenHeight * 25/100), mainScreen.getRight(), mainScreen.getBottom() + (screenHeight * 25/100)); hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight); } }); hiddenPanel.startAnimation(bottomDown); } } } 

Answer 5

您只需要在您的应用中添加一些行，请从下面的链接find它：

使用上/下滑动animation显示和隐藏视图

只需添加一个animation到你的布局，像这样：

 mLayoutTab.animate() .translationYBy(120) .translationY(0) .setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime)); 

Answer 6

好的，有两种可能的方法。 最简单的 – 就是使用滑动菜单库。 它允许创build一个底部的滑动菜单，它可以animation的顶部容器底部可见，它支持拖动它用你的手指，或通过button（StaticDrawer）以编程方式animation。

更难的方法 – 如果你想使用animation，就像已经build议的那样。 animation你必须首先改变你的布局。 因此，请首先尝试将您的布局更改为最终状态，而不进行任何animation。 因为你很可能在RelativeLayout中没有正确地布置你的视图，所以即使你显示了底部视图，它仍然被顶部视图所遮盖。 一旦你实现了正确的布局改变 – 你所要做的就是在布局之前记住翻译，并在布局之后应用翻译animation。

Answer 7

试试下面的代码，它非常简短。

transalate_anim.xml

 <?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2013 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="4000" android:fromXDelta="0" android:fromYDelta="0" android:repeatCount="infinite" android:toXDelta="0" android:toYDelta="-90%p" /> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="4000" android:fromAlpha="0.0" android:repeatCount="infinite" android:toAlpha="1.0" /> </set> 

activity_main.xml中

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.naveen.congratulations.MainActivity"> <ImageView android:id="@+id/image_1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginBottom="8dp" android:layout_marginStart="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:srcCompat="@drawable/balloons" /> </android.support.constraint.ConstraintLayout> 

MainActivity.java

 public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ImageView imageView1 = (ImageView) findViewById(R.id.image_1); imageView1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startBottomToTopAnimation(imageView1); } }); } private void startBottomToTopAnimation(View view) { view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_anim)); } } 

Answer 8

您可以将主屏幕和其他屏幕定义为碎片。 当主屏幕上的button被按下时，片段会向活动发送一条消息，然后将主屏幕replace为您想要向上滚动的主屏幕，并为replaceanimation。

Answer 9

我的代码，使animation幻灯片，没有XML下滑

 private static ObjectAnimator createBottomUpAnimation(View view, AnimatorListenerAdapter listener, float distance) { ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", -distance); // animator.setDuration(???) animator.removeAllListeners(); if (listener != null) { animator.addListener(listener); } return animator; } public static ObjectAnimator createTopDownAnimation(View view, AnimatorListenerAdapter listener, float distance) { view.setTranslationY(-distance); ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0); animator.removeAllListeners(); if (listener != null) { animator.addListener(listener); } return animator; } 

使用向下滑动

 createTopDownAnimation(myYellowView, null, myYellowView.getHeight()).start(); 

为了上滑

 createBottomUpAnimation(myYellowView, null, myYellowView.getHeight()).start();