★★★☆☆ – ページ 3 – ハコニワデザイン

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

2015年12月28日2016年1月5日たんたむ

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

動画リスト

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

縦横画面対応

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

Designタブ

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

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: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>

15分で作る？【バイブレーション④】～チェック版～

2015年11月18日2015年12月31日たんたむ

バイブレーションの最終回です。
本体のバイブレーション機能をチェックし、有ればバイブを鳴らし、無ければトーストを表示します。

動画リスト

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

AndroidManifest.xml（完成）

前回と全く一緒ですので変更は不要です。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.test.vibration">

    <uses-permission android:name="android.permission.VIBRATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml（完成）

前回と全く一緒ですので変更は不要です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    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">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="START"
        android:textSize="50dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="STOP"
        android:textSize="50dp" />
    
</LinearLayout>

MainActivity.java（完成）

本体にバイブレーション機能がある場合はバイブレーションが鳴り、無い場合はトーストを表示します。
※ エミュレーターではトーストが表示される様子

package com.test.vibration;

import android.content.Context;
import android.os.Vibrator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

    // STARTボタン    //////////////////////////////////
    public void onStart(View v) {
       // バイブレーターが存在するか？
       if(((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).hasVibrator()) {
           // バイブレーションスタート（1秒：1000ミリ秒）
           ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE))
                   .vibrate(new long[]{500, 200, 500, 2000}, 0);
       } else {
           Toast.makeText(this, "起動出来ません", Toast.LENGTH_SHORT).show();
       }
    }
    // STOPボタン    //////////////////////////////////
    public void onStop(View v) {
        // キャンセル
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }

    // 強制停止処理   //////////////////////////////////
    @Override
    protected void onPause() {
        super.onPause();
        // キャンセル処理
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }
}

15分で作る？【バイブレーション③】～リズム版～

2015年11月18日2015年12月31日たんたむ

バイブレーションをアレンジします。
複雑なリズムを付けたり、繰り返しを指定することが出来ます。

動画リスト

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

AndroidManifest.xml（完成）

前回と全く一緒ですので変更は不要です。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.test.vibration">

    <uses-permission android:name="android.permission.VIBRATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml（完成）

前回と全く一緒ですので変更は不要です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    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">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="START"
        android:textSize="50dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="STOP"
        android:textSize="50dp" />
    
</LinearLayout>

MainActivity.java（完成）

バイブレーションにリズムをつけます。

package com.test.vibration;

import android.content.Context;
import android.os.Vibrator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    // STARTボタン    //////////////////////////////////
    public void onStart(View v) {
        // バイブスタート（0.5秒停止、0.2秒鳴る、0.5秒停止、2秒鳴る、を繰り返す）
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE))
                .vibrate( new long[]{500,200, 500,2000}, 0 );
    }

    // STOPボタン    //////////////////////////////////
    public void onStop(View v) {
        // キャンセル処理
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }

    // 強制停止処理   //////////////////////////////////
    @Override
    protected void onPause() {
        super.onPause();
        // キャンセル処理
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }
}

MainActivity.java（アレンジ版）

バイブレーションにリズムをつけます。

package com.test.vibration;

import android.content.Context;
import android.os.Vibrator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    // STARTボタン    //////////////////////////////////
    public void onStart(View v) {
        // バイブスタート（0.1秒停止、0.1秒鳴る、を3回繰り返し、5秒鳴って終了する）
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE))
            .vibrate( new long[]{100,100, 100,100, 100,100, 100,5000}, -1 );
    }

    // STOPボタン    //////////////////////////////////
    public void onStop(View v) {
        // キャンセル処理
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }

    // 強制停止処理   //////////////////////////////////
    @Override
    protected void onPause() {
        super.onPause();
        // キャンセル処理
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();
    }
}

動画の内容

以前公開した【アニメストップウォッチ】に時間による変化を追加します。

具体的には60秒以降にはイラストを変えて、にゃんこが慌てます。

難易度

難易度：★★★☆☆

コピペでの再現は可能
Java初歩の知識でアレンジ可能

動画では「簡易的な解説」ですませ、皆さんの「PCで再現」を目指します。
理解やアレンジには、相当なスキルが必要ですので「RPGで学ぶ」や市販テキストの学習をオススメします。

使用素材

以下の画像を追加します。
クリック後の画像を保存してください。

activity_main.xml（完成）

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <Chronometer
        android:id="@+id/c"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStart"
        android:text="スタート"
        android:textSize="40sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onStop"
        android:text="ストップ"
        android:textSize="40sp" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/cat0" />

</LinearLayout>

MainActivity.java（完成）

少々ややこしいので、上から順に入力+解説していきます。


package com.test.stopwatch;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Chronometer;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements Chronometer.OnChronometerTickListener {

    int x = 0;  // 表示回数カウント

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

    // スタート //////////////////////
    public void onStart(View v) {
        ((Chronometer)findViewById(R.id.c)).setBase(SystemClock.elapsedRealtime());
        ((Chronometer)findViewById(R.id.c)).start();
        ((Chronometer)findViewById(R.id.c)).setOnChronometerTickListener(this);
    }

    // ストップ ///////////////////////
    public void onStop(View v) {
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }

    // 定期処理（約1秒毎）//////////////////////
    @Override
    public void onChronometerTick(Chronometer chronometer) {

                x++;    // 表示回数カウントを+1

        // 表示タイム = ( 現在時刻 - アプリ起動時刻 ) / 1000
        long time = (SystemClock.elapsedRealtime() - chronometer.getBase()) / 1000;

        if( time < 60 ) {       // 60秒未満？
            if (x % 2 == 0) {   // 偶数？
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
            }
        } else {
            if (x % 2 == 0) { 
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat3);
            } else {
                ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat4);
            }
        }
    }
}

