Шаг 1. Введение в пользовательский интерфейс

[ZuykovAV MEPhI]

Вам могут встречаться следующие понятия:
Вид (view), виджет (widget), элемент управления (control). Это элементы пользовательского интерфейса. Термины являются синонимами.

Контейнер (container). Элемент управления, содержащий в себе элементы пользовательского интерфейса и другие контейнеры (см. пример в листингах 2 и 3, а также рис. 1, где схематически показана суть видов и контейнеров).

Шаблон (layout) – XML-файл, используемый для описания пользовательского интерфейса. XML-файлы лежат в папке YOUR_PROJECT_DIRECTORY/layout/

Примеры виджетов

• Button;
• TextView;
• EditText;
• ImageView;
• WebView.

Примеры контейнеров

• LinearLayout;
• RelativeLayout;
• TableLayout;
• FrameLayout;
• AbsoluteLayout.

В Android существует два класса, описывающих элементы пользовательского интерфейса:

• View (android.view.View);
• ViewGroup (android.view.ViewGroup).

View является базовым классом для элементов управления (видов, виджетов), таких как Button, TextView, EditText и других. ViewGroup является базовым классом для контейнеров (LinearLayout, RelativeLayout, TableLayout, FrameLayout, AbsoluteLayout).



Рис. 1. Содержимое контейнера. Корневой ViewGroup (контейнер) содержит в себе два вида (View) и один вложенный контейнер. Вложенный контейнер содержит в себе три вида (view).

Пользовательские интерфейсы в Android определяются в XML-файлах. Можно также добавлять элементы интерфейса в коде.

Листинг 1.

Код: выделить все

LinearLayout ll = (LinearLayout) findViewById(R.id.linear_layout_id);
TextView tv = new TextView(this);
tv.setText("I have just been added");
ll.addView(tv);

Добавление в коде применяется только в тех случаях, когда определить элемент пользовательского интерфейса в XML-файле не представляется возможным. Ничего страшного, если вы не поняли какие-то строки из листинга 1, далее будет рассмотрен пример с программным добавлением вида, где будет приведен полный код с объяснениями.

Листинг 2.

Код: выделить все

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"
    />

</LinearLayout>

Здесь мы можем видеть контейнер LinearLayout, который содержит в себе единственный виджет TextView.

Листинг 3.

Код: выделить все

<?xml version="1.0" encoding="utf-8"?>
<!-- Это начало корневого контейнера -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

   <!-- Первый вложенный вид TextView -->
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
   
    <!-- Вложенный контейнер LinearLayout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
       
             <!-- Во вложенном контейнере содержится первая кнопка -->
        <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="@string/add_view"
          />
       
            <!-- Во вложенном контейнере содержится вторая кнопка -->
          <Button
              android:id="@+id/btn"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="0.5"
              android:text="@string/btn_text"
          />
       
    </LinearLayout>
    <!-- Закончился вложенный контейнер -->
</LinearLayout>
<!-- Закончился корневой контейнер -->

Во втором листинге создан корневой контейнер, который содержит в себе вложенный контейнер LinearLayout и вид TextView.

Рассмотрим свойства, характерные и для контейнеров, и для видов – для LinearLayout и TextView соответственно в нашем случае.
android:layout_width — ширина данного контейнера или виджета. Свойство является обязательным.
android:layout_height — высота данного контейнера. Свойство также является обязательным. Принимает те же значения, что и android:layout_width.
android:fill_parent означает то, что данный контейнер или виджет занимает всю ширину своего родителя.
android:match_parent — то же самое, что и fill_parent для API 7 и более ранних. Если вы пишете программу для API 8 и более поздних, используйте match_parent.
android:wrap_content означает, что данный контейнер или виджет занимает ровно столько места, сколько требуется его содержимому плюс отступы (свойство android:paddingLeft, android:paddingTop, android:paddingRight, android:paddingBottom]).

Теперь давайте рассмотрим свойства, характерные только для контейнеров.
android:orientation — свойство, которое определяет, как будут располагаться элементы в контейнере. Свойство может принимать одно из двух значений: vertical или horizontal.
vertical — элементы идут друг за другом сверху вниз.
horizontal — элементы идут друг за другом слева направо. Будьте внимательны! Это значение является значением по умолчанию. Если вы хотите, чтобы ваши элементы шли друг за другом сверху вниз, обязательно ставьте значение свойства android:orientation=”vertical”.

android:text=”@string/hello_world” — собственно, сам текст виджета TextView, хранящийся в файле ресурсов.

Чаще всего вы будете сталкиваться с LinearLayout. Этот контейнер содержит в себе элементы, идущие друг за другом сверху вниз или слева направо.

Теперь создайте проект и откройте XML-файл main.xml, создаваемый по умолчанию и находящийся в папке layout. В файл main.xml, скопируйте код из листинга 2.