週末のアプリ作成

androidアプリ個人開発者の実態を報告します。アプリの収入も公開中です♪

アプリ作成 手順2「ベース画面の作成 」 サンプルコード紹介

こんにちは、TF's appsです。

 

今回の記事は娘のための学習アプリ作成 第二弾です。

 

 

作成時間どれくらいでしょう?

作業を始めてから約2時間でメイン画面の骨組みを作りました。

ソースもすべて公開していますので、ぜひ参考にどうぞ!!

 

1.完成画面(本日の成果)

f:id:TFs_apps:20200112161050p:plain

 

2.作り方

まずはスケッチを作成します。イメージ画です。

f:id:TFs_apps:20200112161748j:plain

 

スケッチをベースにして、いざandroid stadioを起動して、

activity_main.xmlを編集していきます。

f:id:TFs_apps:20200112163229p:plain

今回もアプリもシンプルな画面となりますので

もくもくと作業していきます。

 

メイン画面の構成としては大きく3種類となります。

 

(1)アプリの説明文を表示するテキストエリア

(2)問題となる漢字の情報(音読み、訓読み、画数、例文)を

   表示するテキストエリア

(3)ボタンエリア(はじめる、こたえ)

 

TextView と Button しか画面の構成上の部品はありません。

問題の進捗をメーター表示しようと考えたのですが、これも文字の方が良いかなと思って、当初のスケッチから変更しました。

 

あとは、LinearLayout を使いながらこれらの部品を均等に並べていきます

今日はここまでです。

ではまた次回お会いしましょう♪

 

前回の記事も参考にどうぞ↓


 

3.ソース全文(activity_main.xml


<?
xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_weight="1">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<LinearLayout
android:id="@+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bak_status"
android:orientation="vertical" >

<TextView
android:id="@+id/text_status"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="44"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:focusable = "true"
android:focusableInTouchMode = "true"
android:text=" ここに説明文を表示 "
android:gravity="center_horizontal"
android:textSize="38sp" />

<TextView
android:id="@+id/text_status2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:text=" ここに進捗を表示 "
android:gravity="center_horizontal"
android:textSize="24sp" />

</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_below="@+id/linearLayout4"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="@drawable/bak_noselect"
android:orientation="vertical">

<TextView
android:id="@+id/ttl_onyomi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="@drawable/bak_ttl"
android:text="音読み"
android:textSize="38sp" />

<TextView
android:id="@+id/ttl_kunyomi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="40"
android:background="@drawable/bak_ttl"
android:text="訓読み"
android:textSize="38sp" />


<TextView
android:id="@+id/ttl_kakusuu"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="40"
android:background="@drawable/bak_ttl"
android:text="画数"
android:textSize="38sp" />

<TextView
android:id="@+id/ttl_exp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_weight="40"
android:background="@drawable/bak_ttl"
android:text="例文"
android:textSize="38sp" />

</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:background="@drawable/bak_noselect"
android:orientation="vertical">

<TextView
android:id="@+id/text_onyomi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="@drawable/bak_text"
android:text=""
android:textSize="38sp" />

<TextView
android:id="@+id/text_kunyomi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="@drawable/bak_text"
android:layout_weight="40"
android:text=""
android:textSize="38sp" />

<TextView
android:id="@+id/text_kakusuu"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="@drawable/bak_text"
android:layout_weight="40"
android:text=""
android:textSize="38sp" />

<TextView
android:id="@+id/text_exp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:background="@drawable/bak_text"
android:layout_weight="40"
android:text=""
android:textSize="38sp" />

</LinearLayout>

</LinearLayout>


<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout0"
android:orientation="horizontal">

<Button
android:id="@+id/btn_start"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:onClick="onStart"
android:text="はじめる"
android:textColor="#ffffff"
android:background="@drawable/bak_btn_1"
android:textSize="40sp"
android:textStyle="bold" />

<Button
android:id="@+id/btn_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:onClick="onResult"
android:text="こたえ"
android:textColor="#ffffff"
android:background="@drawable/bak_btn_2"
android:textSize="40sp"
android:textStyle="bold" />

</LinearLayout>

</RelativeLayout>

</ScrollView>