Android」カテゴリーアーカイブ

Androidアプリ開発 TextView 新たな使い方

公開日:2019年11月10日
更新日:2019年11月15日

目次

  1. Androidのグラフ作成ライブラリ
  2. TextViewで簡易グラフを作る
  3. まとめ

テキストビューで簡単なグラフを作成する方法を紹介します。

1. Androidのグラフ作成ライブラリ

Androidでグラフを作成するためのライブラリとして「MPAndroidChart」が用意されています。「MPAndroidChart」を用いることにより、任意に「折れ線グラフ」、「円グラフ」、「棒グラフ」、FXでもお馴染みの「ローソク足」などのグラフが作成できます。今後、使用する機会がありましたら紹介したいと思います。

ただ、単純なグラフ(棒グラフ)であればテキストビューでもできますので、次章ではテキストビューを用いた簡単なグラフの作り方を紹介します。今回は、単に思い付きで作ったプログラムですので、深いツッコミはご遠慮ください。

2. TextViewで簡易グラフを作る

テキストビューによる簡単なグラフの作成方法について説明します。今回のサンプルプログラムですが、構成要素はテキストビュー2つ、ボタン1つのシンプルな画面で、ボタンをクリックすることにより、赤色と青色のテキストビューの比率が7:3に変わります(デフォルトは1:1)。つまり、2つのテキストビューの比率を表示・変更するプログラムとなっています。

テキストビュー グラフ

~MainActivity.xml~

下記が「activity_main.xml」のプログラムです。

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
(1) android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:id="@+id/textView"
(2) android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
android:textStyle="bold"
android:background="#FF0000"
tools:layout_editor_absoluteX="178dp"
tools:layout_editor_absoluteY="142dp" />

<TextView
android:id="@+id/textView2"
(2) android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="20sp"
android:textStyle="bold"
android:background="#0000FF"
tools:layout_editor_absoluteX="171dp"
tools:layout_editor_absoluteY="269dp" />

</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
(3) android:onClick="onClkBtn"
android:text="Button"
tools:layout_editor_absoluteX="215dp"
tools:layout_editor_absoluteY="170dp" />

</LinearLayout>

今回はテキストビューの比率を変えるので(1)と(2)のように「WeightSum」と「layout_weight」の値を設定しています。以下で簡単に説明したいと思います。

「WeightSum」では表示割合の最大値を任意に設定し、「layout_weight」では表示割合の合計が最大値になるように設定します。上記のプログラムでは、テキストビューを1:1で表示したいので、「WeightSum」を10に設定し、「layout_weight」をそれぞれ5に設定しています。もう少し簡単に説明しますと、横幅の最大値が10なので、この値を超えないようにそれぞれのテキストビューで値を設定します。上記プログラムの例では、それぞれ5を設定しているので、画面に対し半分半分の割合で表示されます。

上記プログラムの(3)はボタンがクリックされたときに呼び出されるイベント処理で、ここでテキストビューの比率を7:3に変えています。

~MainActivity.java~

下記が「MainActivity.java」のプログラムです。

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

/* ボタン押下イベント */
public void onClkBtn(View v) {

TextView textvew1, textvew2;
LinearLayout.LayoutParams textview1_param, textview2_param;

/* TextView1(赤色のテキストビュー)のweightを変更 */
(1) textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;
textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);

/* TextView2(青色のテキストビュー)のweightを変更 */
(2) textview2_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview2_param.weight = 3;
textvew2 = (TextView)findViewById(R.id.textView2);
textvew2.setLayoutParams(textview2_param);

}
}

上記プログラムの(1)と(2)で、それぞれ、赤色と青色のテキストビューの比率を7:3に変更しています。以下で詳細を簡単に説明します。

まず、画面要素(View)のパラメータである「weight」に数値を設定します。下記では7を設定しています。

textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;

そして、赤色のテキストビューのパラメータに上記で設定したパラメータを設定します。青色のテキストビューも同様の設定です。

textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);

今回は水平方向に1要素だけグラフ表示する簡単なプログラムでしたが、テキストビューを増やすなどして、複数の要素をグラフ表示させることも可能です。また、同様に垂直方向のグラフを作成することもできます。以上でプログラムの説明は終わりです。

3. まとめ

今回はテキストビューの新たな使い方(簡単なグラフ作成)について紹介しました。下記に要点をまとめましたので、ご参考までにどうぞ。

1. 軸の上限値を設定

「activity_main.xml」でWeightSumの値を設定します。

2. 要素の値を設定

「activity_main.xml」でLayout_weightの値を設定します。

3. 要素の値を変更

「MainActivity.java」で下記のようにViewのパラメータを取得・設定します。

