问题
I am trying to position a button in between two layouts.
Also, I don't want to have to do this with a margin if I can help it, when you start dealing with different screen sizes margin breaks down. (In this image, I am trying to position the green button in between two layouts)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="@color/busy_white">
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/profile_default_round"
android:background="@drawable/ring_status_clock_in"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="John Doe"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manager"/>
</LinearLayout>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/translucent_black_90"
android:padding="16dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentLeft="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Today Total"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="08:32"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_alignParentRight="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Week Total"
android:gravity="right"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="24:32"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-40dp">
</LinearLayout>
</RelativeLayout>
<include layout="@layout/dashboard_clock_in_button" />
</LinearLayout>
回答1:
This kind of UI calls for overlap of multiple layers.
So FrameLayout is the hero here.
To give a basic idea of what we wish to achieve, we can sketch the screen and decide placements
FL is the main container which will be a FrameLayout.
You need to make a button of fixed height. Let's say BL is of height bl dp.
Simply provide a MarginBottom of length bl/2 dp to the LinearLayout LL.
Where LL is the container which would contain the profile image and the works.
The layout file will look like this
<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:background="@android:color/white"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/ConcernedPortionofScreen"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<!-- Parent FrameLayout 'FL' -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This is Layout 'LL'
This is where you will place your image & the nice bg
-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="25dp"
android:background="#b2ebf2" />
<!-- BL = 50dp -->
<Button
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#558b2f"
android:text="@android:string/ok"
android:textSize="18sp"
android:textColor="@android:color/white" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/RestofScreen"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"
android:orientation="vertical" />
</LinearLayout>
The output will look like this
回答2:
I think you should try using a RelativeLayout in which you will put your two layouts and your button.
But if you want to put the button on top of the two layouts you have to put it in your RelativeLayout last because of the z-order, and then use the XML attribute android:centerInParent.
So your layout would be something like the following:
<RelativeLayout ...
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout ...
android:id="@+id/myLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" > <!-- Or wherever you want to position this layout -->
...
</LinearLayout>
<LinearLayout ...
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/myLayout1" > <!-- Or wherever you want to position this layout -->
...
</LinearLayout>
<Button ...
android:layout_centerInParent="true" />
</RelativeLayout>
回答3:
You can easily implement this by using Coordinator layout.We have to specify multiple layouts one by one and the both layout must be LinearLayout . Now we have to use layout_anchor attribute inside Button
<android.support.design.widget.CoordinatorLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#CDDC39"
android:layout_weight="50"/>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="50"
android:background="#C6FF00"
/>
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_anchor="@id/LinearLayout1"
app:backgroundTint="#2196F3"
app:elevation="7dp"
android:text:"click Me"
android:layout_margin="20dp"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
来源：https://stackoverflow.com/questions/23921153/how-can-i-position-a-button-in-between-two-layouts