Jak w moim przypadku programowo wyświetlić jeden układ na drugim?

84

Mój główny układ main.xml zawiera po prostu dwa układy liniowe:

  • 1. LinearLayoutgospodarze a VideoViewi a Button,
  • Drugi LinearLayouthost an EditText, LinearLayoutktóry ustawił wartość widoczności na „ GONE ” ( android:visibility="gone")

jak poniżej:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
        android:orientation="vertical"
>
    <LinearLayout 
        android:id="@+id/first_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"

    >
        <VideoView 
            android:id="@+id/my_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="9"
        />

        <Button
            android:id="@+id/my_btn"
            android:layout_width="30dip" 
            android:layout_height="30dip"
            android:layout_gravity="right|bottom"
                android:layout_weight="1"
        />

    </LinearLayout>

    <LinearLayout 
        android:id="@+id/second_ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="2dip"

        android:visibility="gone"
    >
        <EditText 
            android:id="@+id/edit_text_field"
            android:layout_height="40dip"
            android:layout_width="fill_parent"
            android:layout_weight="5"
            android:layout_gravity="center_vertical"
        />

    </LinearLayout>
</LinearLayout>

I z powodzeniem wdrożony cechę, że kiedy Button(z id my_btn) jest wciśnięty, 2-ta LinearLayout z EditTextpola jest pokazany, z następującego kodu Java:

LinearLayout secondLL = (LinearLayout) findViewById(R.id.second_ll);

Button myBtn = (Button) findViewById(R.id.my_btn);
myBtn.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v){
        int visibility = secondLL.getVisibility();

        if(visibility==View.GONE)
            secondLL.setVisibility(View.VISIBLE);

    }
}); 

Z powyższego Java kodzie 2-ci LinearLayout z EditTextpokazano jak dołączanie poniżej w 1 LinearLayout , które ma sens.

ALE , Co potrzebne jest: kiedy Button(id: my_btn) jest wciśnięty, 2-ty LinearLayout ze EditText jest pokazany na górze w 1 LinearLayout , która wygląda jak 2 LinearLayout z EditTextrośnie od dołu ekranu, a 2 LinearLayout z EditTexttylko zajmują część ekran od dołu, to pierwszy układ liniowy nadal widoczny, jak pokazano na poniższym obrazku:

wprowadź opis obrazu tutaj

Tak więc po Buttonnaciśnięciu (id: my_btn), jak wyświetlić 2 - gieLinearLayout z EditText nad 1 - szymLinearLayout zamiast programowo dołączać 2-gie LinearLayout poniżej 1-szej LinearLayout ?

Mellon
źródło

Odpowiedzi:

187

Użyj FrameLayout z dwojgiem elementów podrzędnych. Dwójka dzieci będzie się pokrywać. Jest to zalecane w jednym z samouczków z Androida, właściwie to nie jest hack ...

Oto przykład, w którym TextView jest wyświetlany na górze ImageView:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <ImageView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 

    android:scaleType="center"
    android:src="@drawable/golden_gate" />

  <TextView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="20dip"
    android:layout_gravity="center_horizontal|bottom"

    android:padding="12dip"

    android:background="#AA000000"
    android:textColor="#ffffffff"

    android:text="Golden Gate" />

</FrameLayout>

Oto wynik

Alexandru Cristescu
źródło
13
W tym kodzie, co sprawia, że ​​jest TextViewna wierzchu? czy to dlatego, że zajmuje drugie miejsce na liście?
Adam Johns
13
Jak mówią dokumenty FrameLayout: widoki potomne są rysowane na stosie, z ostatnio dodanym dzieckiem na górze. Biorąc pod uwagę, że układ XML jest analizowany od góry do dołu, element TextView jest rysowany na górze jako ostatni w pliku XML.
Maciej Pigulski
Próbuję tego, ale ze Scrollview jako pierwsze dziecko FrameLayout i TextView jako drugie dziecko. Ale tutaj nie pokazuje przewijania widoku w tle. Jakaś pomoc.
Raju
1
Dziękuję, bracie! Ta odpowiedź była dokładnie tym, czego szukam! Świetny! @Raju: Umieść następujący FrameLayout przed OSTATNIM zamykającym tagiem układu (całego ekranu) ... <FrameLayout android: id = "@ + id / icon_frame_container" android: layout_width = "match_parent" android: layout_height = "match_parent"> </FrameLayout> Teraz odwołaj się do niego i wykonaj swoją metodę onClick lub onTouch jak zwykle.
Martin Pfeffer
1
FrameLayout jest tutaj właściwym wyborem, ale warto również zauważyć, że RelativeLayout zachowywałby się tak samo, gdyby widoki podrzędne były nakładane na siebie, gdy są dodawane. (Byłem nowy w Androidzie i błędnie pomyślałem, że tylko FrameLayout może wykonać stackowanie po przeczytaniu tej odpowiedzi. Upsie)
Luke
5

FrameLayout nie jest lepszym sposobem na zrobienie tego:

Użyj RelativeLayoutzamiast tego. Możesz umieścić elementy w dowolnym miejscu. Następny element ma wyższy indeks z niż poprzedni (tj. Wyprzedza poprzedni).

Przykład:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        app:srcCompat="@drawable/ic_information"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a text."
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="8dp"
        android:padding="5dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:background="#A000"
        android:textColor="@android:color/white"/>
</RelativeLayout>

wprowadź opis obrazu tutaj

Raj Yadav
źródło
4

Odpowiedź udzielona przez Alexandru działa całkiem nieźle. Jak powiedział, ważne jest, aby ten widok „akcesora” został dodany jako ostatni element. Oto kod, który załatwił mi sprawę:

        ...

        ...

            </LinearLayout>

        </LinearLayout>

    </FrameLayout>

</LinearLayout>

<!-- place a FrameLayout (match_parent) as the last child -->
<FrameLayout
    android:id="@+id/icon_frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

</TabHost>

w Javie:

final MaterialDialog materialDialog = (MaterialDialog) dialogInterface;

FrameLayout frameLayout = (FrameLayout) materialDialog
        .findViewById(R.id.icon_frame_container);

frameLayout.setOnTouchListener(
        new OnSwipeTouchListener(ShowCardActivity.this) {
Martin Pfeffer
źródło