textview1_param = (LinearLayout.LayoutParams)v.getLayoutParams();
textview1_param.weight = 7;
textvew1 = (TextView)findViewById(R.id.textView);
textvew1.setLayoutParams(textview1_param);

Androidアプリ開発 SharedPreferences

公開日:2019年11月5日
更新日:2019年11月15日

目次

  1. SharedPreferencesとは
  2. SharedPreferencesの実装
  3. まとめ

このブログではSharedPreferencesの実装法について紹介します。

1. SharedPreferencesとは

アプリ内で使用したデータは基本的にアプリを閉じると消去されますが、今から紹介する「SharedPreferences」を使用すれば、データの再利用、つまり、デバイス内にデータを保存できます。「SharedPreferences」で保存できるデータ型はboolean、int、long、float、Stringで、構造体やクラスは保存対象外です。

2. SharedPreferencesの実装

下図はエディットテキスト、テキストビュー、ボタンの3要素で構成された簡易な画面で、上段左がエディットテキスト、上段右がテキストビュー、下段がボタンとなっています。プログラムの内容を簡単に説明します。ボタンクリック時、エディットテキストに入力された値の合計を算出、その結果をテキストビューに表示、かつ、デバイス内に保存します。

SharedPreferencesの実装 1

このプログラムをもとに「SharedPreferences」の実装方法について説明します。

~activity_main.xml~

「activity_main.xml」のプログラムは下記のようになります。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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" >

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:gravity="right"
android:inputType="numberSigned" />

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:textSize="18sp"
android:gravity="right"
tools:layout_editor_absoluteX="120dp"
tools:layout_editor_absoluteY="200dp" />

</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClickButton"
android:text="ボタン1"
android:textSize="18sp"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

</LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

今回新たに追加したプログラムは下記の通りです。

android:gravity="right"

このプログラムは文字や数値を左、中央、右などに配置します。上記の例では右に文字や数値を配置しますが、左に配置する時は「left」、中央に配置する時は「center」を使用します。他にもオプションがありますので、必要に応じて調べてみてください。

~MainActivity.java~

「MainActivity.java」のプログラムは下記のようになります。

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

int input_num; /* 入力値 */
int total; /* 入力値の合計 */

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/* デバイスから入力の合計値を読み込む */
SharedPreferences read_total;
read_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
total = read_total.getInt("Total",0);

/* TextViewに入力の合計値を設定 */
TextView textview;
textview = (TextView)findViewById(R.id.textView);
textview.setText(String.valueOf(total));

}

/* コンストラクタ */
public MainActivity() {

/* 入力値の初期化 */
input_num = 0;

}

/* ボタンクリックイベント */
public void onClickButton(View v) {

/* EditTextから入力値を取得 */
EditText edittext;
edittext = (EditText)findViewById(R.id.editText);
input_num = Integer.parseInt(edittext.getText().toString());

/* 合計値の更新 */
total = total + input_num;

/* TextViewに合計値を設定 */
TextView textview;
textview = (TextView)findViewById(R.id.textView);
textview.setText(String.valueOf(total));

/* 合計値を保存 */
SharedPreferences write_total;
SharedPreferences.Editor write_total_editor;
write_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
write_total_editor = write_total.edit();
write_total_editor.putInt("Total",total);
write_total_editor.apply();

}
}

中身について簡単に説明します。

onCreate内では、ファイルから入力の合計値を読み込み、合計値をテキストビューに表示します。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/* ファイルから入力の合計値を読み込む */
SharedPreferences read_total;
read_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
total = read_total.getInt("Total",0);

/* TextViewに入力の合計値を設定 */
TextView textview;
textview = (TextView)findViewById(R.id.textView);
textview.setText(String.valueOf(total));

}

onCreateの中身について説明します。テキストビューへの表示は前回のブログで説明しましたので割愛させていただきます。

下記のプログラムのように、まずはインスタンスの取得を行いますが、「getSharedPreferences」の第1引数にはデータを保存するためのファイル名を指定し(任意の名前)、第2引数にはファイル操作モードを指定します。ファイル操作モードは下表の通りです。下記のプログラムでは「getSharedPreferences」の第1引数には「Test」、第2引数には「Context.MODE_PRIVATE」が指定されていると思います。

ファイル操作モード
Context.MODE_PRIVATE 一つのアプリ内でデータを使用
Context.MODE_MULTI_PROCESS 複数のアプリ間でデータを使用

次にデータの読み込みを行いますが、「read_total.getInt」の第1引数にはファイル内のデータを指定し(任意の名前)、第2引数にはデータがなかった場合の初期値を指定します。下記のプログラムでは「read_total.getInt」の第1引数には「Total」、第2引数には「0」が指定されていると思います。また、データ型ですが、下記の例ではint型の値を読み込んでいますが、「getFloat」や「getString」などfloat型やString型の値も読み込めます。

