你好,我必须创建像下面这样的用户界面(图片附加)使用常规的android布局。我有页眉,页脚和中间区域以及一个图像视图。
根据图片:A区和C区的高度相似(屏幕的20%),图像视图应始终位于B区和C区的中间。
我当前的XML代码如下
<?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"
>
<LinearLayout
android:id="@+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:id="@+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:background="@color/grayContact"
android:layout_below="@+id/show_contact_headerArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="@+id/show_contact_bottomArea">
</LinearLayout>
<LinearLayout
android:id="@+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"></LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="@drawable/common_google_signin_btn_icon_dark_focused"
android:id="@+id/imageView2"
android:layout_marginBottom="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
我给了
marginbottom=“40dp”
对于图像视图,将其向上推,这不是一个好的做法。将图像视图放置在B区和C区边界中心的最佳方式是什么?
现在我也给了
android:layout_height=“120dp”
对于A区和B区的高度,但理想情况下两者都应为屏幕的20%(每个),如何实现这一点?
最佳答案
你可以给每个A和C加20%的重量,这样它们将分别占据顶部和底部的20%。将其余60%的高度分配给B。
对于ImageView,您可以将整个布局放置在坐标布局中,并为页脚指定定位点。
她是代码片段
<?xml version="1.0" encoding="utf-8"?>
<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 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"
android:orientation="vertical"
android:weightSum="10">
<LinearLayout
android:id="@+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_weight="2"
android:background="@color/primary_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="@+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="@+id/show_contact_bottomArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@+id/show_contact_headerArea"
android:layout_weight="6"
android:background="@color/holo_blue_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="@+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="2"
android:background="@color/primary"
android:orientation="vertical"></LinearLayout>
</LinearLayout>
<ImageView
android:id="@+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
app:layout_anchor="@+id/show_contact_headerArea"
app:layout_anchorGravity="center_horizontal|top"
app:srcCompat="@drawable/header_record" />
</android.support.design.widget.CoordinatorLayout>
结果:-我用不同的颜色代码给不同的部分上色。