web-dev-qa-db-ja.com

画面の下からレイアウトを上にスライドさせる

ビューからレイアウトが非表示になっています。ボタンをクリックすると、下から上にスライドして、画面のコンテンツ全体を上に押し上げます。これは、whatsappがチャット画面で絵文字パネルを表示するのと非常に似ています。

私はSlidingDrawerを見たことがありますが、それは私にはうまくいきません。画面の中央に表示されるハンドルとしての画像が必要ですが、それは望ましくありません。また、既存の画面コンテンツ上をスライドします。既存のコンテンツを上に移動する方法を探しています。

更新1：

Sanket Kachhelaが提案するアニメーションを使用してみました。ただし、非表示のレイアウトは表示されません。これがコードです。

レイアウト（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>

Activity（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;
    }
}

}

アニメーション：

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>

これをどのように行うことができますか？

ありがとう。

androidlayoutuislider
83
Babar

これらのアニメーションを使用します。

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 bottomUp = AnimationUtils.loadAnimation(getContext(),
            R.anim.bottom_up);
ViewGroup hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel);
hiddenPanel.startAnimation(bottomUp);
hiddenPanel.setVisibility(View.VISIBLE);
139
Sanket Kachhela

あなたは近くにいました。重要なのは、非表示のレイアウトを、高さと重量の両方でmatch_parentに膨張させることです。 View.GONEとして開始するだけです。このように、アニメーターでパーセンテージを使用すると、適切に機能します。

レイアウト（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>

Activity（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"

しかし、それは好みの問題だと思います。

41
Paul Burke

アプリに行を追加するだけで、以下のリンクから見つけることができます：

スライドアップ/ダウンアニメーションでビューを表示および非表示

次のようにレイアウトにアニメーションを追加するだけです。

mLayoutTab.animate()
  .translationYBy(120)
  .translationY(0)
  .setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));
7
varotariya vajsi

これが私にとって最後に働いたものです。

レイアウト：

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);
    }
}
}
6
Babar

このレイアウトを使用します。メインビューの縮小をアニメートする場合は、非表示のバーの高さにアニメーションを追加する必要があります。バーで翻訳アニメーションを使用し、アニメートする代わりにメインビューの高さをジャンプさせるのに十分な場合があります。

<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>
4
yoah

わかりました、2つの可能なアプローチがあります。最も単純な-は、 スライドメニュー ライブラリを使用することです。下部のスライドメニューを作成し、上部のコンテナをアニメーション化して下部を表示し、指でドラッグするか、ボタン（StaticDrawer）を使用してプログラムでアニメーション化することができます。

難しい方法-既に提案されているように、アニメーションを使用する場合。アニメーションでは、最初にレイアウトを変更する必要があります。そのため、アニメーションを一切使用せずに、最初にレイアウトを最終状態に変更してください。 RelativeLayoutでビューを適切にレイアウトしていない可能性が非常に高いため、下のビューを表示しても、上のビューによって隠されたままになります。適切なレイアウト変更を達成したら、必要なことは、レイアウトの前に翻訳を記憶し、レイアウト後の翻訳アニメーションを適用することだけです。

3
EvilDuck

以下のコードを試してください。非常に短くて簡単です。

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));
    }
}

bottom_up_navigation of image

2
Naveen Kumar M

アニメーションを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;
}

Usingスライドダウンの場合

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

スライドアップ用

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

enter image description here

2
Phan Van Linh

[ https://stackoverflow.com/a/46644736/10249774] の拡張としてのソリューションを次に示します。

下のパネルはpushingメインコンテンツが上

https://imgur.com/a/6nxewE

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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"
tools:context=".MainActivity">
<Button
    Android:id="@+id/my_button"
    Android:layout_marginTop="10dp"
    Android:onClick="onSlideViewButtonClick"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"/>
<LinearLayout
Android:id="@+id/main_view"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="vertical"
Android:gravity="center_horizontal">
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main"
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main"
    Android:textSize="70dp"/>
</LinearLayout>
<LinearLayout
    Android:id="@+id/footer_view"
    Android:background="#a6e1aa"
    Android:orientation="vertical"
    Android:gravity="center_horizontal"
    Android:layout_alignParentBottom="true"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="footer content"
        Android:textSize="40dp" />
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="footer content"
        Android:textSize="40dp" />
  </LinearLayout>
</RelativeLayout>

主な活動：

import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.View;
import Android.view.animation.TranslateAnimation;
import Android.widget.Button;

public class MainActivity extends AppCompatActivity {
private Button myButton;
private View footerView;
private View mainView;
private boolean isUp;
private int anim_duration = 700;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    footerView = findViewById(R.id.footer_view);
    mainView = findViewById(R.id.main_view);
    myButton = findViewById(R.id.my_button);

    // initialize as invisible (could also do in xml)
    footerView.setVisibility(View.INVISIBLE);
    myButton.setText("Slide up");
    isUp = false;
}
public void slideUp(View mainView , View footer_view){
    footer_view.setVisibility(View.VISIBLE);
    TranslateAnimation animate_footer = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            footer_view.getHeight(),  // fromYDelta
            0);                // toYDelta
    animate_footer.setDuration(anim_duration);
    animate_footer.setFillAfter(true);
    footer_view.startAnimation(animate_footer);

    mainView.setVisibility(View.VISIBLE);
    TranslateAnimation animate_main = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            0,  // fromYDelta
            (0-footer_view.getHeight()));                // toYDelta
    animate_main.setDuration(anim_duration);
    animate_main.setFillAfter(true);
    mainView.startAnimation(animate_main);
}
public void slideDown(View mainView , View footer_view){
    TranslateAnimation animate_footer = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            0,                 // fromYDelta
            footer_view.getHeight()); // toYDelta
    animate_footer.setDuration(anim_duration);
    animate_footer.setFillAfter(true);
    footer_view.startAnimation(animate_footer);


    TranslateAnimation animate_main = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            (0-footer_view.getHeight()),  // fromYDelta
            0);                // toYDelta
    animate_main.setDuration(anim_duration);
    animate_main.setFillAfter(true);
    mainView.startAnimation(animate_main);
}

public void onSlideViewButtonClick(View view) {
    if (isUp) {
        slideDown(mainView , footerView);
        myButton.setText("Slide up");
    } else {
        slideUp(mainView , footerView);
        myButton.setText("Slide down");
    }
    isUp = !isUp;
}
}
0
Drasko

メイン画面と、スクロールアップする他の画面をフラグメントとして定義できます。メインスクリーン上のボタンが押されると、フラグメントはアクティビティにメッセージを送信し、メインスクリーンを上にスクロールして置換をアニメーション化するものに置き換えます。

0
superuser