Делаем простое Android-приложение

Делаем простое Android-приложение

В этом уроке для новичков мы пошагово сделаем простое приложение для ОС Android в среде Android Studio 2.3.3. Первое, что нужно сделать — установить саму Android Studio. думаю, сделать это самостоятельно не составит труда. Если возникнут какие-то проблемы, их решения можно найти в гугле или яндексе, кому-что нравится. Начинаем.

В Android Studio создаем нвоый проект: File — New — New Project. В появившемся окошке даем название будущему приложению —  FirstApp:

Создаем новый проект в Android Studio

Имя домена можно написать любое. Нажимаем Next. В новом окне Target Android Devices все оставляем по умолчанию, т.е. галочкой должен быть выбран только пункт Phone and Tablet. Жмем Next. В появившемся окне Add an Activity to Mobile выбираем стартовый интерфейс приложения — Empty Activity. Нажимаем Next.

В следующем окне оставляем все как есть: MainActivity —  Activity Main и Layout Name — activity_main. Нажимаем Finish.

Через минуту откроется окно инструментов Android Studio:

Окно инструментов Android Studio

Android Studio сразу предлагает 2 вкладки для начала редактирования: activity_main.xml (здесь будет содержаться код разметки — фронтэнд приложения) и MainActivity.java (логика приложения, контроллер).

Откроем вкладку activity_main.xml и нажмем вкладку Preview в правой части экрана — там вертикально расположены вкладки: Gradle, Preview и Android Model. Елси кнопок нет, щелкните в левом нижнем угпу, на квадратик перед словом Gradle. В результате мы увидим, как уже выглядит наше приложение:

Preview приложения

  Делаем макет интерфейса

Файл activity_main.xml по умолчанию содержит разметку Android-приложения. Ваш код должен выглядеть примерно так:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    tools:context="ru.drivermql.firstapp.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

Примерно — потому что в в Android все часто меняется, но, принцип остается тот же.

Сейчас в нашем приложении 2 виджета — основной, т.е. весь экран устройства — android.support.constraint.ConstraintLayout и вложенный в него виджет TextView, который сейчас и отображает нам слова Hello World.

Виджеты — это струкрутные элементы (кирпичики) из которых состоит пользовательский интерфейс Android-приложения. Виджеты могут содержать другие (вложенные) виджеты.

Виды виджетов:

  • Кнопки;
  • Флажки;
  • Текстовые поля;
  • Графика.

Изменим код виджета на тот, который нам нужен:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="24dp"
        android:text="@string/question_text"
        />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/true_button"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/false_button"/>
    </LinearLayout>
</LinearLayout>

Виджеты

Итого мы имеем 5 виджетов:

  1. Основной виджет LinearLayout;
  2. Внутри него TextView;
  3. Внутри основного еще один LinearLayout (вложенный);
  4. Внутри вложенного LinearLayout первая кнопка Button
  5. и вторая Button.

На ошибку Render errors (1 issues) пока не обращаем внимание, просто мы еще не все сделали.

Виджет LinearLayout используется для хранения других виджетов. В LinearLayout определяется, как вы хотите видеть вложенные виджеты — вертикально или горизонтально. Вложенные виджеты называются потомками (child). Две кнопки — два виджета типа Button являются потомками своего виджета LinearLayout, в котором определено, что они должны быть выстроены горизонтально — android:orientation="horizontal".

Атрибуты виджетов

layout_width и layout_height — используются практически везде. Определяют ширину и высоту виджета.

  • match_parent — размеры определяются размерами родителя;
  • wrap_content — размеры определяются размерами содержимого.

Если вам где-то попадется значение fill_parent, то вы должны знать, что это старое значение атрибута match_parent.

android:padding="24dp" добавляет содержимому виджета отступ вокруг себя, чтобы текст не прикасался к границам виджета. Dp — это пиксели, не зависящие от плотности (если хотите, погуглите).

Атрибут android:orientation определяет, как будут выстроены потомки виджета — горизонтально ("horizontal") или вертикально ("vertical").

В нашем приложении корневой виджет LinearLayout  размещает своих потомков вертикально, а его потомок, тоже LinearLayout располагает своих "кнопочных" потомков  в горизонтальном положении.

В горизонтальном положении первый виджет будет расположен первым слева. Если используется язык с письменностью справа-на лево (иврит, арабский), то первый виджет расположится первым справа.

Атрибут android:text, который содержится в виджете Button, сообщает виджету, какой текст он должен отображать. Этот атрибут должен содежрать не сам текст, а строковый литерал — ссылку на строковый ресурс.

Строковые ресурсы содержаться в отдельном xml-файле, который и называется строковым файлом. В нашем проекте еще не существует строковых ресурсов и мы их сейчас сделаем.

Создаем строковые ресурсы

Каждый новый проект  в Android Studio включаем в себя файл strings.xml, расположенный по адресу: res/values/strings.xml. Откройте этот файл и добавьте в него три строки:

<string name="question_text">Moscow is the capital of Russia</string>
<string name="yes_button">Yes</string>
<string name="no_button">No</string>

Этот файл теперь должен выглядеть так:

Строковые ресурсы

Если ваш файл содержит еще какие-то записи — не удаляйте их, т.к. могут последовать ошибки в других файлах.

Теперь в файле activity_main.xml измените строки в Button 

android:text="@string/true_button"

на android:text="@string/yes_button" и android:text="@string/no_button" для каждой кнопки. Теперь, ошибки связанные с отсутствием строковых ресурсов должны исчезнуть.

По умолчанию, строковые русурсы содержатся в файле strings.xml. Но, имя можно изменять на любое. В одном проекте может содержаться несколько файлов со строковыми ресурсами. Только нужно, чтобы эти файлы лежали в каталоге res/values, имели корневой элемент  resources и дочерние элементы string. Если все так и есть, приложение найдет ваши строки и будет их использовать.

Теперь макет приложения должен выглядеть так:

Предварительный макет приложения

 


Поделись с друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *