如何设计Android中的重叠元素?
How to design overlapping elements in Android?
我正在尝试实现一个与此类似的屏幕:
我能够实现以上。我使用了以下逻辑:
FrameLayout
|- Linear Layout
|- Button (Purple Colour, Layout Width = 1)
|- Button (Blue Colour, Layout Width = 1)
|- Linear Layout (Layout_Gravity = center)
|- Button (Button Text)
源代码
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/accent_material_light"
android:orientation="vertical"
android:padding="0dp"
android:weightSum="100">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="@android:color/holo_purple" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"
android:background="@android:color/holo_blue_light" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/abc_search_url_text_pressed">
<Button
android:id="@+id/button2"
android:layout_height="48dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent" />
</LinearLayout>
</FrameLayout>
问题:-
如果两个视图(紫色和蓝色视图)必须分别占据屏幕的 40% 和 60%,我应该如何将 Button 放置在两个视图的边框上。在那种情况下,我不能使用 layout_gravity 居中。如何解决这个问题?
看起来像这样:-
如何解决这个问题?
更简单的解决方案可以是 ConstraintsLayout
。下面是结合线性和相对布局的解决方案。
<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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimaryDark"
android:gravity="center">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_purple"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center">
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_light"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Install" />
</RelativeLayout>
为了获得更好的性能,有必要减少层次结构。在这里,您可以使用唯一约束布局作为根布局,而不是使用 two/three 级层次结构。
在约束布局中采用具有约束的按钮
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
这会将按钮设置在中心,然后设置两个图像视图
imageView1:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="id:button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
imageView2:
app:layout_constraintTop_toBottomOf="id:button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
多级层次结构需要很长时间才能加载 UI。所以,尽量减少它。
我正在尝试实现一个与此类似的屏幕:
我能够实现以上。我使用了以下逻辑:
FrameLayout
|- Linear Layout
|- Button (Purple Colour, Layout Width = 1)
|- Button (Blue Colour, Layout Width = 1)
|- Linear Layout (Layout_Gravity = center)
|- Button (Button Text)
源代码
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/accent_material_light"
android:orientation="vertical"
android:padding="0dp"
android:weightSum="100">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:background="@android:color/holo_purple" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="60"
android:background="@android:color/holo_blue_light" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/abc_search_url_text_pressed">
<Button
android:id="@+id/button2"
android:layout_height="48dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent" />
</LinearLayout>
</FrameLayout>
问题:-
如果两个视图(紫色和蓝色视图)必须分别占据屏幕的 40% 和 60%,我应该如何将 Button 放置在两个视图的边框上。在那种情况下,我不能使用 layout_gravity 居中。如何解决这个问题?
看起来像这样:-
如何解决这个问题?
更简单的解决方案可以是 ConstraintsLayout
。下面是结合线性和相对布局的解决方案。
<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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimaryDark"
android:gravity="center">
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_purple"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center">
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_light"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Install" />
</RelativeLayout>
为了获得更好的性能,有必要减少层次结构。在这里,您可以使用唯一约束布局作为根布局,而不是使用 two/three 级层次结构。
在约束布局中采用具有约束的按钮
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
这会将按钮设置在中心,然后设置两个图像视图
imageView1:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="id:button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
imageView2:
app:layout_constraintTop_toBottomOf="id:button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
多级层次结构需要很长时间才能加载 UI。所以,尽量减少它。