/* ファイルから入力値の合計を読み込む */
SharedPreferences read_total;
read_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
total = read_total.getInt("Total",0);

ボタンクリックイベントでは、エディットテキストから入力値を読み込み、入力値と過去の合計値をもとに合計値を更新します。そして、その合計値をテキストビューに表示し、デバイス内に保存します。

/* ボタンクリックイベント */
public void onClickButton(View v) {

/* EditTextから入力値を取得 */
EditText edittext;
edittext = (EditText)findViewById(R.id.editText);
input_num = Integer.parseInt(edittext.getText().toString());

/* 合計値の更新 */
total = total + input_num;

/* TextViewに合計値を設定 */
TextView textview;
textview = (TextView)findViewById(R.id.textView);
textview.setText(String.valueOf(total));

/* 合計値を保存 */
SharedPreferences write_total;
SharedPreferences.Editor write_total_editor;
write_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
write_total_editor = write_total.edit();
write_total_editor.putInt("Total",total);
write_total_editor.apply();

}

ボタンクリックの中身について説明します。

「findViewById」を使用してエディットテキストから入力値を読み込んでおり、最後の行ではString型からint型への型変換を行っています。

/* EditTextから入力値を取得 */
EditText edittext;
edittext = (EditText)findViewById(R.id.editText);
input_num = Integer.parseInt(edittext.getText().toString());

「getSharedPreferences」は上記で説明しましたので説明を省きます。「write_total_editor.putInt(“Total”,total)」では「Test」ファイル内のデータ「Total」にアプリ内のデータ「total」を保存します。下記の例ではint型の値を書き込んでいますが、「putFloat」や「putString」などfloat型やString型の値も書き込めます。「write_total_editor.apply()」はファイルへの書き込みタイミング(非同期)で、下表のように2種類あります。必要に応じて使い分けてください。

ファイルへの書き込みタイミング
apply 非同期
commit 同期
/* 合計値を保存 */
SharedPreferences write_total;
SharedPreferences.Editor write_total_editor;
write_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
write_total_editor = write_total.edit();
write_total_editor.putInt("Total",total);
write_total_editor.apply();

~SharedPreferencesで設定したファイル内を確認するには~

設定したファイル内のデータを確認したい場合、まず、アプリ実行時にView/Tool Windows/Device File Explorerを開きます。

SharedPreferencesデータ 1

そして、Device File Explorerでdata/data/com.example.プロジェクト名/shared_prefs/設定したファイル.xmlを開きます。

補足ですが、プロジェクト名とはAndroid Studioで作成したプロジェクト名、設定したファイルとはgetSharedPreferencesの第1引数で指定したデータを保存するためのファイル名となります(名前は任意)。

SharedPreferencesデータ 2

xmlファイルの中身を見ると、int型のデータ「Total」に値「100」が保存されていることが分かると思います。これで確認完了です。

3. まとめ

今回は「SharedPreferences」の実装法について学びました。それらをまとめた内容は下記の通りです。

・SharedPreferences
 通常、アプリ内で使用したデータはアプリを閉じると消去されますが、データを次回以降も再利用したい場合、「SharedPreferences」を使用してデバイス内にデータを保存します。保存できるデータ型はboolean、int、long、float、Stringです。

・データの読み書き
 デバイスからのデータ読み込みやデバイスへのデータ書き込みは「getSharedPreferences」のインスタンスを取得して行います。その時、下記プログラムの赤字のように、デバイス内のファイル名やファイル内のデータ名は任意に指定でき、下記プログラムの青字のように、1つのアプリ内でデータを使用するか、複数のアプリ間でデータを使用するかの設定も自由にできます。

/* ファイルから入力値の合計を読み込む */
SharedPreferences read_total;
read_total = getSharedPreferences("Test", Context.MODE_PRIVATE);
total = read_total.getInt("Total",0);

Androidアプリ開発 ボタンクリックイベント

公開日:2019年11月1日
更新日:2019年11月15日

目次

  1. イベント処理について
  2. イベント処理の実装
  3. まとめ

ここではボタンをクリックした時のイベント処理について説明します。

1. イベント処理について

「何かをインプットする」、「何かをクリックする」、「何かをタッチする」のような特定の行動をイベントと呼び、イベントによって呼び出される処理のことをイベント処理といいます。例えば、「ボタンをクリックした」時に「クリック完了と表示させる」場合を考えてみます。この時、「ボタンをクリックした」がイベント、「クリック完了と表示させる」がイベント処理になります。ユーザはこのイベントに対し、任意に処理内容を記述することで、目的のプログラムを実現させることになります。

・イベント発生の流れ