バックミュージックの再生

2015年1月20日2015年2月19日たんたむ

Android アプリ開発の学習動画で、バックミュージックの再生を解説しているページです。
この動画は、以前公開した「バックミュージックとアクティビティ」の新バージョン（2015/01/20）になります。

ゲーム等での「バックミュージックを流す」を解説した動画です。

難易度：★★★☆☆ （未経験者も再現は可能・理解と応用は難しい）
予備知識　：理解にはメソッドの理解が必要です。
注　　意　：開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
補　　足　：2015/01/20現在、Android StudioとEclipseの両方で対応。

【動画リスト】

・1/5 はじめに
http://youtu.be/kcFvcMIFDyQ

・2/5 新規作成と音楽ファイルの読み込み
http://youtu.be/LvYUozNJZrM

・3/5 とりあえず再生してみる
http://youtu.be/fdE3Bkl1_Qc

・4/5 アクティビティのライフサイクル
http://youtu.be/q0t6FFCdJUQ

・5/5 Android Studio
http://youtu.be/uxcCOPe_VAA

新規アプリケーション作成
音楽ファイルの準備　　フリーBGM・音楽素材 MusMus
プログラミング
- 再生の準備
- アクティビティのライフサイクルとは？
- アプリ起動時に再生
- ホームボタンで一時停止
- 戻るボタンで終了（メモリの解放）
Android Studioで復習

package ～ パッケージ略 ～;

import android.media.MediaPlayer;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    // 再生の準備
    MediaPlayer p;

    // アプリ起動時に１回だけ実行
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 音楽の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.sound);
        // 連続再生設定
        p.setLooping(true);
    }

    // 画面が表示されるたびに実行
    @Override
    protected void onResume() {
        super.onResume();
        p.start(); // 再生
    }

    // 画面が非表示に実行
    @Override
    protected void onPause() {
        super.onPause();
        p.pause(); // 一時停止
    }

    // アプリ終了時に実行
    @Override
    protected void onDestroy() {
        super.onDestroy();
        p.release();// メモリの解放
        p = null; // 音楽プレーヤーを破棄
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        ～ 略 ～
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ～ 略 ～
    }
}

15分で作る（？）たまごアプリ

2014年4月24日2015年2月19日たんたむ

プログラミング未経験者対象の【 Androidアプリ作成動画】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

難易度　：★★★☆☆ （未経験者にもあるていど理解、再現できるレベル）

画面に表示されるたまごをクリックすると、たまごにヒビが入り、たまごからヒヨコがうまれるアプリです。
このアプリはヒヨコが生まれるだけですが、クリックの仕方で別の動物が生まれたり、スピードを競うなど、ゲーム性を持たせることができます。

新規アプリケーション作成
画像の準備
レイアウト作成　（たまごの表示率を設定）
クリック処理
カウントダウン（条件分析）
アニメーション処理

【レイアウトファイル】

rev > layout > fragment_main.xml

<ImageView

android:id=”@+id/imageView1″
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_weight=”0.3″
android:onClick=”onEgg”
android:src=”@drawable/egg0″ />

</LinearLayout>

【アニメーションリソース】

rev > anim > tap.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<set xmlns:android=”http://schemas.android.com/apk/res/android” >

</set>

【 Javaファイル】

MainActivity.java

package com.example.eggtap3;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

// 卵が割れる数
int eggCount =30;

public void onEgg( View v){

// 画像のリモコン
ImageView iv = (ImageView)findViewById(R.id.imageView1);

// カウントダウン
eggCount–;

// 画像を変える+条件分析
if( eggCount<20) iv.setImageResource(R.drawable.egg1);
if( eggCount<10) iv.setImageResource(R.drawable.egg2);
if( eggCount<5) iv.setImageResource(R.drawable.egg3);
if( eggCount<0) iv.setImageResource(R.drawable.egg4);

// アニメーション処理
iv.startAnimation(AnimationUtils.loadAnimation(this, R.anim.tap));

}

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment())
.commit();

}

～以下略～

}

15分で作る（？）占いアプリ

2014年4月22日2015年2月19日たんたむ

プログラミング未経験者対象の【 Androidアプリ作成動画】です。

この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
未経験者の方が参考にしてもらえると幸いです。

【動画紹介】

シンプルな動物占いアプリです。
ボタンをクリックすることで、画像とテキスト（文字）をランダムに表示します。

15分での作成と解説を目指しましたが、大幅に時間オーバーしました。(m_m)

説明付きはきついですね・・・
解説は入れていますが、この動画だけでの「アプリ作成の理解」を前提をしていません。
あくまでも、他の動画や市販テキストを合わせての学習が前提です。
続きを読む →

15分で作るカウンターアプリ

2014年4月11日2015年2月19日たんたむ

カウンターアプリの作り方を紹介している動画です。

新規作成から15分で完成していますので、解説等は簡単です。
真似してもらうと、完成できるハズですが、開発環境のバージョン等の違いでうまく行かない人も多いと思います。

（ SDK4.X以降では大きく違う為）
細かい解説は別の動画で紹介していますので、うまく行かない方はそちらも参考にしてみてください。

動画リスト

縦横画面対応

Designタブ

activity_main.xml

動画リスト

AndroidManifest.xml（完成）

activity_main.xml（完成）

MainActivity.java（完成）

動画リスト

AndroidManifest.xml（完成）

activity_main.xml（完成）

MainActivity.java（完成）

MainActivity.java（アレンジ版）

動画の内容

難易度

使用素材

activity_main.xml（完成）

MainActivity.java（完成）

【 レイアウトファイル 】

【 アニメーションリソース 】

【 Javaファイル 】

【 動画紹介 】

【レイアウトファイル】

【アニメーションリソース】

【 Javaファイル】

【動画紹介】