60 views

Schuif een lay-out omhoog vanaf de onderkant van het scherm

Hosted by Code Expert
android

Ik heb een lay-out verborgen voor de weergave. Met een klik op de knop wil ik dat het van onder naar boven schuift en de volledige scherminhoud naar boven duwt, vergelijkbaar met hoe WhatsApp het emoticons-paneel in het chatscherm laat zien.

Ik heb SlidingDrawer gezien, maar dat werkt niet voor mij. Het vereist een afbeelding als handvat die in het midden van het scherm wordt weergegeven, dat wil ik niet. Het schuift ook over de bestaande scherminhoud, ik ben op zoek naar een manier om de bestaande inhoud naar boven te verplaatsen.

Update 1:

Ik heb geprobeerd de animaties te gebruiken zoals voorgesteld door Sanket Kachhela. Maar de verborgen lay-out wordt nooit getoond. Hier is de code.

Indeling (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>

Activiteit (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;
    }
}
}

Animaties:

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>

Enig idee hoe dit kan worden gedaan?

Bedankt.

Antwoord 1, autoriteit 100%

Gebruik deze animaties:

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>

Gebruik deze code in uw activiteit om uw weergave te verbergen/animeren:

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

Antwoord 2, autoriteit 27%

Je was dichtbij. De sleutel is om de verborgen lay-out op te blazen tot match_parentin zowel lengte als gewicht. Begin het gewoon als View.GONE. Op deze manier werkt het gebruik van het percentage in de animators correct.

Indeling (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>

Activiteit (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;
    }
}

Het enige andere dat ik heb gewijzigd, was in bottom_up.xml. In plaats van

android:fromYDelta="75%p"

Ik gebruikte:

android:fromYDelta="100%p"

Maar dat is een kwestie van voorkeur, denk ik.

Antwoord 3, autoriteit 6%

Je hoeft alleen maar een regel in je app toe te voegen, vind het via onderstaande link:

Toon en verberg a Weergave met een animatie omhoog/omlaag schuiven

Voeg gewoon een animatie toe aan uw lay-out als volgt:

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

Antwoord 4, autoriteit 4%

Dit is wat uiteindelijk voor mij werkte.

Lay-outs:

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

5, Autoriteit 3%

OK, er zijn twee mogelijke benaderingen. De eenvoudigste – is het gebruik van een schuifmenu bibliotheek. Het maakt het mogelijk om een ​​onderste schuifmenu te maken, het kan de bovenste container animeren om onderkant zichtbaar te maken, het ondersteunt ze allebei met je vinger te slepen of het programmatisch te animeren via de knop (StaticDrawer).

hardere manier – als u animaties wilt gebruiken, zoals al was gesuggereerd. Met animaties moet u eerst uw lay-outs wijzigen. Dus probeer het eerst om uw lay-out naar de eindstatus te veranderen zonder enige animaties. Omdat het zeer waarschijnlijk is dat u uw opvattingen niet goed instelt in relativelayout, dus ook al laat u uw onderste zicht zien, het blijft verborgen door de bovenkant. Zodra u de juiste lay-outverandering hebt bereikt – alles wat u hoeft te doen, is om vertalingen vóór de lay-out te onthouden en de Vertaal-animatie na de lay-out aan te passen.

Antwoord 6

Hier is een oplossing als uitbreiding van [https://stackoverflow.com/a/46644736/10249774]

Onderste paneel duwthoofdinhoud naar boven

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

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>

Hoofdactiviteit:

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

Antwoord 7

Je zou het hoofdscherm en het andere scherm dat je omhoog wilt scrollen als fragmenten kunnen definiëren. Wanneer op de knop op het hoofdscherm wordt gedrukt, stuurt het fragment een bericht naar de activiteit die vervolgens het hoofdscherm vervangt door degene die u naar boven wilt scrollen en de vervanging animeert.

Previous articleBitmap in ImageView met afgeronde hoeken
Next articleWat is de lengte van een gehashte string met SHA512?

Other episodes

Waarom is er een aparte MutableLiveData-subklasse van LiveData?

android Code Expert - 0
Het lijkt erop dat MutableLiveDataalleen verschilt van LiveDatadoor de methoden setValue()en postValue()te gebruiken openbaar, terwijl ze in LiveDatabeschermd zijn. Wat zijn enkele redenen om een...
Read more

Clojure op Android

android Code Expert - 0
Is het mogelijk om Android-apps te programmeren in Clojure? Kan iemand een goede tutorial of boek voorstellen, als dat mogelijk is? Antwoord 1, autoriteit 100% Ja, dit...
Read more

Android MediaScannerConnection scanFile gebruiken

android Code Expert - 0
Ik voeg afbeeldingen toe aan een map op de SDCARD. Aangezien de afbeeldingen en mijn map niet direct zichtbaar zijn in de Galerij im proberen de...
Read more

Kamer “Weet niet zeker hoe een cursor moet worden geconverteerd naar het retourtype van deze methode”: welke methode?

android Code Expert - 0
Met behulp van RoomIk krijg deze foutmelding en ik zou graag willen weten welke methode dit veroorzaakt. Ik heb meerdere Dao's, met in totaal...
Read more

App installeren via usb: het apparaat is tijdelijk beperkt

android Code Expert - 0
Als ik de installatie via USBin de ontwikkelaarsmodus inschakel: er verschijnt het toastbericht dat het apparaat tijdelijk is beperkt schakel vervolgens de instellingen uit. Is hier...
Read more

Apparaten met Android + MIUI en setCustomSelectionActionModeCallback

android Code Expert - 0
Ik probeer een aangepast selectiemenu te maken, maar het werkt niet op een apparaat met ROM MIUI en Android 6. Het resultaat is een...
Read more

android.view.InflateException: Binaire XML-bestandsregel #12: Fout bij het opblazen van klasse <unknown>

android Code Expert - 0
Ik ontvang veel fouten die worden weergegeven in de subj. Deze fouten lijken incidenteel te zijn en ik kan ze niet reproduceren. Van stapel...
Read more

© Copyright - Code Expert 2021