下記は、ボタンクリック時に画面に「クリック完了」と表示させるときのイベント発生の流れです。参考までにどうぞ。

ボタンをクリック

↓イベントが発生しました
↓(後の処理はお願いします)

画面に「クリック完了」と表示

2. イベント処理の実装

下図はボタンとテキストビューで構成された簡易な画面であり、ボタンがクリックされた時にテキストビューに「クリック完了」という文字列を表示するプログラムです。このプログラムをもとにイベント処理の実装について説明します。

ボタンクリックイベント

~actvity_main.xml~

「actvity_main.xml」のプログラムは下記のようになります。

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onClickButton"
android:text="ボタン1"
android:textSize="24"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="24"
tools:layout_editor_absoluteX="120dp"
tools:layout_editor_absoluteY="200dp" />

</LinearLayout>

中身について簡単に説明します。

下記のコードはボタンがクリックされた時に呼び出される関数で、処理内容は「MainActivity.java」の「onClickButton」に記述します。関数名は任意に指定可能です。

android:onClick="onClickButton"

~MainActivity.java~

「MainActivity.java」のプログラムは下記のようになります。

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

/* ボタンクリックイベント */
public void onClickButton(View v) {

TextView tv_total_saving;

/* テキストビューに文字列を設定 */
tv_total_saving = (TextView)findViewById(R.id.textView);
tv_total_saving.setText("クリック完了");

}
}

中身について簡単に説明します。

「onClickButton」がボタンクリック時にイベントとして呼び出される関数です。この関数内に実際の処理内容を記述します。

/* ボタンクリックイベント */
public void onClickButton(View v) {

TextView tv_total_saving;

/* テキストビューに文字列を設定 */
tv_total_saving = (TextView)findViewById(R.id.textView);
tv_total_saving.setText("クリック完了");

}

下記の「findViewById」では、画面要素固有のIDを引数として指定することにより、エディットテキストやテキストビューへの読み書きが可能になります。今回はテキストビューへの書き込みです。

/* テキストビューに文字列を設定 */
tv_total_saving = (TextView)findViewById(R.id.textView);
tv_total_saving.setText("クリック完了");

画面要素固有のIDは「activity_main.xml」内に記述されています。

<TextView
android:id="@+id/textView" ⇒ 画面要素固有のID
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="18sp"
tools:layout_editor_absoluteX="120dp"
tools:layout_editor_absoluteY="200dp" />

「android:id=””@+id/」以降が画面要素固有のIDで、IDは任意に指定することができます。

android:id="@+id/textView"

上記のイベント処理や「findViewById」はアプリ開発において使用頻度が高いと思われるので(私もまだまだ初心者ですので断定はできかねます)、覚えておいても損はないでしょう。

まとめ

今回はボタンクリック時のイベント実装について学びました。それらをまとめた内容は下記の通りになります。

・イベントとイベント処理
 イベントとは「ボタンをクリックする」、「画面をタッチする」などの特定の行動を指し、イベント処理とは「イベントによって呼び出される処理」のことを指します。

・イベント処理の実装
 イベント処理の実装は「actvity_main.xml」でイベント処理用の関数を設定し、「MainActivity.java」でイベント処理の中身を記述します。

・値の読み書き
 エディットテキストからの値の読み込みやテキストビューへの値の書き込みは「findViewById」を用いて行います。

android studioでは画面をタッチしたなど、複数のイベントが用意されています。準備ができ次第、このブログでも内容を公開したいと思いますので、その時はよろしくお願いします。

Androidアプリ開発 LinearLayout 3/3

公開日:2019年10月25日
更新日:2019年11月15日

目次

  1. 画面要素の位置調整
    1.1. 水平方向中央に表示
    1.2. 垂直方向中央に表示
    1.3. 画面中央に表示
  2. 画面要素を横に並べる(応用)
  3. 画面要素を縦に並べる(応用)

LinearLayoutの使用方法を3回に分けて説明します。1回目は「画面要素を横に並べる方法」、2回目は「画面要素を縦に並べる方法」、3回目は「応用」です。

このブログではLinearLayoutの「応用」について紹介します。

1. 画面要素の位置調整

この章では画面の水平方向中央、垂直方向中央、画面中央に要素を表示する方法について説明します。

1.1. 水平方向中央に表示

下図のように水平方向中央に並ぶ2つのボタン(ボタン1、ボタン2)の表示法について説明します。

水平方向中央

上図のコードは下記のようになります。※下記は一例です。

<LinearLayout
android:orientation="horizontal"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

LinearLayoutを入れ子にし、「weightSum」と「layout_weight」を使用してボタン要素の位置調整を行っています。下記で「weightSum」と「layout_weight」の簡単な説明を行います。

「weightSum」では表示割合の最大値を、「layout_weight」では表示割合の合計が最大値になるように設定します。

