Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Создание проекта</a></li>

2 <li><a>Верстка экрана</a></li>

3 <li><a>Соединяем верстку с кодом (Binding)</a></li>

4 <li><a>Пишем код</a></li>

5 <li><a>Создаем свою вьюшку и рисуем на ней сетку</a></li>

6 <li><a>Вычисляем, кто выиграл</a></li>

7 <li><a>Сбрасывание состояния игры</a></li>

8 <li><a>Подводим итоги</a></li>

9 </ul>В этой статье, приуроченной к онлайн-курсу<a>Android Developer. Basic</a>, мы напишем свою собственную небольшую игру "Крестики-нолики". Для работы потребуется установить Android Studio. Какая у вас ОС - не имеет значения, т.к. эта IDE работает на Windows, Ubuntu или Mac. Язык программирования будет Kotlin, т.к. сейчас он является официальным языком для программирования на Android. Во время написания статьи использовалась версия Android Studio 4.1.3

10 <h3>Создание проекта</h3>

11 Для начала необходимо создать новый проект. В нашем случае необходимо выбратьFragment + ViewModelи нажатьNext.

12 Далее в полеNameвводите название приложения, вPackage nameможете внести свое имя или ник как доменное имя, но с зада на перед. Это нужно для уникальности вашего приложения в маркете и на телефоне. Все остальное можно оставить по умолчанию как на картинке. Далее нажимаем Finish и ждем, когда проект соберется и мы сможем работать.

13 Нам нужно добавить зависимости которых нам не хватает вbuild.gradleмодуля в разделdependencies. А так же включитьviewBindingдля того, чтобы было удобна делать связь верстки с кодом (смотри изображение)

14 android { … buildFeatures { viewBinding true } } dependencies { … implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.2.0" implementation "androidx.lifecycle:lifecycle-extensions:2.2.0" implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0" implementation "androidx.gridlayout:gridlayout:1.0.0" implementation "androidx.fragment:fragment-ktx:1.3.0" }<h3>Верстка экрана</h3>

15 Теперь можно преступить к верстанию экрана. Для начала мы добавим только несколько вьюшек. Для того, чтобы не нужно было у каждой вьюшке проставлять отступы от края экрана, воспользуемся специальным виджетом `Guideline`. Он позволяет выставить границы, за которые будут "цепляться" вьюшки. Если у вас экран открылся в режиме `Design`, то я рекомендую перейти в режим `Split`. Так удобнее мне объяснять и можно будет копировать однотипные элементы. Чтобы добавитьGuidelineможно внутри элемента `ConstraintLayout` написать `<guideline` и студия подскажет нужный нам элемент, который мы сможем использовать. Или справа нажать на кнопку `Guidelines` и выбрать горизонтальный или вертикальный guideline. Давайте добавим вертикальный. У нас на макете сразу появится справа полоса. Продублируем элементGidline,скопировав его полностью и вставив 3 раза. В параметр android:id напишем @+id/ плюс название в зависимости от расположения (start, end, top, bottom). В параметре android:orientation поставим vertical/horizontal в зависимости от направления линии. И изменить параметр app:layout_constraintGuide_beginна app:layout_constraintGuide_endдля элементов с id=end/bottom.

16 Теперь добавим отображение того, чей сейчас ходХилиО. Для этого добавим 3ImageView. Но для начала, давайте создадим сами иконкиХиО, а так же ß для того, чтобы показывать чей ход.

17 Для этого справа в области project щелкните правой кнопкой мыши (ПКМ) выберите New → Vector Asset.

