Поскольку мы изучали различные View, ViewGroup и Layouts в предыдущих уроках, теперь пришло время изучить, как использовать их все вместе в нашем проекте Android для разработки пользовательских интерфейсов. В этом уроке мы узнаем, как мы можем поместить различные View, ViewGroup и Layouts в общий макет, чтобы создать идеальный графический интерфейс для вашего приложения на Android.
У нас есть очень простой пример ниже, чтобы продемонстрировать, как мы можем использовать несколько View, ViewGroup и Layouts вместе.
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF59D"
tools:context="com.example.android.myapplication.MainActivity">
<!--Light Yellow Color-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/l1"
android:background="#FF9E80">
<!--Light Pink Color-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jandroid"
android:textAllCaps="true"
android:textSize="40dp"
android:textColor="#F44336"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:textAllCaps="true"
android:textSize="40dp"
android:textColor="#F44336"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="@id/l1"
android:background="#039BE5"
android:id="@+id/l2">
<!--Light Blue Color-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jandroid"
android:textAllCaps="true"
android:textSize="30dp"
android:textColor="#76FF03"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
android:textAllCaps="true"
android:textSize="30dp"
android:textColor="#76FF03"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/l2"
android:background="#7E57C2"
>
<!--Light Purple Color-->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toast 1"
android:id="@+id/b1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toast 2"
android:layout_toRightOf="@id/b1"
android:id="@+id/b2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toast 3"
android:layout_below="@id/b1"
android:id="@+id/b3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toast 4"
android:layout_below="@id/b2"
android:layout_toRightOf="@id/b3"
/>
</RelativeLayout>
</RelativeLayout>
- В приведенном выше дизайне пользовательского интерфейса у нас есть корневой элемент RelativeLayout. Это означает, что все его дочерние элементы, будь то Layouts или View, будут расположены относительным образом. Таким образом, очень важно тщательно выбирать нашу корневую компоновку.
- Далее у нас есть Linear Layout, для которого задана ориентация – вертикальный. Это означает, что все элементы внутри этого линейного макета будут расположены вертикально.
- Далее у нас есть еще один линейный макет, для которого задана ориентация – горизонтальный. Таким образом, как видите, у нас могут быть разные макеты, размещенные внутри корневого макета.
- Далее у нас есть еще один Relative Layout, размещенный внутри корневого Relative Layout. Этот относительный макет имеет внутри 4 кнопки, расположенные относительно друг друга.
- Помните, что все эти макеты размещаются внутри относительного макета. Таким образом, все эти макеты относятся друг к другу.
Android предоставляет очень структурированный и расширяемый способ разработки пользовательского интерфейса. Теперь, когда вы поняли, как использовать различные макеты, View и ViewGroup, приступайте к созданию экранов пользовательского интерфейса для вашего приложения.