Основы Android: Макеты пользовательского интерфейса

Весь контент вдохновлен , Курс udacity от Google Основы Android: Пользовательский интерфейс . Его первая часть из пяти частей Android Basics Nanodegree Program серии, этот курс предназначен для основ Android и Программирование на Java как и сделать первый шаг на своем пути к тому, чтобы стать разработчиком Android, вы можете узнать больше об этом здесь . Поэтому я хотел бы написать серию блогов, в которых я расскажу обо всем, что я узнал, и объясню это простым способом.

Если вы подумываете о том, чтобы начать разработку Android, вы можете проверить этот блог,

Чему нужно научиться, чтобы начать разработку приложений для Android?

РОХИТ КУМАР ・ 12 июля ・ 6 мин читать

В этой статье,

Мы расскажем об основных знаниях о том, как размещать макеты на странице для создания изображение , текст , кнопка на экране телефона.

Итак, без особого опоздания, давайте перейдем к теме..

• Мы используем XML ((Расширяемый язык разметки) для создания макета или определения UI в приложении для Android , например TextView как разместить и где что-то разместить
• Этот ресурс всегда поддерживается отдельно в различных подкаталогах в разделе res/ каталог проекта.

Каждый отдельный вид составляет то, что мы называем макетом приложения того, что пользователь видит на экране.

Базовым строительным блоком для пользовательского интерфейса является объект View , который создается из класса View и занимает прямоугольную область на экране и отвечает за рисование и обработку событий. View – это базовый класс для виджетов, которые используются для создания интерактивных компонентов пользовательского интерфейса.

ViewGroup является подклассом View и предоставляет невидимый контейнер, который содержит другие представления или другие группы представлений и определяет их свойства макета.

Прямоугольник на экране, который отображается в части информации или некотором содержимом Это может быть изображение текст кнопка или что-нибудь в приложении может отображать

⭕ Некоторый Вид атрибуты

• андроид: идентификатор

Объекту представления может быть присвоен уникальный идентификатор, который будет однозначно идентифицировать представление. Синтаксис идентификатора внутри XML-тега таков: Для присвоения имени идентификатора представления

android:id="@+id/text_id"

Для использования его идентификационного имени в качестве ссылки

android:id="@id/text_id"

• layout_width (ширина разметки) & layout_height - высота

Это Параметры компоновки ViewGroup Its задает базовую ширину и высоту представления соответственно. Это обязательный атрибут для любого представления внутри содержащего менеджера компоновки.

На самом деле это атрибуты ViewGroup, которые используются представлением для указания их родительскому представлению, как они хотят быть установлены

Значением атрибута может быть измерение (например, “12dp”), которое является жестко закодированным значением или одной из специальных констант..

     android:layout_width="match_parent"
     android:layout_height="wrap_content"

Пиксель, не зависящий от плотности (dp)

Сначала давайте узнаем о том, что такое пиксель ❓

Одна маленькая точка или освещенная область на экране называется 1 пиксель Экраны состоят из строк и столбцов по 1000′ этих пикселей. | /| Теперь Устройство может варьироваться по плотности экрана , то есть количеству пикселей на дюйм на экране, следовательно, устройства с низким, средним, высоким и сверхвысоким разрешением различаются. Если мы используем пиксель

Поэтому лучше использовать пиксель, не зависящий от плотности, который также является единицей измерения и не зависит от пикселя, для достижения одинакового физического размера просмотров при разной плотности экрана.

Жесткое кодирование ❓

• Он устанавливается, если инструкции, приведенные в приложении, мы используем для присвоения фиксированного значения атрибутам View .
• Его недостатки в том, что он исправлен, мы должны продолжать обновлять в соответствии с содержанием.
• Следовательно, мы должны использовать какую-то специальную константу типа match_parent совпадение родителей// wrap_content который является гибким и настраивается соответствующим образом .

⭕ Элементы управления пользовательским интерфейсом Android

Android предоставляет ряд элементов управления пользовательским интерфейсом, которые позволяют создавать графический пользовательский интерфейс для вашего приложения.

🔘 Теперь мы узнаем о некоторых важных представлениях и их атрибутах

🔘 Теперь мы узнаем о некоторых важных представлениях и их атрибутах Атрибуты

• android:текст Текст для отображения.

• android:Текстовые заголовки Представьте текст ЗАГЛАВНЫМИ БУКВАМИ. Возможное значение либо “true”, либо “false”.

• android:размер текста

Размер текста. Рекомендуемый тип размера для текста – “sp” для масштабированных пикселей (пример: 15 sp).

Мы используем единицу измерения значений атрибутов как sp здесь, потому что она изменяется в зависимости от предпочтений пользователя в отношении размера шрифта, который настраивает приложение для устройств Android

• android:Текстовый стиль

Стиль (полужирный, курсив, полужирный шрифт) для текста. Вы можете использовать одно или несколько из следующих значений, разделенных символом “|”.

обычный – 0 жирный шрифт – 1 курсив – 2

• android:пароль Отображаются ли символы поля в виде точек пароля вместо самих себя. Возможное значение либо “true”, либо “false”.

• android:цвет текста Для настройки цвета цвета текста .

  Шестнадцатеричный Цветовой Код

Android имеет определенный набор цветов, но не все, следовательно, из material design мы можем использовать цветовой код, называемый шестнадцатеричным цветовым кодом, которому присваиваются определенные шестнадцатеричные цифры, начинающиеся со знака “#” . Например:- #FF0000-> Красный #000000-> Черный #FFFFFF-> Белый и т.д

• Аналогично, многие другие атрибуты вы можете проверить на документация

документация Атрибуты

• android:src Задает объект рисования в качестве содержимого этого ImageView. Как вставить и файл изображения ❓

  • Прежде всего загрузите изображение, сохраните его где-нибудь в локальном
  • Теперь в каталогах |/app/res/drawable , мы помещаем здесь все изображения, используемые в приложении Для размещения здесь мы должны щелкнуть правой кнопкой мыши на папке с возможностью рисования, нажать на
  • показать в проводнике Теперь просто перетащите файл изображения сюда, в папку для рисования
  • Внутри ImageView используйте эти атрибуты
  • android:src для ссылки на наше изображение в папке drawable @
  • используется для ссылки на ресурс в приложении для Android, здесь drawable - это тип ресурса, а затем мы записываем имя файла конкретного изображения

android:src="@ drawable/image_name

Существует множество различных других ресурсов, таких как статический контент, который использует ваш код, таких как растровые изображения, цвета, определения макета, строки пользовательского интерфейса, инструкции по анимации и многое другое. Эти ресурсы всегда поддерживаются отдельно в различных подкаталогах под res/ каталог проекта.

 MyProject/
   app/
      manifest/
         AndroidManifest.xml
   java/
      MyActivity.java  
      res/
         drawable/  
            image_name.png  
         layout/  
            activity_main.xml
            info.xml
         values/  
            strings.xml 

• android:scaleType Управляет изменением размера или перемещением изображения в соответствии с размером этого изображения. У него есть некоторые постоянные значения атрибутов, давайте проверим некоторые из его ,

  • center Центрируйте изображение в представлении, но не выполняйте масштабирование.
  • Центркроп Он масштабирует изображение так, чтобы оно соответствовало границам вида, а также поддерживает соотношение сторон изображения, чтобы оно не искажалось, а затем обрезает края и центрирует изображение.
• Аналогично, многие другие атрибуты вы можете проверить в Documentation

 
3.Атрибуты кнопок
 
Кнопка - это компонент, который пользователь может нажать или щелкнуть для выполнения действия. Он обладает теми же свойствами, что и TextView, с несколькими специфичными для кнопок свойствами. Основное использование представления кнопок заключается в том, что всякий раз, когда мы нажимаем на кнопку, мы можем установить метод, который будет обрабатывать этот конкретный запрос кнопки и выполнять необходимые действия.
 
Ниже приведен XML, как определить вид кнопки в вашем приложении для Android:
 

 
public class MyActivity extends Activity {
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         setContentView(R.layout.content_layout_id);

         final Button button = findViewById(R.id.button_id);
         button.setOnClickListener(new View.OnClickListener() {
             public void onClick(View v) {
                 // Code Perform action on click
             }
         });
     }
 }

 