18 В появившемся окне щелкнуть по изображению в пунктеClip Art,найти по поискуbackстрелку назад и нажатьOK. Я выбрал, чтобы концы были скругленными, для этого во втором выпадающем списке выбратьRound. Вы можете посмотреть, как выглядят остальные и выбрать понравившийся. Размер я задал64в пунктеSize, а цвет вColor: F44336. Вы же в палитре можете выбрать тот цвет, который Вам больше всего понравился. Название в пунктеNameя указалic_arrow, чтоб проще было использовать. Для иконок, принято название начинать сic_и в snake case, т.е. с подчеркиванием. И нажимаемNext → Finish. Теперь самостоятельно сделайте крестик и нолик. Для них я выбрал иконкуcloseиpanorama fish eyeсоответственно и выбрал цвет454FCE, а названия далic_crossиic_circle.

19 После всех этих действий, в разделеres → drawableпоявятся новые файлы с нашими иконками. Я рекомендую значение цвета из параметраandroid:tintперенести в параметрandroid:fillColor, а самtintудалить. На некоторых китайских телефонах, отображение ведет себя не корректно и качество иконки ухудшается.

20 Теперь давайте вернемся к верстке и добавим 3 элементаImageView. Для этого перейдем в режимDesign(это как один из способов верстания экрана), найдемImageViewи перетащим его на макет. В появившемся экране выберем иконкуic_cross. В полеidнапишем названиеcross. Таким же способом перетащим еще 2 элемента дляic_arrowиic_circleи дадим им имя iddirectionиcircleсоответственно. Теперь выделим каждый элемент поочередно и потянув за верхний круг свяжем вьюшку с верхнимguideline.

21 Теперь сделаем из них цепочку, чтоб они были посередине и склеены друг с другом. Для этого выделяем эти 3 элемента вышкой, нажимаемПКМ → Chains → Create Horizontal Chain.

22 Затем сноваПКМ → Chains → Horizontal Chain Style → packed. Попробуйте другие стили и посмотрите, чем они отличаются друг от друга.

23 Теперь они склеились вместе и находятся посередине, как я и хотел.

24 Добавим еще один элементBarrier, который служит для того, чтобы следующий элемент расположить после других, не зависимо от того, какого размера будет каждый. Нажмем на кнопкуGuidelines → Add Horizontal Barrier.

25 И установим следующие значения:

26 <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="bottom" app:constraint_referenced_ids="circle,cross,direction" />У вас должно получиться что-то вроде этого.

27 Теперь осталось добавить последний элемент верстки этоGridLayout. Но его нужно выбрать из подключенной библиотеки и выбратьandroidx.gridlayout.widget.GridLayout. Его уже нужно добавить вручную.

28 <androidx.gridlayout.widget.GridLayout android:id="@+id/field" android:layout_width="0dp" android:layout_height="0dp" app:columnCount="3" app:layout_constraintBottom_toBottomOf="@id/bottom" app:layout_constraintDimensionRatio="1:1" app:layout_constraintEnd_toEndOf="@id/end" app:layout_constraintStart_toStartOf="@id/start" app:layout_constraintTop_toTopOf="@id/barrier" app:rowCount="3"> </androidx.gridlayout.widget.GridLayout>Аргументы app:columnCountиapp:rowCountотвечают за количество колонок и строк соответственно. Устанавливаем значение 3, т.к. поле у нас 3х3. Аргументы app:layout_constraintDimensionRatioотвечает за соотношение сторон. Для того, что бы у нас был квадрат нужно его выставить в1:1, вот из-за этого аргументаи пришлось подключать библиотеку, т.к. на версияхAndroid 5этот аргумент не работает. И для того, чтобы соотношение работало, необходимо установитьandroid:layout_widthиandroid:layout_heightв0dp. Аргументы app:layout_constraintXXX_toXXXотвечают за привязку нашей вьюшки к другим элементам. Ну и запишемid="@+id/field", а во внутрь добавимImageView. Но так как их понадобиться 9 штук и чтобы у каждой вьюшке не прописывать одни и те же аргументы, можно создать стиль. Для этого щелкаем ПКМ поvalues → New → Values Resource File.

29 В появившемся окне, в полеFile nameуказываемstylesи нажимаемOK. В созданном файле сделаем следующую запись:

30 <resources> <style name="CellStyle"> <item name="layout_rowWeight">1</item> <item name="layout_columnWeight">1</item> <item name="android:background">?android:attr/selectableItemBackground</item> <item name="android:layout_width">0dp</item> <item name="android:layout_height">0dp</item> <item name="android:adjustViewBounds">true</item> </style> </resources>Аргументыlayout_columnWeightиlayout_rowWeightслужат для установки весов вьюшек и чтобы они равными размерами распределялись по ширине и высоте соответственно. Для того, чтобы эти веса заработали, необходимоandroid:layout_widthиandroid:layout_heightустановить в0dp. А вandroid:backgroundпрописываем атрибут, который будет браться из темы и отображать нажатие на вьюшку. Теперь осталось подключить этот стиль к нашей вьюшке. Возвращаемся к нашей верстке и у созданнойImageViewменяем на следующее:

31 <ImageView style="@style/CellStyle" tools:src="@drawable/ic_cross" />style="@style/CellStyle"- позволяет применить наш стиль для разных вьюшек, аtools:src="@drawable/ic_cross"позволяет отображать картинку на макете, но когда проект будет создан и установлен на телефоне, то картинки не будет. Продублируем этот элемент, чтобы в общем счете их получилось 9. В итоге должно получиться следующее:

32 <h3>Соединяем верстку с кодом (Binding)</h3>

33 Теперь нужно перейти во фрагментMainFragmentи поправить то, что было сгенерировано студией и добавитьbinding, который связывает верстку с кодом.

34 private lateinit var binding: MainFragmentBinding private val viewModel: MainViewModel by viewModels() override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { binding = MainFragmentBinding.inflate(inflater, container, false) return binding.root }А оставшийся методonActivityCreatedполностью удалите. Все элементы, которые студия подчеркнет, нужно импортировать с помощью подсказок.

35 <h3>Пишем код</h3>

36 Теперь давайте перейдем в классMainViewModelи уберем сгенерированныеTODO. Нам необходимо хранить состояния ячеек (пустая, крестик, нолик) и для этого создадим массив этих состояний потому, что в Gridlayout все ячейки хранятся списком. А для расчета того кто победил, будем переводить индекс в массиве в координаты[строка:колонка], но об этом позже.

37 Создадимenum classдля хранения состояния. В нем будет храниться картинка и возможность по ней кликать, ведь когда мы уже поставили символ или игра закончилась, то уже кликать по ячейкам нельзя. Напишем следующее в этом же файле в самом низу за пределами `}`.

38 enum class CellState(@DrawableRes val icon: Int, val isClickable: Boolean) { None(0, true), Cross(R.drawable.ic_cross_anim, false), Circle(R.drawable.ic_circle_anim, false) }Создадим поле с массивом этих состояний, я назову ееmatrixдля простоты. Так же добавим поле для хранения текущего состояния, т.е. чей сейчас ход и создадим методinitGameдля инициализации начального состояния игры при первом запуске приложения (init- вызывается при создании классаMainViewModel) и при сбросе игры (onReloadClick).

39 class MainViewModel : ViewModel() { private lateinit var matrix: Array<CellState> private lateinit var currentCellState: CellState init { initGame() } private fun initGame() { matrix = Array<CellState>(9) { CellState.None } currentCellState = CellState.Cross } fun onReloadClick() { initGame() } }Создадим метод обработки кликов по ячейкам и пропишем в нем для начала смену хода и сохранение в массиве состояние ячейки. Так же создадим поле сLiveData, для того, чтобы на экране смогли отображать кто сейчас ходит.

40 … private val mCurrentMove = MutableLiveData<CellState>() val currentMove: LiveData<CellState> = mCurrentMove … private fun initGame() { … mCurrentMove.value = currentCellState } fun onCellClick(index: Int) { matrix[index] = currentCellState currentCellState = if (currentCellState == CellState.Cross) CellState.Circle else CellState.Cross mCurrentMove.value = currentCellState }ЗдесьmCurrentMoveявляется изменяемым и он закрыт для обращения из вне класса, аcurrentMoveявляется не изменяемым и он доступен снаружи класса.

