Android Studio入門

Android プログラミング【 Preference 】 ~ 保存型カウンター ~

preferences Android カウンターの作成

アプリ開発初心者用の学習動画です。

この動画はpreferences(プリファレンス・データの保存)を使ったカウンターの作成動画です。

前回と前々回を組み合わせたアプリになります。
【 Preference 】 ~ データ保存 ~
【 タッチイベント 】 ~ カウンターの作成 ~

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyCount
Company Domain test.com
Package name com.test.mycount

Android アプリ サンプル カウンター

サンプルアプリ カウンターactivity_main.xml-(完成)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    tools:context="com.test.mycount.MainActivity">

    <TextView
        android:id="@+id/count"
        android:textSize="60sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>
package com.test.mycount;

import android.content.SharedPreferences;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // カウントデータ
    int count = 0;

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

        // データの読込
        SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);
        count = preferences.getInt("count" , 0);
        ((TextView)findViewById(R.id.count)).setText("" + count);
    }


    ///////////////////////////////////////////////////
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                // カウントの加算
                count++;
                ((TextView)findViewById(R.id.count)).setText("" + count);
        }
        return super.onTouchEvent(event);
    }


    ///////////////////////////////////////////////////
    @Override
    protected void onPause() {
        super.onPause();

        // データの保存
        SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);
        SharedPreferences.Editor editor = preferences.edit();
        editor.putInt("count",count);
        editor.commit();
    }
}
Android Studio入門

Android プログラミング【 Preference 】 ~ データ保存 ~

preferences Android データの保存

アプリ開発初心者用の学習動画です。

この動画はpreferences(プリファレンス・データの保存)の基礎学習です。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyPreference
Company Domain test.com
Package name com.test.mypreference

Preference Android タイトル

以下を適切な箇所にコピペすると、数値を保存できます。


// ファイルの準備
SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

// データの保存
SharedPreferences.Editor editor = preferences.edit();
editor.putInt("count",7);
editor.commit();

以下を適切な場所にコピペすると、数値を読み込みます。

// ファイルの準備
SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

// データの読込
int count = preferences.getInt("count" , 0);

データ保存ーactivity_main.xml-(完成)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    tools:context="com.test.mypreference.MainActivity">

    <TextView
        android:id="@+id/count"
        android:textSize="60sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

データ保存ーMainActivity.java(完成)

package com.test.mypreference;

import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        // ファイルの準備
        SharedPreferences preferences = getSharedPreferences("game_data",MODE_PRIVATE);

        // データの保存
        SharedPreferences.Editor editor = preferences.edit();
        editor.putInt("count",7);
        editor.commit();

        // データの読込
        int count = preferences.getInt("count" , 0);

        // データ表示
        ((TextView)findViewById(R.id.count)).setText("" + count);

    }
}
Android Studio入門

Android プログラミング【 タッチイベント 】 ~ カウンターの作成 ~

アンドロイド 開発入門 カウンター

アプリ開発初心者用の学習動画です。

タッチイベント(onTouchEvent)を使ったカウンターアプリを作成します。

プロジェクト、カンパニードメイン、パッケージネームを同じにするとコピペエラーが減ります。

Application name MyCount
Company Domain test.com
Package name com.test.mycount

Android アプリ サンプル カウンター

サンプルアプリ カウンターactivity_main.xml-(完成)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:gravity="center"
    tools:context="com.test.mycount.MainActivity">

    <TextView
        android:id="@+id/count"
        android:textSize="60sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

タッチイベント--~-カウンターの作成-~

package com.test.mycount;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // カウントデータ
    int count = 0;

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

        ((TextView)findViewById(R.id.count)).setText("0");
    }


    ///////////////////////////////////////////////////
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                // カウントの加算
                count++;
                ((TextView)findViewById(R.id.count)).setText("" + count);
        }
        return super.onTouchEvent(event);
    }

}

Android Studio入門

Android Studio 入門【 画面分割④ 】~複数レイアウト~

Android-【画面分割】複数レイアウト-768
画面分割の①~③を組み合わせて、複雑なレイアウトを目指します。
RPG画面をモデルにしていますが、クイズ画面、メニュー画面など幅広く応用できます。

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

画面が縦でも横でもそれなりに見える作りを目指しました。

縦横画面対応

レイアウトと画像の順番、配置にご注意してください。

Android レイアウト デザインタブ解説


