CC BY
17
УДК 004
Воробьев И.Р. студент 3 курса бакалавриата
ПГУТИ Россия, г. Самара Морозов Д. Д. студент 3 курса бакалавриата
ПГУТИ Россия, г. Самара Секлетова Н. Н., к. п. н.
доцент
кафедра «Информационные системы и технологии»
ПГУТИ Россия, г. Самара
ПОГРУЖЕНИЕ В МОБИЛЬНУЮ РАЗРАБОТКУ
Аннотация: В статье подробно рассмотрен процесс создания приложения на языке программирования java. Предлагается рассматривать данную публикацию в качестве методического пособия для начинающих разработчиков мобильных приложений. Основной проблемой на ранних этапах освоения данной технологии является недостаточность тезисного пошагового материала, позволяющего приобрести практические навыки разработки. Решению данной проблемы и посвящена данная работа.
Ключевые слова: разработка, элемент, список, файл, активити.
Vorobyov I.R. 3rd year undergraduate student
PSUTI Russia, Samara Morozov D.D. 3rd year undergraduate student
PSUTI Russia, Samara Sekletova N.N., Ph.D. associate professor Department of Information Systems and Technologies
PSUTI Russia, Samara
DIVE INTO MOBILE DEVELOPMENT
Annotation: The article describes in detail the process of creating an application in the java programming language. It is proposed to consider this publication as a methodological guide for beginner mobile application developers. The main problem in the early stages of mastering this technology is the lack of thesis step-by-step material that allows you to acquire practical development skills. This work is devoted to the solution of this problem.
Keywords: development, element, list, file, activity.
Введение
Разработка мобильных приложений - это процесс, при котором приложения разрабатываются для небольших портативных устройств, таких, как КПК, смартфоны или сотовые телефоны.
Теперь рассмотрим основную информацию, мобильные приложения пишутся на таких языках как: Java, Kotlin, Swift, C#. Мы будем писать приложение под андроид, поэтому язык Swift мы не рассматриваем, так как он нужен для разработки под IOS. В этой статье мы будем разрабатывать свое первое приложение на Java.
Первый шаг
-Необходимо скачать Android Studio (первая ссылка в интернете).
-После запуска Android Studio появляется окно с выбором активити (пока не заостряем внимание), выбираем пустое активити, как показано на рисунке 1. _
Phone arid Tablet Wear OS Android TV Automotive
Рис. 1 (Пустое активити)
-Далее появится окно, где нужно назвать наш проект (1), указать, где будет находиться наш файл (2), выбрать язык, на котором будем писать (3), остальное оставить по дефолту, затем нажать на финиш.
Empty Activity
Creates a new empty activity
Name Android_Razrabotka
Package name com.example.android_razrabotka
Save location C:\Java
Language Java ▼
Minimum SDK API 21: Android 5.0 (Lollipop)
O Your app will run on approximately 99,3% of devices.
Help me choose
J Use legacy android.support libraries ©
Using legacy android.support libraries will prevent you from using
the latest Play Services and Jetpack libraries
A "Java" already exists at the specified project location and it is not empty.
Previous Ne Cancel Finish
Рис. 2 (Создание проекта)
После полной загрузки проекта должно получиться так
М Ardr. T £ т О — v »Sapp
> manifests
> java
> ¡ft java (generated)
V res
> U drawable
> U layout
> tB rnipmap
> values
> U xml
ll res (generated)
> Я? Gradle Scripts
Рис. 3 (Начальное состояние)
Краткий рассказ о структуре. Полностью всё андроид приложение состоит из малых частей, которые собираются в один большой проект и являются самим приложением.
Выделим основные папки.
Manifests - внутри файлы конфигурации (малая инструкция), например там прописывается какое активити будет запускаться первым.
Java - основная папка, содержащая все активити (бек активити).
Res - в этой папке находятся все ресурсы.
Layout - папка в которой хранятся xml разметка активити (фронт активити).
Mipmap - в папке хранятся данные об иконке приложения
Values - папка значений, например: цвет
Drawable - содержит файлы png, jpg, jpeg.
Основы мобильной разработки
1) Активити Что такое активити.
Активити - это фундаментальный элемент мобильного приложения, который представляет собой окно приложения._
v »Sapp
> manifests
V java
V ЕЯ corn.exa ,iple.project1
c Main Activity
> fr corn.example.projertl ¡air
> El com.example.projectl te
Рис. 4 (Активити)
Разберем на примере: мобильного приложения (ВКонтакте).
После того как приложение открылось, вы можете наблюдать первое активити, после перехода в сообщения вы видите уже другое активити, после перехода в список друзей вы видите ещё одно активити и так далее. Что представляет из себя активити надеемся вы поняли. В суть дела мы ещё вникнем на практике.
Как создать активити.
Для того чтобы создать активити нужно раскрыть папку с именем Java, далее раскрыть первую папку с именем com.example.projectl, далее нажать на неё правой кнопкой мыши и выполнить следующие действия показанные на рисунках.
Если все сделано правильно, то вуаля - вы создали активити.
По дефолту там уже создано одно активити, но для практики нам стоило попробовать.
> EMcom.exar New Q С++ Class
> Г1 com exar
> U com,exar Add C+ + to Module Jbj C/C+ + Source File ^ C/C++ Header File Э Java Class Kotlin Class/File щ Android Resource File
> 1® java (genera v res > ttdrawable > El layout > tt mipmap X Cut 1 Copy Copy Path/Reference... □ Paste Ctrl+X Ctrl+С Ctrl+V M Gallery... □ Android TV Blank Activity n Basic Activity □ Basic Activity (Material) 0 Bottom Navigation Activity
> U values 5 El xml res (generat Gradle Scripts Find Usages Alt+F7 M Android Resource Directory
Find in Files... Ctrl+Shift+F ^ File E? Scratch File Ctrl+Alt+Shift+lnsert El Package Image Asset 0 Empty Activity
Replace in Files... Analyze Refactor Ctrl+Shift+R > > 0 Fragment + ViewModel n Fullscreen Activity D Login Activity n Navigation Drawer Activity □ Primary/Detail Flow
Bookmarks > M Vector Asset
Reformat Code Ctrl+Alt+L ^ Kotlin Script n Responsive Activity
Optimize Imports Ctrl+Alt+O Kotlin Worksheet n Scrolling Activity
Delete... Delete Д. CMakeLists.txt n Settings Activity
Open In Local History > M Activity > n Tabbed Activity
> Л Fragment > M Folder >
G Reload from Disk M Service >
Compare With... Ctrl+D M UiComponent >
Mark Directory as > ^ Automotive > M XML >
Convert Java File to Kotlin File Ctrl+Alt+Shift+K M Wear >
Л AIDL >
Widget >
л Google >
M Compose > <Л other >
' Version Control s TODO 9 Problems E9 Terminal ь Logcat Ш A
'ate a new Empty Activity |fl Resource Bundle
Ф EditorConfig File
Рис. 5 (Создание активити)
2) Создание первого объекта xml разметки Создание кнопки
Для того чтобы создать кнопку есть 2 варианта Переходим в документ Res/layout/activity_main.xml, следущее.
и видим
v El com.example.projectl MainActivity О MeinAclivity2
> Oicomexampleprojecll
> Di tom.enample.projcct I • Java generated
i» activity_mainj<ml Д activity.maini лт!
<android*.constraintlayout.widget.ConstraintLeyout xalns:
; :layout_width i:layout.height
</androidx.const raintlayout.widget.Constraint Layout>
Ab TextView
■ Button
И ImageView := RecyderView EI FragmentCon-
■ StrotlVinv ••Switch
activity_maia*ml -
& Odp I S-
Ф D Pixel " ш 3
I» version Control Я »ООО • Problem Giadle sync finished In 1 m 34 s 835 ms (44 m
andfoidx.constraintlayout.widget.Const'amtlayout
■ Terminal Ж Logcan ft App inspection ^ BuM П\ Profiler
Рис. 6 (Создание кнопки)
Q tvent log ^ layou) inspector 7.35 If 4 spaces % В
Добавляем новый тег <Button> (Код для копирования) <Button android:id="@+id/button" android:layout_width=" 150dp"
android:layout_height=" 100dp android:text="Button"
app:layout_constramtBottom_toBottomOf="parent" app:layout_constramtEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.498" app:layout_constramtStart_toStartOf="parent" app:layout_constramtTop_toTopOf="parent" app:layout_constramtVertical_bias="0.079" />
v El com.example.ptojedl ft MainActimty 6 MajnActimtyi
> El com.ewmpie-projecti
> t> com.e w m p l e.proj eel l ' ji« (generated)
mstraintlayout.widget.ConstraintLayout xitlns: andro.
android :\ayoiJt_width-"nai android :layoLt_tielght-M
android:layout.width =" lSBdp" android:layout_height laGdp"
app:layout_constraintBo11ora_10B0ttomOf -"piiren app:layout_corstraírtel1d_toEl«lOf="p0rellt,, app :layouT_constralnTHari2ontal_bias Э.¿48" app:layout_coristraintStart_toStartOf "parent" app:XayoLt_corstraintTop_toTopDf-"parent" app:layout_constraintVertical_bias-' с 979" /> </androidx.eonstramtlayouT.widget .consti-amuaycijti
в fei | РФ Л У I.
P version с«чго4 Я TOCO в problems Siadle sync finish in 1 m 34 s 8» ms (49 mmu
istraintlayoutwidgetConstraintLayout С Logcet fl App inspection \ Buld
И ImageView != RecyderView H FragmentCon. ■) ScrollView
Q Event Log Layout ms
Рис. 7 (Получение кнопки)
Id - уникальный идентификатор Layout_width - ширина Layout_height - высота Text - текст кнопки
Layout_constraint + Bottom, Top,Start,End - это привязка к границам экрана (она нужна чтобы объект был зафиксирован)
layout_constraint+Horizontal, Vertical_bias - атрибут отвечающий за расположение по горизонтали или вертикали. - Создание текста
Для того чтобы создать текст нужно перейти в код файла activity_main.xml, также, как и в прошлом разделе. (Код для вставки) <TextView android:id="@+id/textView" android:layout_width=" 100dp" android:layout_height="50dp"
android:text-'Первые шаги"
app:layout_constramtBottom_toBottomOf="parent" app:layout_constramtEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.022" />
S Code a Spilt E
v tl com example.piojectl О MainActivity2
> О drawable
A activityjnamjtml ¿¡h activity.main2.xnil
android:layout_width-android:layout.height; anoroldttext
Ab Text View
■ Button
В ImageView :E RecyderView И FragmemCon.
■ ScrollView •• Switch
©. fc Odp S /
android:layout_*ldth- lQOdp" androld:layout_height iOdp" androia:text
app:layout.constraintBotton.t080ttomOf="p. app:layout_constraintEnd_toEndOf parent app:layout.constraintHorizontal.bias 1 V app:layout_constraintStart_toStartOf- nari app:layout_constreintTop_toTopOf parent app:layout_constralntVertical_bias "й. 023'
</androidx.constraIntlayout.widget.ConstraintLayout»
Рис. 8 (Создание текста) 3)Переход между активити
Далее мы сделаем переход на другое активити с помощью нажатия кнопки.
Для этого мы уже создали новое активити (смотреть выше). Заходим в код Java^om.example.project1/MamActivity
Должно быть так_
import android.content.Intent; import android.os.Bundle; import android.view.View;
public class MainAotivity extends AppCompatAotivity { ^Override
protected void onCreate(Bundle savedlnstanoeState) { super.onCreate(saved InstanoeState); setC0ntentView(R.layout. activity_main');
}
Рис. 9 (Создание перехода на новое активити)
Вставляем код (Код для копирования)
public void goToAnActivity2(View view) {
Intent intent = new Intent(this, MainActivity2.class);
startActivity(intent); }
На экране мы видим следующее:
import android.content.Intent; import android.os.Bundle; import android.view.View;
public class HainActivity extends AppCompatActivity { (pOverride
protected void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.actlvity_main);
}
2
public void goToAnActivity2(View view) {
Intent intent = new Intent ( p a ckag eContent: this, HainActivity2.class); startActivity(intent);
}
Рис. 10 (Итоговый вариант)
a) Создаем класс onCreate в котором находится создание и отображение окна:
super.onCreate (savedInstanceState); - создает активность, настраивает статической активности интерфейса, основополагающая конструкция;
savedInstanceState - пакет Android содержащий данные для восстановления состояния активити;
setContentView (R.layout.activity_main); - это метод для отображения контента, в скобках указан путь на контент.
b) Создаем ещё один класс goToActivity2 в котором создаем сам переход:
Intent intent = new Intent (this,MainActivity2.class); - это некое намерение (конструкцию нужно запомнить) которое необходимо для перехода на новую активность. В круглых скобках указываем первым контекстом из какого активити (в нашем случае this), вторым указываем куда будем переходить MainActivity2.class(новое активити);
startActivity(intent); - метод нужный для запуска активити (в круглых скобках объект на который ссылается метод).
4) Работа с изображениями
Для работы с изображениями существует папка drawable. В которой хранятся все наши картинки разных форматов.
- Чтобы добавить картинку в папку drawable можно просто перенести её в папку зажав её мышкой и перетащив в саму папку
Если нужен формат SVG, то делаем следующие действия.
После в открывшемся поле выбираем заранее заготовленную картинку SVG._
A £ile Edit View Navigate Code Refactor Build Run lools VCS Window Help Aridroid_Prodject2 Android_Razrabotka app src main res M drawable tj M And..:» T i 0 s
■ java
Ei com.example,android_pr G MainActivity MainActivity2 MainActivity3 _ O MainActivity4 ^^B^ew|
MainActivity5 Add C++ to Module Q Pdf1MainActi\ O Pdf2MainActi\ ^ Cui G Pdf3MainActi\ 1
Q Pdf4MainActi\ CoPV Path/Reference... El com.exarnple,and D Easte
> Ш com.example.and java (generated)
Find Usages Analyze
g C/C++ Source File C/C++ Header File
I Drawable Resource File I Sample Data Directory
Ctrl + Alt+Sh ift+l nsert
I Directory • Image Asset
oa activityjnain.) £ activity_main2
E ai activity_main3
^ oa activity_main4
m activity_main5 J2 pdf1_mainjcm
E oa pdf2_main.xm
m In pdf3_main.xm
¿a pdf4_main.xm
> El mipmap I > Cl values
> > El xml
= B§ res (generated)
M > & Gradle Scripts
V Version Control i= TODO |P Open Vector Asset Stu d io to crt
. Show In Resource Manager
Optimize Imports
► Run "drawable.* and 1 more'
Debug 'drawable.* and 1 more" (V Run "drawable* and 1 more' with C Modify Run Configuration...
jf- Compare Directories Mark Directory as
Convert Java File to Kotlin File
ß Kotlin Script Ik Kotlin Worksheet A CMakeLists.txt
ífl] Resource Bundle Ф EditorConfig File
Рис. 11 (Выбор картинки)
-Открытие картинки по нажатию кнопки (Кнопку создавать мы уже научились выше)
Для реализации задуманного нам необходимо два активити (их создавать умеем). После создаем кнопку с добавлением к ней атрибута (onclik) и задаем имя метода, после переходим в активити где находилась наша кнопка и создаем метод с тем названием которое мы задали в атрибуте (onclik). Пишем следующий код для перехода на новое активити.
(Код для вставки)
public void goToAnActivity2(View view) {
Intent intent = new Intent(this, MainActivity2.class);
startActivity(intent); }
gotoAnActivity2 - название метода в атрибуте onclik.
Добавляем нашу картинку в папку drawable (название нашей картинки - android).
Далее переходим в xml файл второго активити, зажимаем опцию ImageView и перетаскиваем в наше окно. Нам выдаст меню где можно выбрать картинку, выбираем свою и нажимаем ок.
Рис. 12 (Результат)
+ G | Module: Android.Prot ▼ | | Or Drawable Mip Map
Sample data (2)
I avatars
Drawable 1 version
J backgrounds/scenic
<l Drawable 1 version
Android_Prodject2.app.main (3)
android
Drawable 1 versic
■ ic_launcher_background
Drawable 1 version
^^ ic_launcher_foreground
android-pdf-viewer (4)
Рис. 13 (Картинка)
5) Работа с PDF
-Чтобы открыть файл PDF нужно подгрузить библиотеку с сайта, после перейти в папку build.gradle и вставить код
>u can use the Project Structure dialog to view and edit your project configuration Open (Ctrl+Alt+Shift-t-S) Hide
testlnstrumentationRunner "androidx.test,runner.AndroidJUnitRunner" T }
buildTypes {. release ■{ minifyEnabled false proguardFiles getDefaultProguardFileC1proguard-android-optimize.txt'), 1proguard-rules.p } ro'
T } compileOptions { sourceCompatibility JavaVersion.VERSI0N_1_8 targetCompatibility JavaVersion.VERSI0N_1_8 T } r dependencies {
implementation 1androidx.appcompat:appcompat:1.5.1' implementation 1 com.google.android.material:material:1.7.8' implementation 1androidx.constraintlayout:constraintlayout:2.1.U 1
implementation 'com.github.barteksc:android-pdf-viewer:2.8.21 testlmplementation 1junit:junit:^.13.21 androidTestImplementation 1androidx.test.ext:junit:1.1.4' androidTestImplementation 1androidx.test.espresso:espresso-core:3.5.0' >
Рис. 14 (Код)
(Код для копирования)
implementation 'com. github.barteksc: android-pdf-viewer :2.8.2'
Далее создаем Обычное активити и доводим его до такого вида XML
^?xml version^ " 1.6 " encoding = "utf-8 ?>
<Relative Layout xmtns:and roid ="http://schemas.android.com/apk/res/andnoid xmlns:app="http://schemas.andraid.com/apk/res-auto" xmln s:tools="http://schemas.android.com/tools" android : id = "@+id/one" android:layout_width="matoh_parent" android :layout_height-"match_parent" android:background="#FFFFFF" tools:context=".PdflMainActivity">
■scorn.github. ba rteksc. pdf viewer. PD FView
android:id = "p+id/pdfviewtwo" android:layout_width="match_parent" android:layout_height="mate h_pa rent" />
</RelativeLayout>
Рис. 15 (Конечный вид)
MainActivity (pdf1_main - название xml файла, pdfviewtwo - id объекта)
e com. example . android_prod;ject2;
import |androidx.appcompat.app.AppCompatActivity;
import android.05.Bundle;
import com.github.barteksc.pdfviewer.PDFView; public class PdflMainActivity extends AppCompatActivity -{ (SOverride
protected void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.pdfl_main);
PDFView pdfView = findViewByld (R.id.pdfviewtu/o) ; pdfView . f romAsset ( assetName: " LR6_metodichka ,pdf").load();
}
Рис. 16 (Visual Studio Code)
После в дереве самого приложения (App) нужно создать новую папку assets, в которой хранятся файлы приложения. Далее загружаем туда свой файл в нашем случае это LR6-metodichka.pdf.
Заключение
Материал был подготовлен для начинающих создателей мобильных приложений, для того чтобы они могли опираться на материал статьи и создавать свои первые проекты. Статья в полном объеме раскрывает основные этапы разработки мобильного приложения.
Использованные источники:
1. Федотенко М.А., Разработка мобильных приложений. Первые шаги. -2019.
2. Колисниченко Д.Н., Программирование для Android. -2020.
3. Черников В., Разработка мобильных приложений на C# для iOS и Android.-2020.
4. Хортон Д., Разработка Android-приложений с нуля. 3-е изд.-2023.
