Эй, это снова я! Я увидел это изображение в Интернете и подумал, как мы можем расположить элементы управления на странице упорядоченно, но не в беспорядке?
Требуется макет. Макет — это контейнер, который можно использовать для размещения множества элементов управления. Он может настроить положение внутренних элементов управления в соответствии с определенными правилами для создания красивого интерфейса.
Итак, сегодня я собираюсь изучить четыре самые основные раскладки в Android.
Ниже приведены мои учебные заметки для вас.
1. Линейный макет
LinearLayout — это то, что мы используем в основном. Как следует из названия, макет упорядочивает содержащиеся в нем элементы управления в линейном направлении. Если для атрибута android: Orientation задано значение vertical, элементы управления располагаются вертикально. Если для атрибута android: Orientation установлено значение Horizontal, элементы управления располагаются горизонтально.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>
Если вы измените направление LinearLayout, как показано в следующих кодах:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > ...... </LinearLayout>
Измените значение свойства android: Orientation на горизонтальное, что означает разрешение элемента управления в LinearLayout.
Компоненты расположены горизонтально, но если вы не укажете значение свойства android: Orientation, направление по умолчанию будет
Горизонтальный. Запустите программу еще раз, она выйдет:
2. Относительный макет
В отличие от LinearLayout, RelativeLayout является более непринужденным, позволяя элементам управления появляться в любом месте макета, располагая их относительно друг друга.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Button 4" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="Button 5" /> </RelativeLayout>
Давайте выровняем кнопку 1 с верхним левым углом родительского макета, кнопку 2 с верхним правым углом родительского макета, кнопку 3 с центром, кнопку 4 с нижним левым углом родительского макета и кнопку 5 с нижний правый угол родительского макета. В то время как android:layout_alignParentLeft,
андроид: layout_alignParentTop, андроид: layout_alignParentRight, андроид: layout_alignParentBottom,
Атрибуты Android:layout_centerInParent, которые мы никогда раньше не трогали, но их имена полностью определяют их функции.
Каждый элемент управления в приведенном выше примере расположен относительно родительского макета. Можно ли расположить элемент управления относительно элемента управления?
Где находится? Вы можете изменить код в файле activity_main.xml следующим образом:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toLeftOf="@id/button3" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toRightOf="@id/button3" android:text="Button 2" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toLeftOf="@id/button3" android:text="Button 4" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toRightOf="@id/button3" android:text="Button 5" /> </RelativeLayout>
3. Макет кадра
FrameLayout намного проще, чем два предыдущих макета. У него нет возможности позиционирования, а все элементы управления размещены в верхнем левом углу макета.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"/> <ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher"/> </FrameLayout>
В следующем примере FrameLayout содержит только кнопку и изображение.
4. Макет таблицы
Это позволяет нам размещать элементы управления в виде таблицы, что не очень распространено. Когда мы проектируем форму, нужно стараться, чтобы для каждой строки было одинаковое количество столбцов, и такая таблица самая простая. Но иногда все идет не по нашему сценарию. Когда в строке таблицы должно быть неравное количество столбцов, вам необходимо объединить ячейки. Например, существует страница входа, которая позволяет пользователям вводить свою учетную запись и пароль для входа в систему.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TableRow> <TextView android:layout_height="wrap_content" android:text="Account: "/> <EditText android:id="@+id/account" android:layout_height="wrap_content" android:hint="Input your account" /> </TableRow> <TableRow> <TextView android:layout_height="wrap_content" android:text="Password: "/> <EditText android:id="@+id/password" android:layout_height="wrap_content" android:inputType="textPassword" /> </TableRow> <TableRow> <Button android:id="@+id/login" android:layout_height="wrap_content" android:layout_span="2" android:text="Login" /> </TableRow> </TableLayout>
Каждый раз, когда TableRow добавляется в TableLayout, в таблицу добавляется строка, а затем добавляется TableRow.
Каждый раз, когда добавляется элемент управления, в строку добавляется столбец. Ширина элемента управления в TableRow не может быть указана.
Здесь мы разработали таблицу в трехстрочном формате с двумя столбцами, с TextView и текстовым представлением в первой строке для ввода счетов.
EditText, во второй строке также есть TextView и EditText для ввода пароля, установив
Android: установите для inputType текстовый пароль, чтобы изменить EditText на текстовое поле пароля. Но третья строка имеет только одну кнопку для входа в систему, первые две строки имеют два столбца, а третья строка имеет только один столбец, что делает таблицу некрасивой и очень неразумной. В этом случае вам нужно объединить ячейки, чтобы решить эту проблему.
Android:layout_span="2 позволяет кнопке входа в систему занимать два столбца, чтобы обеспечить разумную структуру таблицы.
Что, если мы хотим, чтобы он автоматически адаптировался к ширине экрана?
В этом случае для решения этой проблемы можно использовать атрибут android:stretchColumns. Это позволяет растянуть столбец в TableLayout для автоматической адаптации к ширине экрана.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> ...... </TableLayout>
Укажите значение android:stretch column в 1, это означает, что если таблица не полностью занимает ширину экрана,
Растяните второй столбик. Да! Если для этого параметра установлено значение 1, растягивается второй столбец. Если для этого параметра установлено значение 0, растягивается первый столбец.
Ладно, это все для сегодняшних заметок. В Android есть абсолютная раскладка, которая не рекомендуется официальным сайтом. Таким образом, мы получаем хорошее оправдание нашей лени. LOL