41 Давайте подпишемся на изменение хода и будем отображать на экране чей сейчас ход. Для этого перейдем вMainFragment, переопределим методonViewCreatedи добавим в него следующее.

42 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) binding.field.forEachIndexed { index, v -> v.setOnClickListener { viewModel.onCellClick(index) } } viewModel.currentMove.observe(viewLifecycleOwner) { binding.direction.animate() .rotation(if (it == CellState.Cross) 0f else 180f) // .scaleY(if (it == Mark.Cross) 1f else -1f) } }binding.field.forEachIndexed- к каждой вьюшке находящейся вGridLayoutустанавливаем слушатель на клик.

43 binding.direction - это наша стрелочка на экране. Соберите проект и запустите его, посмотрите что происходит когда мы кликаем по ячейкам. Попробуйте убрать комментирование со строки соscaleY, а строку сrotationзакомментировать или убрать и посмотреть что получилось.

44 Добавим отображение иконке в той ячейке, по которой мы кликнули. Чтобы не перерисовывать весь массив ячеек, а менять значение только той, по которой мы кликнули, будем передавать индекс ячейки и ее новое значение. Для этого добавим еще одно полеmCellStateByIndex, в которую будет передаваться индекс и новое состояние ячейки.

45 --- MainViewModel.kt --- private val mCellStateByIndex: MutableLiveData<Pair<Int, CellState>> = SingleLiveEvent() val cellStateByIndex: LiveData<Pair<Int, CellState>> = mCellStateByIndex fun onCellClick(index: Int) { matrix[index] = currentCellState mCellStateByIndex.value = Pair(index, currentCellState) … } --- MainFragment.kt --- override fun onViewCreated(view: View, savedInstanceState: Bundle?) { … viewModel.cellStateByIndex.observe(viewLifecycleOwner) { val (index, state) = it with(binding.field.getChildAt(index) as ImageView) { isEnabled = state.isClickable setImageResource(state.icon) } } } --- SingleLiveEvent.kt --- class SingleLiveEvent<T> : MutableLiveData<T>() { private val pending = AtomicBoolean(false) override fun observe(owner: LifecycleOwner, observer: Observer<in T>) { super.observe(owner, Observer { t: T -> if (pending.compareAndSet(true, false)) { observer.onChanged(t) } }) } override fun setValue(value: T) { pending.set(true) super.setValue(value) } }SingleLiveEvent - этот класс служит для того, чтобы при смене конфигурации (например, переворота экрана) не вызывалось снова событие на отрисовку вьюшки. Этот класс нужно создать отдельным файлом.

46 Добавим еще состояние нашей игры (запущена и остановлена), чтобы нельзя было кликать по ячейкам, когда игра завершилась иLiveData, в которой будет храниться состояние игры и список состояний ячеек

47 Создадим enumGameStatusи напишем его нижеCellState.

48 enum class GameStatus { Started, Finished }Добавим полеmStatesи сделаем несколько изменений.

49 --- MainViewModel.kt --- private val mStates = MutableLiveData<Pair<GameStatus, Array<CellState>>>() val states: LiveData<Pair<GameStatus, Array<CellState>>> = mStates private fun initGame() { … mStates.value = Pair(GameStatus.Started, matrix) } --- MainFragment.kt --- override fun onViewCreated(view: View, savedInstanceState: Bundle?) { … viewModel.states.observe(viewLifecycleOwner) { val (status, matrix) = it matrix.forEachIndexed { index, state -> with(binding.field.getChildAt(index) as ImageView) { setImageResource(state.icon) isEnabled = state.isClickable && status == GameStatus.Started } } } }<h3>Создаем свою вьюшку и рисуем на ней сетку</h3>

50 Создадим новый файл. Для этого в правой части проекта щелкнитеПКМ по ru.otus.tictactoe → New → Kotlin Class/Fileи введите названиеFieldView.

51 И напишите следующее в этот файл:

52 --- FieldView.kt --- import androidx.gridlayout.widget.GridLayout class FieldView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : GridLayout(context, attrs, defStyleAttr) { private var widthF: Float = 0f private var heightF: Float = 0f private var cellWidth: Float = 0f set(value) { field = value halfCellWidth = value / 2 } private var cellHeight: Float = 0f set(value) { field = value halfCellHeight = value / 2 } private var halfCellWidth: Float = 0f private var halfCellHeight: Float = 0f private val strokeSize = resources.getDimension(R.dimen.stroke_size) private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = ResourcesCompat.getColor(context.resources, R.color.penColor, null) strokeWidth = strokeSize strokeCap = Paint.Cap.ROUND } override fun onMeasure(widthSpec: Int, heightSpec: Int) { super.onMeasure(widthSpec, heightSpec) widthF = MeasureSpec.getSize(widthSpec).toFloat() heightF = MeasureSpec.getSize(heightSpec).toFloat() cellWidth = widthF / 3f cellHeight = heightF / 3f } override fun dispatchDraw(canvas: Canvas?) { super.dispatchDraw(canvas) canvas?.run { for (i in 1..2) { drawLine(cellWidth * i, strokeSize, cellWidth * i, heightF - strokeSize, paint) drawLine(strokeSize, cellHeight * i, widthF - strokeSize, cellHeight * i, paint) } } }Обязательно нужно наследоваться отandroidx.gridlayout.widget.GridLayout.

53 Еще нужно добавить в ресурсы в которых будет указан цвет и размер линии. Для этогоПКМ по res → New → Android Resource File.

54 В появившемся окне, в полеFilename:написатьvaluesи нажатьOK.

55 Появится новый файлvalues.xml. откройте его и напишите следующее:

56 <resources> <color name="penColor">#454FCE</color> <dimen name="stroke_size">8dp</dimen> </resources>Теперь ошибки должны исчезнуть.

57 Осталось поменять нашу вьюшку в верстке.

58 <ru.otus.tictactoe.views.FieldView android:id="@+id/field" android:layout_width="0dp" android:layout_height="0dp" app:columnCount="3" app:layout_constraintBottom_toBottomOf="@id/bottom" app:layout_constraintDimensionRatio="1:1" app:layout_constraintEnd_toStartOf="@+id/end" app:layout_constraintStart_toStartOf="@+id/start" app:layout_constraintTop_toTopOf="@id/barrier" app:rowCount="3"><h3>Вычисляем, кто выиграл</h3>

59 Для начала создадимsealed classс возможными вариантами выигрыша (по горизонтали, по вертикали, по диагонали и нет выигрыша).

60 --- FieldView.kt --- private var mWinLineState: WinLineState = WinLineState.None private var winLineRect: RectF? = null override fun onMeasure(widthSpec: Int, heightSpec: Int) { … drawWinLine(mWinLineState) } override fun dispatchDraw(canvas: Canvas?) { super.dispatchDraw(canvas) canvas?.run { … winLineRect?.let { val line: RectF = when (mWinLineState) { is WinLineState.Horizontal -> RectF(it.left, it.top, it.right, it.bottom) is WinLineState.Vertical -> RectF(it.left, it.top, it.right, it.bottom) WinLineState.MainDiagonal -> RectF(it.left, it.top, it.right, it.bottom) WinLineState.ReverseDiagonal -> RectF(it.left, it.top, it.right, it.bottom) WinLineState.None -> it } drawLine(line.left, line.top, line.right, line.bottom, paint) } } } fun drawWinLine(winLineState: WinLineState) { mWinLineState = winLineState winLineRect = when (winLineState) { WinLineState.MainDiagonal -> RectF(strokeSize, strokeSize, widthF - strokeSize, heightF - strokeSize) WinLineState.ReverseDiagonal -> RectF(widthF - strokeSize, strokeSize, strokeSize, heightF - strokeSize) is WinLineState.Horizontal -> { val y = halfCellHeight + cellHeight * winLineState.row RectF(strokeSize, y, widthF - strokeSize, y) } is WinLineState.Vertical -> { val x = halfCellWidth + cellWidth * winLineState.column RectF(x, strokeSize, x, heightF - strokeSize) } WinLineState.None -> null } if (winLineRect == null) return invalidate() } sealed class WinLineState { data class Horizontal(val row: Int) : WinLineState() data class Vertical(val column: Int) : WinLineState() object MainDiagonal : WinLineState() object ReverseDiagonal : WinLineState() object None : WinLineState() }Создадим методы расчета выигрышного положения.

61 --- MainViewModel.kt --- private val mWinState : MutableLiveData<WinLineState> = MutableLiveData() val winState: LiveData<WinLineState> = mWinState private fun initGame() { … mWinState.value = WinLineState.None } fun onCellClick(index: Int) { matrix[index] = currentCellState mCellStateByIndex.value = Pair(index, currentCellState) val row = index / 3 val column = index % 3 val state = checkWin(row, column) if (state != WinLineState.None) { mStates.value = Pair(GameStatus.Finished, matrix) mWinState.value = state return } currentCellState = if (currentCellState == CellState.Cross) CellState.Circle else CellState.Cross mCurrentMove.value = currentCellState } private fun checkWin(row: Int, column: Int): WinLineState { //check row if (checkLine { matrix[getIndex(row, it)] == currentCellState }) return WinLineState.Horizontal(row) // check column if (checkLine { matrix[getIndex(it, column)] == currentCellState }) return WinLineState.Vertical(column) if (row == column) { // check main diagonal if (checkLine { matrix[getIndex(it, it)] == currentCellState }) return WinLineState.MainDiagonal } if (row + column == 2) { // check reverse diagonal if (checkLine { matrix[getIndex(it, 2 - it)] == currentCellState }) return WinLineState.ReverseDiagonal } return WinLineState.None } private fun checkLine(function: (Int) -> Boolean): Boolean { for (i in 0..2) { if (!function(i)) return false } return true } private fun getIndex(row: Int, column: Int) = row * 3 + column --- MainFragment.kt --- override fun onViewCreated(view: View, savedInstanceState: Bundle?) { … viewModel.winState.observe(viewLifecycleOwner) { binding.field.drawWinLine(it) } }<h3>Сбрасывание состояния игры</h3>

62 Чтобы постоянно не приходилось перезапускать игру, давайте сделаем сброс к начальному состоянию игры. Для этого добавим кнопку в тулбаре.

63 Добавьте иконкуcachedи назовите ееic_reload. Добавьте ресурс, как это делали с цветом и размером, только в открывшемся окне, поменяйтеResource typeнаMenuи вFile nameнапишите menu_reload. А в ресурсахstringsдобавьте название кнопки

64 --- res\menu\menu_reload.xml --- <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_reload" android:icon="@drawable/ic_reload" android:title="@string/reload" app:showAsAction="always"/> </menu> --- res\values\strings.xml --- <string name="reload">reload</string>Теперь осталось только добавить ее и реализовать обработку этой кнопки. Для этого переходим вMainFragmentи добавляем следующее.

65 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setHasOptionsMenu(true) } override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) { super.onCreateOptionsMenu(menu, inflater) inflater.inflate(R.menu.menu_reload, menu) } override fun onOptionsItemSelected(item: MenuItem): Boolean { if (item.itemId == R.id.action_reload) { viewModel.onReloadClick() return true } return super.onOptionsItemSelected(item) }<h3>Подводим итоги</h3>

66 На этом все. Можно запустить проект и посмотреть что получилось. Исходник можно взять из github (<a>https://github.com/shustreek/TicTacToe</a>). Там я добавил анимацию рисования крестика и нолика, а также линии при выигрыше.