58
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Kotlinで始めるAndroidアプリ入門(中編)

Last updated at Posted at 2018-05-29

前編に引き続きKotlinでAndroidアプリを作ってみます。

最初の画面で入力した文字列を、2つ目の画面に渡すアプリになります。まずは最初の画面を作ります。

レイアウトエディタを開く

左のプロジェクトウィンドウから、app > res > layout > activity_main.xml を選択します。

もし、XMLが表示されていたら、下のタブでデザインを選択します。

青いアイコンをクリックし、「Blueprint」を選択します。

settingLayout.png

最初の画面を作る

最初の画面は、テキストボックスとボタンが一つずつある画面です。

デフォルトで設定されている「Hello World!」が表示されているTextViewは削除してください。右クリックして、削除を選択します。

deleteHelloWorld.png

まずは、テキストボックスを追加します。
左のパレットウィンドウで Text > PlaneText を選択し、画面へドラッグ&ドロップします。
createTextBox.png

次にボタンを追加します。
左のパレットウィンドウで Button > Button を選択し、画面へドラッグ&ドロップします。
createButton.png

UI文字列を変更する

青いアイコンをクリックし、「デザインを」選択します。
テキストボックスには「Name」、ボタンには「BUTTON」という文字列が表示されていることがわかります。これを変更しましょう。
designMode.png

文字列をハードコピーしてもよいのですが、ここではXMLで管理します。XMLで管理すると、ローカライズなどが簡単にできるようになります。

左のProjectウィンドウから、app > res > values > strings.xml を開きます。上部の「エディターを開く」をクリックします。
openXML.png

テキストボックスに表示する文字列を設定します。「+」ボタンをクリックし、
 キー: edit_message
 値:Enter a message
と入力します。
textKey.png

次に、ボタンに表示する文字列を設定します。同じく「+」ボタンをクリックし、
 キー: button_send
 値:Send
と入力します。
buttonKey.png

設定したビューと文字列を紐つけましょう。
まず、上部のタブバーから「activity_main.xml」をクリックします。
テキストボックスをクリックし、右の属性で「テキスト」を空にします。次に「hint」の横の「…」をクリックします。
setTextMessage.png

ダイアログで「edit_message」をダブルクリックします。
chooseMessage.png

同様に、ボタンをクリックし、「テキスト」の横の「…」をクリックします。
setButtonMessage.png

ダイアログで「button_send」をダブルクリックします。
chooseButtonMessage.png

これで最初の画面の設定はおしまいです。ビューの制約やサイズの設定もできますが、ここでは割愛します。詳しくは公式ガイドをご覧ください。

58
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?