例えば、ボタン1とボタン2を1:1の割合で水平方向に表示させる場合、「weightSum」を10に設定すると、ボタン1の「layout_weight」を5に、ボタン2の「layout_weight」を5に設定する必要があります。

「weightSum」の構文は下記のようになります。

android:weightSum="10"

ここからはコードの中身について簡潔に説明します。

上位の「LinearLayout」で「weightSum」の値を設定します。

<LinearLayout
android:orientation="horizontal"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

  ・
  ・
  画面要素
  ・
  ・

</LinearLayout>

上位の「LinearLayout」の中には3つの「LinearLayout」が配置されています(下記参照)。これらは水平方向を分割するためのもので、1つ目と3つ目の「LinearLayout」が位置調整用、2つ目が画面要素の設定用となっており、位置調整用の「LinearLayout」の「layout_weight」の値を任意に変更するだけで、画面要素の位置調整が簡単にできます。

<LinearLayout
android:orientation="horizontal"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
    ・
    ・
    画面要素
    ・
    ・
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

画面要素(ボタン1、ボタン2)のコードに関しては以前説明しており、手を加えていないため省きます。

1.2. 垂直方向中央に表示

下図のように垂直方向中央に並ぶ2つのボタン(ボタン1、ボタン2)の表示法について説明します。

垂直方向中央

コードは下記のようになります。※下記は一例です。

<LinearLayout
android:orientation="vertical"
android:weightSum="10"
android:layout_width="wrap_content"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

コードの中身について簡潔に説明します。

上位の「LinearLayout」で「weightSum」の値を設定します。

<LinearLayout
android:orientation="vertical"
android:weightSum="10"
android:layout_width="wrap_content"
android:layout_height="match_parent">

  ・
  ・
  画面要素
  ・
  ・

</LinearLayout>

上位の「LinearLayout」の中には3つの「LinearLayout」が配置されています(下記参照)。これらは垂直方向を分割するためのもので、1つ目と3つ目の「LinearLayout」が位置調整用、2つ目が画面要素の設定用となっています。詳細は水平方向の場合と同じですので省きます。

<LinearLayout
android:orientation="vertical"
android:weightSum="10"
android:layout_width="wrap_content"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
    ・
    ・
    画面要素
    ・
    ・
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

画面要素(ボタン1、ボタン2)のコードに関しては以前説明しており、手を加えていないため省きます。

1.3. 画面中央に表示

下図のように画面中央に並ぶ2つのボタン(ボタン1、ボタン2)の表示法について説明します。

画面中央

コードは下記のようになります。※下記は一例です。

<LinearLayout
android:orientation="vertical"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />
</LinearLayout>

</LinearLayout>

</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

コードの中身について簡潔に説明します。

画面の垂直方向を3分割するため、下記のように「LinearLayout」の中に3つの「LinearLayout」を配置しています。入れ子の1つ目と3つ目の「LinearLayout」が位置調整用で、2つ目が画面要素の設定用です。

<LinearLayout
android:orientation="vertical"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    ・
    ・
    画面要素
    ・
    ・

</LinearLayout>

<LinearLayout
android:orientation="vertical"
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

次に入れ子の2つ目の「LinearLayout」の中身について説明します。

画面の水平方向を3分割するため、下記のように「LinearLayout」の中に3つの「LinearLayout」を配置しています。入れ子の1つ目と3つ目の「LinearLayout」が位置調整用で、2つ目が画面要素の設定用です。

<LinearLayout
android:orientation="horizontal"
android:weightSum="10"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_weight="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>

</LinearLayout>

上記のように「LinearLayout」、「weightSum」、「layout_weight」を組み合わせるだけで、自分の思う通りに自由自在に画面要素を配置することができます。

2. 画面要素を横に並べる(応用)

※随時更新

3. 画面要素を縦に並べる(応用)

※随時更新

Androidアプリ開発 LinearLayout 2/3

公開日:2019年10月23日
更新日:2019年11月15日

目次

  1. LinearLayoutについて
  2. 画面要素を縦に並べる

LinearLayoutの使用方法を3回に分けて説明します。1回目は「画面要素を横に並べる方法」、2回目は「画面要素を縦に並べる方法」、3回目は「応用」です。

ここでは「画面要素を縦に並べる方法」を紹介します。画面要素とはボタン、テキストビュー、エディットテキストなどのことです。

1. LinearLayoutについて

LinearLayoutとは画面のサイズに関係なく、相対的に画面要素を縦または横に並べる機能です。そのため、下記のような利点があります。

・画面のサイズ差による位置ずれの心配がなくなる
・思い通りのレイアウトができる
・様々な応用が期待できる

2. 画面要素を縦に並べる