<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/back" />

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/m0" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="fitEnd"
                android:src="@drawable/p0" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="fitEnd"
                android:src="@drawable/p1" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="fitEnd"
                android:src="@drawable/p2" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="fitEnd"
                android:src="@drawable/p3" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>


Android Studio入門

Android Studio 入門【 画面分割③ 】~下揃え~

Android-【画面分割】 下揃え 768

画面下部にキャラクター(画像)を並べるレイアウトです。
もちろん、アイコンやメニューを並べることも可能です。

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

画面が縦でも横でもそれなりに見える作りを目指しました。

Android レイアウト 縦横画面対応

レイアウトと画像の順番、配置にご注意してください。

Android Studio デザインタブ

画面下部に画像を配置します。
横画面、縦画面でも比率を守って表示されると思います。

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/back" />

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

        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p0"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             />

        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <ImageView
            android:scaleType="fitEnd"
            android:layout_weight="1"
            android:src="@drawable/p3"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>


</RelativeLayout>

Android レイアウト【XML解説】

Android Studio入門

Android Studio 入門【 画面分割② 】~比率で配置~

Android-【画面分割】比率で配置-768

画像の幅や高さを比率で配置ます。
具体的には「画面の3割」や「2対1」などで配置できます。

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

前回の【 画面分割① 】~均等分割~ とほぼ同じですが、以下を変更しています。


<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/back" />

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:src="@drawable/m0" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/p0" />
    </LinearLayout>

</RelativeLayout>

アンドロイド XML図解2

Android Studio入門

Android Studio 入門【 画面分割① 】~均等分割~

Android-【画面分割】均等分割-768

画像を均等に並べる方法です。
縦画面でも横画面でも対応できます。

この動画はシリーズ物です。以下の順にご覧ください。

  1. 【 画面分割① 】~均等分割~
  2. 【 画面分割② 】~比率で配置~
  3. 【 画面分割③ 】~下揃え~
  4. 【 画面分割④ 】~複数レイアウト~

画面が縦でも横でもそれなりに見える作りを目指します。

Nexus4 Nexus5 Nexus9 比較

RPG画面 使用素材 モンスター
m0:モンスター
RPG画面 使用素材 プレーヤー
p0:プレーヤー
RPG画面 使用素材 ヒロイン
p1:ヒロイン
RPG画面 使用素材 武器屋
p2:武器屋
RPG画面 使用素材 雑貨屋
p3:雑貨屋
RPG画面使用素材 背景
back:背景

レイアウトや画像の並びを確認しておきます。

android Studio デザインタブ

高さを均等で配置しています。

<?xml version="1.0" encoding="utf-8"?>
<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="com.test.rpggame.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/back" />

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/m0" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/p0" />
    </LinearLayout>

</RelativeLayout>

Android 画面分割 【XML図解】

Android Studio入門

Android Studio 入門【 HorizontalScrollView 】写真の横スクロール

Android Studio 入門【スクロールビュー】写真 768

写真を横スクロールさせる方法です。
前回のScrollViewの復習になりますので、解説はほぼ省いています。

教材のサンプル写真です。
以下の素材サイト様からお借りしています。

写真素材ぱくたそ https://www.pakutaso.com

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・ファイルサイズが大きすぎるとエラーが出る場合があります。

ScrollView【写真のスクロール】
i1
ScrollView【写真のスクロール】
i2
ScrollView【写真のスクロール】
i3
ScrollView【写真のスクロール】
i4
ScrollView【写真のスクロール】
i5
ScrollView【写真のスクロール】
i6
ScrollView【写真のスクロール】
i7
ScrollView【写真のスクロール】
i8

ScrollView【写真のスクロール】
i9
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i1" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i2" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i3" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/i4" />
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>


Android Studio入門

Android Studio 入門【 ScrollView 】ボタンの縦スクロール

Android Studio【ScrollView】

写真のギャラリーや、画面からはみ出すメニュー等を表示させる「ScrollView(スクロールビュー)」の使用方法です。
シンプルに解説したいので、縦スクロールのみで解説させてもらいます。

LayoutとViewの重なりに注意してください。

Layout → SucroseView → Layout → ボタンなどのViewの順に重なっています。

LayoutとViewの重なりに注意!!

wrap_contentだとボタンの上でフリックする必要があります。

注意点【match_parent】

ボタンを縦に並べたレイアウトです。

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">


    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button13" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button14" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button15" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button16" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button17" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button18" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button19" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>