Programming

どんなアプリを作るか 電卓を作る。 市販の電卓とは違い、括弧が使えるようにする。なので、軽い構文解析を書くことになる。しかし今回の記事ではデータの扱い方やViewの組み方に焦点を当てているため、電卓の計算処理についてはかなり軽めに説明する。 プロジェクト作成 プロジェクト名は"Calculator"とする。 DataBindingは有効にする Fragmentに分ける 今回は1画面のアプリなのでわざわざFragmentに分ける必要もないのだが、「もしかしたら他にもFragmentを追加するかもしれない」というケースを想定して、一応分けてみる。 CalcFragmentを作成する。xmlファイルはfragment_calc.xmlとする。 activity_main.xmlの内容を以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?xml version="1.0" encoding="utf-8"?> <merge 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=".MainActivity"> <fragment android:id="@+id/calcFragment" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.example.calculator.CalcFragment" /> </merge> merge Android Kotlin Fundamentals 06.2で存在を初めて知った。こうするとactivity_main.xmlでLayoutを作って、fragmentの中でもまたLayoutを作るといった冗長性を排除できる。 CalcFragmentの設定 string.xml fragment_calc.xmlに設定するための文字列定数を定義する。string.xmlを以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <resources> <string name="app_name">Calculator</string> <string name="calc_0">0</string> <string name="calc_1">1</string> <string name="calc_2">2</string> <string name="calc_3">3</string> <string name="calc_4">4</string> <string name="calc_5">5</string> <string name="calc_6">6</string> <string name="calc_7">7</string> <string name="calc_8">8</string> <string name="calc_9">9</string> <string name="calc_plus">+</string> <string name="calc_minus">-</string> <string name="calc_mul">*</string> <string name="calc_div">/</string> <string name="calc_ac">AC</string> <string name="calc_eq">=</string> <string name="calc_lp">(</string> <string name="calc_rp">)</string> </resources> fmagment_calc....

次の2つの事項について扱う。 DataBindingにおけるデータの受け渡し Navigationを用いた、異なるFragment間におけるデータの受け渡し さらに具体的に言うと、次の機能を持つアプリを作る MainFragmentにはEditTextが1つある。 EditTextが入力されると、TextViewが"String: [EditTextの文字列]“に変わる。 Buttonが押されると、ReverseFragmentに遷移する ReverseFragmentは、MainFragmentのテキストフィールドの文字列を受け取って、それを逆順にした文字列を表示する。 Android Kotlin Fundamentals Courseでの05辺りを勉強した記録なので、詳しいことはそちらに載っている。 プロジェクト初期設定 “Empty Project"として作成して、名前を"DataTest"とする。 build.gradle(module:App)について、dataBindingの設定をしておく。 次のようにMainFragmentとReverseFragmentを作成しておく。作成時、“Create layout XML?“にのみチェックをつけておく。 MainFragmentの設定 fragment_main.xmlを次のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".main.MainFragment"> <data> <variable name="myMsg" type="com....

Navigationを用いて画面遷移をやってみる。具体的には以下の処理を行う。 Fragment01とFragment02を用意する Fragment01でボタンが押されたらFragment02に遷移する Android Kotlin Fundamentals Courseでの03辺りを勉強した記録なので、詳しいことはそちらに載っている。 Navigationについて 異なるFragment間の遷移を制御する仕組み。遷移の設定を視覚的に行えるらしい。 これ以前はIntentという仕組みを用いていたらしい。これについては必要になりそうならいつか調べる。 プロジェクト作成 Empty Activityを選択し、名前をNavigation Testとする。 build.gradle(Module: app)でDataBindingを有効にしておく。 Fragmentの作成 layouts/にFragmentを作成する。“Create layout XML?“だけチェックをつけておく。Fragmentは2つ作成し、それぞれ"Fragment01"と"Fragment02"とする。xmlファイルはそれぞれfragment_fragment01.xml、fragment_fragment02.xmlとする。 まずTextViewのtext要素に設定するための定数をstrings.xmlに内容を追加しておく。 1 2 3 4 5 6 7 8 9 <resources> <string name="app_name">NavigationTest</string> <!-- TODO: Remove or change this placeholder text --> <string name="hello_blank_fragment">Hello blank fragment</string> <string name="fragment01">Fragment01</string> <string name="fragment02">Fragment02</string> <string name="click">Click</string> </resources> fragment_fragment01.xmlの内容は以下の通りにする。Buttonを追加し、textを@string/clickに設定する。TextViewのtextを@string/fragment01に設定する。また全体をConstraintLayoutで包み、DataBindingのためにlayoutでさらに包む。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <?...