下図のように2つのボタン(ボタン1、ボタン2)を縦に並べる方法を説明します。

LinearLayout縦 1

プログラムは下記のようになります。※プログラムは一例です。

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />

</LinearLayout>

次にプログラムの中身について説明します。

「LinearLayout」の構文内に画面要素を配置することで、画面を横または縦に並べることができます。

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent">

  ・
  ・
  画面要素
  ・
  ・

</LinearLayout>

画面要素を縦に並べる場合は「vertical」に設定します。

android:orientation="vertical"

画面要素(ボタン1、ボタン2)では、それぞれ「layout_height」と「layout_weight」の設定を行います。

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />

それぞれの値の設定は下記のようになります。

android:layout_height="0dp"
android:layout_weight="1"

「layout_weight」では画面に対する要素の表示割合を指定します。

・「1:1」の割合で表示させたい
 両方の「layout_weight」を「1」に設定する。

・「1:2」の割合で表示させたい
 一方の「layout_weight」を「1」に、他方の「layout_weight」を「2」に設定する。

上記の例では各ボタンが縦長に表示されていると思います。縦長の表示を改善したい場合は下記のように変更します。この時「android:layout_weight=”1″」は削除します。

android:layout_height="wrap_content"

上記のようにコード修正を行うと、ボタン1、ボタン2ともに縦長の表示が改善され、通常のボタン表示になります。

LinearLayout縦 2

次回はLinearLayoutの応用について説明します。

Androidアプリ開発 LinearLayout 1/3

公開日:2019年10月21日
更新日:2019年11月15日

目次

  1. LinearLayoutについて
  2. 画面要素を横に並べる

LinearLayoutの使用方法を3回に分けて説明します。1回目は「画面要素を横に並べる方法」、2回目は「画面要素を縦に並べる方法」、3回目は「応用」です。

ここでは「画面要素を横に並べる方法」を紹介します。画面要素とはボタン、テキストビュー、エディットテキストなどのことです。

1. LinearLayoutについて

LinearLayoutとは画面のサイズに関係なく、相対的に画面要素を縦または横に並べる機能です。そのため、下記のような利点があります。

・画面のサイズ差による位置ずれの心配がなくなる
・思い通りのレイアウトができる
・様々な応用が期待できる

2. 画面要素を横に並べる

下図のように2つのボタン(ボタン1、ボタン2)を横に並べる方法を説明します。

LinearLayout横 1

プログラムは下記のようになります。※プログラムは一例です。

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />

</LinearLayout>

次にプログラムの中身について説明します。

「LinearWeight」の構文内に画面要素を配置することにより、画面を横または縦に並べることができます。

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">

  ・
  ・
  画面要素
  ・
  ・


</LinearLayout>

画面要素を横に並べる場合は「horizontal」に設定します。

android:orientation="horizontal"

画面要素(ボタン1、ボタン2)では、それぞれ「layout_width」と「layout_weight」の設定を行います。

<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ボタン1"
tools:layout_editor_absoluteX="54dp"
tools:layout_editor_absoluteY="95dp" />

<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ボタン2"
tools:layout_editor_absoluteX="213dp"
tools:layout_editor_absoluteY="104dp" />

それぞれの値の設定は下記のようになります。

android:layout_width="0dp"
android:layout_weight="1"

「layout_weight」では画面に対する要素の表示割合を指定します。

・「1:1」の割合で表示させたい
 両方の「layout_weight」を「1」に設定する。

・「1:2」の割合で表示させたい
 一方の「layout_weight」を「1」に、他方の「layout_weight」を「2」に設定する。

次回は画面要素を縦に並べる方法について説明します。

Androidアプリ開発 背景画像

公開日:2019年10月21日
更新日:2019年11月15日

目次

  1. ImageViewによる方法
  2. activity_main.xmlによる方法
  3. 画像の反転

ここではAndroid Studioにおける画像表示と反転方法について説明します。

1. ImageViewによる方法

まずは前準備として任意の画像(jpgやpng)を右クリックし、コピーしてください。

画像表示 1

app/res/drawableを右クリックし、「Paste」を選択。

画像表示 2

app/res/drawableに画像が追加されているか確認。上記の例では「neko.jpg」ファイルが追加されています。

画像表示 3

paletteのwidgetsにある「ImageView」を任意の場所にドラッグ&ドロップしてください。

画像表示 4

赤枠の中にdrawableに追加したファイル名を記入してください。上記の例では「neko」になっています。

画像表示 5

表示する画像を変更したい場合は、AttributesのDeclared Attributesにある「srcCompat」に変更したい画像ファイル名を入力してください。⇒@drawable/変更したい画像ファイル名

画像表示 6

また、Textでも表示する画像を変更することができます。

