Как программно показать один макет поверх другого в моем случае?

84

Мой основной макет main.xml просто содержит два LinearLayout:

  • 1-е LinearLayoutхозяева а VideoViewи а Button,
  • 2-й LinearLayoutхост EditText, и это LinearLayoutустановило значение видимости " GONE " ( android:visibility="gone")

как показано ниже:

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

Я успешно реализовал функцию, когда Button(с идентификатором my_btn) нажат, второе LinearLayout с EditTextполем показано, со следующим кодом 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);

    }
}); 

С учетом указанных выше Java кода, то второй LinearLayout с EditTextпоказано , как добавление ниже на 1 LinearLayout , который имеет смысл.

НО , мне нужно: когда Button(id: my_btn) нажата, 2-й LinearLayout с EditText отображается поверх 1 - го LinearLayout , что выглядит так, как будто 2-й LinearLayout с EditTextподнимается из нижней части экрана, а 2-й LinearLayout с EditTextзанимает только часть экран снизу, это 1-й LinearLayout все еще виден, как показано на изображении ниже:

введите описание изображения здесь

Итак, когда Buttonнажимается (id: my_btn), как показать 2-е LinearLayout с помощью EditText поверх 1 - го LinearLayout вместо программного добавления 2-го LinearLayout под 1-м LinearLayout ?

Меллон
источник

Ответы:

187

Используйте FrameLayout с двумя дочерними элементами. Двое детей будут перекрываться. На самом деле это рекомендуется в одном из руководств по Android, это не взлом ...

Вот пример, в котором TextView отображается поверх 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>

Вот результат

Александру Кристеску
источник
14
Что делает TextViewверхний в этом коде ? потому что он занимает второе место в списке?
Адам Джонс
14
Как говорится в документации FrameLayout: Дочерние представления рисуются в стеке, причем последний добавленный дочерний элемент находится сверху. Учитывая, что макет xml анализируется сверху вниз, элемент TextView отображается сверху как последний в xml.
Maciej Pigulski
Я пытаюсь это сделать, но с Scrollview в качестве первого ребенка FrameLayout и TextView в качестве второго ребенка. Но здесь он не показывает прокрутку на заднем плане. Любая помощь.
Raju
1
Спасибо брат! Этот ответ был именно тем, что я ищу! Большой! @Raju: поместите следующий FrameLayout перед ПОСЛЕДНИМ закрывающим тегом вашего макета (весь экран) ... <FrameLayout android: id = "@ + id / icon_frame_container" android: layout_width = "match_parent" android: layout_height = "match_parent"> </FrameLayout> Теперь создайте ссылку на него и выполните свой onClick- или onTouch-метод как обычно.
Мартин Пфеффер
1
FrameLayout - правильный выбор, но также стоит отметить, что RelativeLayout будет вести себя так же, если дочерние представления будут располагаться друг над другом по мере их добавления. (Я был новичком в Android и ошибочно думал, что только FrameLayout может выполнять стекание после прочтения этого ответа. Упс)
Люк,
5

FrameLayout не лучший способ сделать это:

RelativeLayoutВместо этого используйте . Вы можете расположить элементы где угодно. Элемент, который идет после, имеет более высокий z-index, чем предыдущий (т.е. он стоит над предыдущим).

Пример:

<?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>

введите описание изображения здесь

Радж Ядав
источник
4

Ответ, данный Александру, работает довольно хорошо. По его словам, важно, чтобы этот "вспомогательный" вид был добавлен в качестве последнего элемента. Вот код, который помог мне:

        ...

        ...

            </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>

в Java:

final MaterialDialog materialDialog = (MaterialDialog) dialogInterface;

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

frameLayout.setOnTouchListener(
        new OnSwipeTouchListener(ShowCardActivity.this) {
Мартин Пфеффер
источник