Приведенный выше код находится в activity class its создает экземпляр View.OnClickListener и подключает прослушиватель к кнопке с помощью setOnClickListener .
 
Поэтому всякий раз, когда мы нажимаем кнопку с идентификатором  button_id , вызывается вышеупомянутый метод, который выполняет код, написанный в Onclick(View) способ
 
С помощью андроид: Щелкнуть по кнопке атрибуты
 
Мы также можем назначить метод непосредственно в XML-макете при определении кнопки с помощью атрибута android:onClick
 

 
Когда пользователь нажмет на кнопку , определенную в приведенном выше xml-файле макета, система Android вызовет метод study(View) , определенный в MainActivity.java файл. Чтобы это сработало, метод должен быть общедоступным и принимать тип представления в качестве единственного параметра.
 
public void study(View view) {

    //Perform action on click   
}
 
Аналогично, многие другие атрибуты вы можете проверить на  документация
 
Это корневой вид , но такой большой , поскольку он содержит внутри себя другой вид.
 
Он называется родительским представлением, а представление внутри него называется дочерним представлением группы представлений, может быть TextView , Кнопка , Просмотр изображений и т.д.
 
ViewGroup также имеет атрибуты, такие как layout_height, layout_width, цвет фона и т.д.
 
Мы называем это контейнерами для других представлений.
 
Типы групп просмотра
 
Существует ряд макетов, предоставляемых Android, которые вы будете использовать почти во всех приложениях для Android, чтобы обеспечить различный вид, внешний вид и ощущения. Некоторые из них являются ,
 
Линейная компоновка LinearLayout - это группа представлений, которая выравнивает все дочерние элементы в одном направлении, по вертикали или горизонтали.
 
Относительная компоновка RelativeLayout - это группа представлений, которая отображает дочерние представления относительно родительского или другого дочернего представления.
 
Расположение таблиц Макет таблицы - это представление, которое группирует представления по строкам и столбцам.
 
Макет рамки FrameLayout - это заполнитель на экране, который вы можете использовать для отображения одного представления.
 
Компоновка ограничений Компоновка ограничений позволяет нам создавать большие и сложные макеты с плоской иерархией представлений, а также позволяет очень гибко размещать и изменять размер виджетов.
 
Вот и все на сегодня!
 
Если вам понравился мой контент, пожалуйста, поделитесь Также, если у вас есть какие-либо вопросы, не стесняйтесь комментировать ниже .
 
Если была какая-либо ошибка, пожалуйста, дайте мне знать, я немедленно ее исправлю.
 
Спасибо! 😊
 
Вы можете следовать за мной по Linkedin Твиттер

Оригинал: “https://dev.to/rohitk570/android-basics-ui-layouts-g9e”