app:srcCompat="@drawable/変更したい画像ファイル名"

2. activity_main.xmlによる方法

activity_main.xmlにはDesignに追加したボタンやエディットなどのコードが記述され、前章で画像表示に使用したImageViewのコードもここに記述されます。そのため、xml内に直接コードを記述しても同様の効果が得られます。自分がやりやすい方法で画面開発を進めてください。

app/res/drawableに画像を追加する方法は前章と同じですので、画像が追加されていると仮定して説明していきたいと思います。

画像表示

下記の文をText内の任意の場所に挿入します。上記の例ではデフォルトの構文内に挿入しています。

android:background="@drawable/表示したい画像ファイル名"

他にはLinearLayoutの構文内に記述する方法もありますが、状況に合わせ使用してください。

3. 画像の反転

画像の反転はオプションで任意に変更することができます。

画像反転

AttributesのAll Attributesにある「rotation」に任意の数値を入力。上記の例では90度回転させたいので「90」と入力しています。

Android Studio エミュレータ

公開日:2019年10月14日
更新日:2019年11月15日

目次

  1. プロジェクトの新規作成
  2. エミュレータのインストール
  3. エミュレータの起動

エミュレータのインストールからその起動方法について解説します。

1. プロジェクトの新規作成

プロジェクトを既に作成している方は2. エミュレータのインストールへ、プロジェクトを新規作成される方は下記の手順を参照ください。

new project 1

File→New→「New Project」をクリック。

new project 2

ここでは「Empty Activity」を選択し、「Next」をクリック。

new project 3

Nameに「TEST」を入力、Languageに「java」を選択し、「Finish」をクリック。

これでプロジェクトの新規作成は終わりです。

2. エミュレータのインストール

Android Studioでは任意のデバイスとAndroid バージョンの組み合わせをインストールできます。ここではデバイスがPixel 2、Android バージョンがAndroid 8.1のエミュレータをインストールします。

エミュレータ インストール 1

「Opne AVD Manager」をクリック。

エミュレータ インストール 2

「Create Virtual Device」をクリック。

エミュレータ インストール 3

ここではPhoneにある「Pixel 2」を選択し、「Next」をクリック。

エミュレータ インストール 4

ここでは上記のAPI Levelが27、TargetがAndroid 8.1の「Oreo Download」をクリック。

エミュレータ インストール 5

インストールが完了したら「Finish」をクリック。

エミュレータ インストール 6

API Levelが27、TargetがAndroid 8.1の「Oreo」を選択し、「Next」をクリック。

エミュレータ インストール 7

ここでは「Portrait」を選択し、「Finish」をクリック。Portraitは画面を縦長に使う場合、Landscapeは画面を横長に使う場合に選択すると良いと思います。

3. エミュレータの起動

ここでは画面に「テスト」と表示させる簡単なアプリを開発し、実際にエミュレータ上で動作させてみます。

エミュレータ起動 1

まずは画面を任意の大きさに拡大しましょう。

エミュレータ起動 2

「Hello World」を削除します。

エミュレータ起動 3

PalletにあるText→「TextView」を画面の任意の場所にドラッグします。

エミュレータ起動 4

TextViewが選択されていることを確認し、AttributesにあるDeclared Attributes→「text」に「テスト」と入力し、ENTERを押してください。

エミュレータ起動 5

上記のようにエミュレータ「Pixel 2 API 27」を選択し、三角印の実行ボタンを押下します。

エミュレータ起動 6

実行後にデバイスが出てきますので、画面に「テスト」が表示されていることを確認。

アプリの開発方法やjavaの使い方などに関しては、おいおいブログに書いていきたいと思います。

Android Studio インストール

公開日:2019年10月10日
更新日:2019年11月15日

目次

  1. JDKインストール
  2. Android Studioインストール

Android Studioの環境構築について説明します。

1. JDKインストール

JDKとはJava SE Development Kitの略で、JAVAでソフトウェア開発を行うために必要となる開発キットです。ダウンロードは下記のOracleのサイトで行います。

・JDKのダウンロード

JDKのダウンロード

JDKダウンロード 1

「Accept License Agreement」にチェックを入れ、PCの環境に合わせ「Windows x86」か「Windows x64」を選択します。
※Windows x86:32bit版のWindows。
※Windows x64:64bit版のWindows。

JDKダウンロード 2

JDKをダウンロードする前にOracleへのサインインを求められるので、アカウントを持っていない場合は新規で作成します。

ダウンロードができたら、下記の手順でインストールします。

・JDKのインストール

JDKインストール 1

「次」をクリック。

JDKインストール 2

「次」をクリック。

JDKインストール 3

「次」をクリック。

JDKインストール 4

「閉じる」をクリック。

2. Android Studioインストール

