在我的例子中,如何以编程方式显示一种布局在另一种布局之上?

我的主布局 Xml只包含两个 LinearLayout:

  • 第一个 LinearLayout包含一个 VideoView和一个 Button,
  • 第二个 LinearLayout承载一个 EditText,这个 LinearLayout能见度值设置为“ 消失了”(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(id 为 my _ btn)时,会显示 第二名 LinearLayoutEditText字段,其中包含以下 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 代码,第二名 LinearLayoutEditText就像 附录如下一样显示了 第一 LinearLayout,这是有意义的。

但是 ,我需要的是: 当按下 Button(id: my _ btn)时,带有 EditText第二名 LinearLayoutEditText 显示在LinearLayout0 LinearLayout,看起来就像带有 EditText第二名 LinearLayout从屏幕底部上升,而带有 EditText第二名 LinearLayout只占据了屏幕底部的一部分,这是仍然可见的第一个线性布局,如下图所示:

enter image description here

那么,当按下 Button(id: my _ btn)时,如何用 EditText 显示 第二名 LinearLayout,而不是用编程方式将 第二名 LinearLayout附加到 第一 LinearLayout下面?

136354 次浏览

Use a FrameLayout with two children. The two children will be overlapped. This is recommended in one of the tutorials from Android actually, it's not a hack...

Here is an example where a TextView is displayed on top of an 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>

Here is the result

The answer, given by Alexandru is working quite nice. As he said, it is important that this "accessor"-view is added as the last element. Here is some code which did the trick for me:

        ...


...


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

in Java:

final MaterialDialog materialDialog = (MaterialDialog) dialogInterface;


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


frameLayout.setOnTouchListener(
new OnSwipeTouchListener(ShowCardActivity.this) {

FrameLayout is not the better way to do this:

Use RelativeLayout instead. You can position the elements anywhere you like. The element that comes after, has the higher z-index than the previous one (i.e. it comes over the previous one).

Example:

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

enter image description here