Android + Kotlinを用いてアプリ開発をするときの勉強メモ。勉強メモなので備忘録程度にしか書いてない。 次のことをやった。 ボタンを押すとToastを表示 DataBindingを用いる Fragmentを用いる Fragment + DataBinding Android Kotlin Fundamentals Courseでの01-03辺りを勉強した記録なので、詳しいことはそちらに載っている。 前提 Kotlinは未学習だが雰囲気で読める Android開発は完全未経験 iPhoneアプリ開発は少しだけ経験 Android Studioの環境構築は済んでいる エミュレータのインストールも完了している Build & Runの方法も知っている プロジェクト作成 とりあえずプロジェクト名はTestProjectとする。 左側のペインに色々ディレクトリ・ファイルがある。色々漁ってみると、次のようなものがある。 java/com.example.testapplication/: 基本的にはこの中にKotlinのソースコードを入れるっぽい。ディレクトリ名がjavaなのは歴史的な理由らしい。 res/: resourceの略で、画面や定数の定義がこの中に色々入っている。 res/layout: 画面の定義ファイルが入っている res/values: 定数の定義が入っている res/values/colors.xml: 色定義 res/values/strings.xml: 文字列定数の定義 res/values/styles.xml: styleの定義。画面の部品のstyleをCSSみたいに設定するためのもの。 build.gradle: Buildの際の様々な設定を記したファイル。 ボタンの配置 res/layouts/activity_main.xmlにメイン画面の定義が書かれている。中央ペイン左下にDesign/Textを切り替えるタブがある。 Designタブ GUIで画面の構造をいじるための画面。直感的に操作できる。色々なペインで分かれている。 Palette: ドラックアンドドロップできる。 Component Tree: 部品同士の階層構造を表示している。内部構造はXMLなので部品は階層構造になっている。 Attributes: 部品の様々な属性を設定。たくさんあるが、虫眼鏡マークで検索可能。便利。中でもid属性は重要。 id: 部品の識別子。プログラムからアクセスするためにここの設定が必要。 Component Treeにおいて、rootがConstraint Layoutであることに注目。これはConstraint(制約)を用いて部品の配置を設定するためのLayoutである。Constraintについてはやってみた方が早い。 PaletteからButtonをドラッグ&ドロップする。 Buttonをクリックすると4辺が白丸になる。以下のようにしてConstraintを設定する。ボタンの配置は一意に決まる。 上/右/左側の丸を画面上/右/左端にくっつける 下側の丸をTextViewの上端にくっつける こんな感じでカーソルで引っ張って部品の位置を決定していく。Padding/Margin、Biasなどの設定はAttributeの方で行える。 次にButtonのテキストを設定する。 Attributeタブのtext属性を見つける。入力欄の右に細い長方形があるのでクリックすると"Pick a Resource"というウインドウが現れる。右上の"Add new resource" → “New string value"を選ぶ。設定を以下のようにする。 Resource name: click Resource value: Click すると、新たに文字列定数clickが追加され、その定数が使われる。res/values/strings....

更新(2021/06/13): いくつか間違っていたところがあったので修正。 どんなTodoリストを作るか Todoの登録 情報は短いテキストだけ Todoをリスト表示 Todoをクリックすると削除 サイトの作成 適当なディレクトリで次のコマンドを実行すると、mysiteというディレクトリが作られる。 1 $ django-admin startproject mysite 以降はmysiteディレクトリで作業する。 アプリの作成 mysiteディレクトリにて以下のコマンドを実行すると、todo_listというディレクトリが作られる。ここに実際のアプリの処理を記述していく。 1 $ python3 manage.py startapp todo_list 続いてmysite/mysite/settings.pyを開いて、INSTALL_APPSを以下の記述にする。'todo_list.apps.TodoListConfig'を追加しただけ。これはデータベース作成やテンプレート作成のために、djangoがtodo_listのディレクトリを教えているっぽい。Todo_listConfigかと思ったが違うらしい(エラーで「TodoListConfigだよ」と教えてくれた。優しい)。 1 2 3 4 5 6 7 8 9 INSTALLED_APPS = [ 'todo_list.apps.TodoListConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] viewの作成 mysite/todo_list/views.pyを編集する。とりあえずviewが動くかどうかだけ確認したいので、レスポンスは適当な文字列にする。 1 2 3 4 5 6 from django.http import HttpResponse # Create your views here. def index(request): return HttpResponse('Hello') urlの設定 まずmysite/mysite/urls.pyの設定をする。urls.pyとは「どんなurlにアクセスされたらどんなviewに処理を任せるか」を記述したものっぽい。ここでは、todo_list/で始まるurlだったらtodo_list/urls.pyに処理を任せるように書いている。 1 2 3 4 5 6 7 from django....