Android StudioとはAndroidアプリ開発用に作られた統合開発環境です。ダウンロードは下記のAndroid Studioのサイトで行います。

・Android Studioのダウンロード

Android Studioのダウンロード

Android Studioダウンロード

「DOWNLOAD ANDROID STUDIO」直下の情報を確認。上記はWindows 64bit版のダウンロードになります。上記の内容でよければそのままクリックを、そうでなければ「DOWNLOAD OPTIONS」をクリックし、Windows 32bit版、Mac、Linuxなどの中から選択します。

ダウンロードができたら、下記の手順でインストールします。

・Android Studioのインストール

Android Studioインストール 1

「Next」をクリック。

Android Studioインストール 2

チェックが入っているか確認し、「Next」をクリック。

Android Studioインストール 3

「Next」をクリック。

Android Studioインストール 4

「Install」をクリック。

Android Studioインストール 5

「Next」をクリック。

Android Studioインストール 6

すぐにAndroid Studioを起動したくない場合はチェックを外し、「Finish」をクリック。

Androidアプリ開発 きっかけ

公開日:2019年10月9日
更新日:2019年11月15日

目次

  1. アプリ作りのきっかけ
  2. 何かを始めるときに必要なこと
  3. 今後のブログ更新について

ここでは「アプリ作りを始めたきっかけ」や「何か新しいことを始めるときの心構え」などを紹介します。

1. アプリ作りのきっかけ

 今までは与えられたことをただ実行するだけでしたが、2019年に入り、今までと同じ考えでは成長できないし、将来生き残れないと考えるようになりました。その結果、自分の考えや思いを形にしたいと考え、その第1弾として神社仏閣のブログを、第2弾としてAndroidアプリ開発を行っております。

2. 何かを始めるときに必要なこと

 現在、私はブログやAndroidアプリ開発を行っていますが、思い立った時にすぐ行動できない性格なので、取り掛かるまでブログに3ヶ月、アプリ開発に4ヵ月と多くの時間を無駄にしました。その時に私が「こうしておいたらもっと早く取り組めたのにな」とか、「こうしておいたらもっと簡単に始められたのにな」を、私の主観ですが箇条書きでまとめてみました(3ヵ条)。参考にしていただけると幸いです。

~何かを始めるときの3ヵ条(主観)~

①取り敢えずやってみる
②最初から完璧にこなそうとしない
③まずあるものから始めてみる

順に説明していきたいと思います。

 ①番ですが、私の例でいいますと、「少しでもいいのでブログを書いてみる」とか、「簡単なアプリを作ってみる」など、簡単なことをまず最初にやってみることです。
 主観ですが良くない例だと、アプリ開発において必要な言語を一から勉強しようとすると、「一から言語を勉強するのは大変・めんどくさい」、「新しい言語の習得に時間を要してしまい、せっかくやる気になっていた気持ちがなくなった」など、途中で挫折するかもしれません。ですので取り敢えず、アプリ開発を始めて、わからないところは都度調べた方が効率が良いと思います。

 ②番ですが、私の例でいいますと、「神社仏閣の写真や情報など足りないものがあっても、まずはブログを書く」とか、「アプリのコードに凝り過ぎない」など、手元にある情報で必要なものを作ってみることです。
 主観ですが良くない例だと、アプリ開発において画面を作成する場合、ボタンやエディットテキストなどの大きさ・配置・色にこだわり過ぎて「アプリ開発ってこんなにしんどいんや」、「アプリ開発って思い通りにいかないな」など、こだわり過ぎたせいでアプリ開発が嫌になってしまうかもしれません。ですので細かい所はこだわらず、ある程度のところで妥協点を見つけ、末永く開発できるようにしましょう。

 ③番ですが、ブログを書くにもAndroidアプリを開発するにも、手持ちのパソコンやインターネットがあればできます。最初から開発するために最新鋭のパソコン・スマートホンや様々な書籍などを買おうとすると決して少なくない費用が必要になります。結果、「買っただけで満足したり」、「こんなに高いんだったらやめよう」など、開発する気持ちが削がれてしまいます。ですので取り敢えず、あるものから始めて、必要に応じて買い増ししましょう。

 最後に、これらを習慣化できれば苦も無く作業が継続できるはずです。あまり習慣化にこだわるのもしんどいなと思っている方々は、無理をしない範囲でやっていただければ大丈夫だと思います。

3. 今後のブログ更新について

今後の進め方・方針について説明します。

①Android Studioの環境構築
②Android Studioの使い方
③Androidアプリ開発について
④javaについて
➄開発したアプリの紹介

ざっくりですが、今後は上記5点をこのブログで紹介していきたいと思います。まずは①~③について公開しますので、見ていただけると嬉しいです。