Как создать макет с использованием XML
Таким образом, отсутствие инструментов дизайнера GUI не оставило вам выбора, кроме как погрузиться в кодирование вашего макета вручную.Хорошая новость заключается в том, что как только вы освоитесь, вы сможете заняться любым макетом, который пожелаете.Давайте посмотрим на строительные блоки
ViewGroup
Сначала вам нужно выбрать ViewGroup, чтобы определить структуру макета, илираздел макета.Помните, что они могут быть вложенными, поэтому спроектируйте сверху вниз и попытайтесь классифицировать разделы макета на основе формы, которую вы хотите, чтобы они имели.Есть два основных варианта:
Как видно из названия, полезно для размещения элементов в линии.Выберите orientation, горизонтальный или вертикальный, и просто добавьте элементы.Они будут добавлены в порядке сверху вниз или слева направо.
Полезно для размещения элемента в определенном месте наэкран.Поэтому, если вы хотите поместить кнопку в верхнем левом углу или полосу сверху, это ваша ViewGroup.
Параметры макета
Используется для определения ширины, высоты, веса и других аспектов вида.
Существует два варианта ширины и высоты: fill_parent (заменено на match_parent на уровне API 8) и wrap_content.Представление может либо заполнить ширину родительского представления, либо занять только необходимое ему пространство.
Существует еще один полезный параметр макета, уникальный для LinearLayout, который называется weight.Это полезно для того, чтобы позволить представлениям совместно использовать пространство в соотношениях или позволить одному представлению занять место, оставшееся после того, как другие представления в LinearLayout получат свою долю.
Пример
Давайтепопробуйте разработать макет для Google Maps.Притворись, что это макет, который у меня в голове, и я хочу его реализовать.Вот снимок экрана
Я постараюсь разбить это на части:
Глядя на это, вверху есть панель, а под ней - карта.Я считаю, что это может быть реализовано с помощью LinearLayout или RelativeLayout.Тем не менее, кнопки в правом нижнем и левом углу кричат RelativeLayout, так что я пойду с этим.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TODO:BAR
android:id="@+id/bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</TODO:BAR>
<MapView
android:id="@+id/map"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/bar" />
<ImageButton
android:id="@+id/latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical" >
<ImageButton
android:id="@+id/zoom_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="@+id/zoom_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Теперь некоторые пояснения.В RelativeLayout вы используете alignParent[direction], чтобы указать, куда направляется представление.Я также хотел, чтобы по бокам было немного места, поэтому я использовал margin[direction], чтобы указать dp или независимые от плотности пиксели.Как вы можете видеть, wrap_content используется в большинстве случаев, поэтому кнопки получают размер изображения, используемого на них.
Теперь все определено, кроме полосы сверху.Я собираюсь разбить его на четыре различных вида: вид выпадающего меню, вид поиска, кнопка слоев и кнопка «Мое местоположение».Я хотел бы, чтобы это работало, поместив меню в крайнее левое положение, а слои и кнопки моего местоположения - справа, а окно поиска заняло бы оставшееся пространство.Это звучит как работа для LinearLayout и веса!Вот как я определяю панель, которая может быть вставлена в заполнитель выше, чтобы получить окончательный макет
<LinearLayout
android:id="@+id/bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<ImageButton
android:id="@+id/dropdown_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="@+id/layers"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="@+id/my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Установка ширины панели поиска на 0dp означает, что пусть другие представления принимают то, что им нужно, затем вес говорит, возьмите оставшееся пространство.
И вот оно у вас.Воссоздание базового макета для приложения Google Maps (за исключением изображений кнопок и других тонкостей, например пользовательских представлений), показывающих, как можно безболезненно использовать различные макеты и XML.Надеюсь, это было полезно.