Android Studio入門

15分で作る? 【バイブレーション②】~ 停止処理 ~

Android Studio 入門【停止処理】タイトル768

バイブレーションの停止処理を追加します。
通常の停止処理だけでなく、トラブル時の対応も追加しています。

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

  1. 【バイブレーション①】~ 基礎編 ~
  2. 【バイブレーション②】~ 停止処理 ~
  3. 【バイブレーション③】~ リズム版 ~
  4. 【バイブレーション④】~ チェック版 ~

バイブレーションの停止もとても簡単です。
以下の1行を適切な場所に張付けるだけで停止することが出来ます。

((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).cancel();

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

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

画面中央にボタンを配置します。
バイブレーションのスタートボタンになります。

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

ボタンクリック時にバイブレーションが鳴ります。
本体の「バイブレーション有無」はチェックしていません。

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) {
        // バイブレーションスタート(1秒:1000ミリ秒)
        ((Vibrator) getSystemService(Context.VIBRATOR_SERVICE)).vibrate(10000);
    }

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


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

Android Studio入門

15分で作る?【 アニメストップウォッチ 】~パラパラアニメ~

Android 開発 【ストップウォッチ2】1367

以前公開した【 簡易ストップウォッチ 】にパラパラアニメを連動させる方法です。

難易度:★★★★☆
・コピペでの再現は可能
・詳細の理解やアレンジは難しい

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

Android アプリ【タイトル素材】
cat0
Android アプリ【パラパラアニメ素材2】
cat2
Android アプリ【パラパラアニメ素材1】
cat1
<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>
package com.hakoniwadesign.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  {

    @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();

        // 画像変更
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
    }

    // ストップ
    public void onStop(View v) {
        ((Chronometer)findViewById(R.id.c)).stop();
        ((ImageView)findViewById(R.id.iv)).setImageResource(R.drawable.cat0);
    }
}
package com.hakoniwadesign.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 {

    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();

        // 条件分析
        x++;    // xを+1させる
        if( x % 2 ==0 ) {   // 偶数ですか?
            // YESの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
        }else {
            // NOの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
        }
    }

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

package com.hakoniwadesign.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++;    // xを+1させる
        if( x % 2 ==0 ) {   // 偶数ですか?
            // YESの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat1);
        }else {
            // NOの場合
            ((ImageView) findViewById(R.id.iv)).setImageResource(R.drawable.cat2);
        }
    }
}
動画で学ぶ、Androidアプリの作り方

簡易ミュージックアプリ

アンドロイドアプリ作成の「複数のバックミュージック再生」を解説しているページです。
アンドロイドアプリの作り方「簡易ミュージックアプリ」
  • 内  容 :複数曲の再生と停止 「バックミュージックの再生」の続編
  • 難 易 度 :★★★★☆ ( 未経験者の理解、応用は難しいので、再現できるを目指す )
  • 予備知識 :変数、メソッド、IF関数、IDの理解、XML
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/02/11現在、Android StudioとEclipseの両方で対応。
  1. はじめに → YouTube
  2. 素材の用意 → YouTube
  3. レイアウト作成 → YouTube
  4. 画像の変更 → YouTube
  5. 1曲の再生と停止 → YouTube
  6. 複数曲の再生と停止 → YouTube
  7. Android Studioで復習 → YouTube
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz
jazz(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock
lock(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops
pops (停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz2
jazz2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock2
lock2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops2
pops2 (再生中)

利用サイト様 :Music is VFR

mp3ファイルを3曲用意してください。
極端に長い曲、短い曲、容量の大きい曲以外でしたら問題ありません。
フォルダ名、ファイル名は全て小文字で以下と全く同じにしてください。

  • raw (フォルダ)
    • jazz.mp3
    • lock.mp3
    • pops.mp3
アンドロイドアプリの作り方-【-簡易ミュージックアプリ-】-保存場所
保存場所

※ ファイル名、フォルダ名は完全に一致してください。1文字でも違うとエラーです。

アプリ名[Eclipseの場合]
エクリプスの場合

アプリ名[アンドロイドスタジオの場合]
アンドロイド スタジオの場合
<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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pops"
        android:src="@drawable/pops"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:onClick="pops"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lock"
        android:src="@drawable/lock"
        android:layout_weight="1"
        android:onClick="lock"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/jazz"
        android:layout_gravity="center_vertical"
        android:src="@drawable/jazz"
        android:layout_weight="1"
        android:onClick="jazz"
        android:scaleType="centerCrop" />

</LinearLayout>

XMLの解説図です。詳しくは動画をご覧ください。

アンドロイドアプリの作り方【ミュージックアプリ】XML解説
XML解説
package com.test.soundtest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

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

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }
}

注意点!!

サンプルを適切にコピペすることで動作しますが・・・・意外と難しいです。

1文字違い、1行違うだけでアウトです。
以下を意識しながら確してください。

  • 記載場所 : {}や;より前か後ろか?
  • 文字の違い : 大文字と小文字 、全角と半角
  • コピー範囲  : 最後の;が入っているか?
  • ファイル名  : ファイル名、フォルダ名が1文字でもちがうと正常に動作しません
package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

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

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

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

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}

package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

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

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

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

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }
        p = MediaPlayer.create(getApplicationContext(), R.raw.lock);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }

        p = MediaPlayer.create(getApplicationContext(), R.raw.jazz);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}
動画で学ぶ、Androidアプリの作り方

オプションメニューの利用

Android-アプリ入門-オプションメニューの利用

Android アプリ開発の【オプションメニューの利用】を解説しているページです。

【 動画リスト 】

アプリ開発 オプションメニューの利用 完成図
完成図

オプションメニューを押したら連動した画像が表示されます。

難易度:★★★★☆ ( 未経験者には理解も利用も困難 )
補 足:Android StudioとEclipseで確認済み
補 足:開発バージョンが違うと正常に動かない場合があります。

【 予備知識 】

以下の予備知識が必要です。

  • XML
  • 変数
  • メソッド
  • if
  • id

【 流れ 】

  1. 新規アプリ作成
  2. 画像の表示 (activity_main.xml)
  3. メニューを押したら画像が変わる (MainActivity.java)
  4. メニューにアイテムを追加する (menu_main.xml)
  5. メニューアイテムに合わせて画像を変える (MainActivity.java)
  6. Eclipseで復習

動画で学ぶスマフォアプリ_使用素材

※ 以下をパソコンの中に保存してください。

オプションメニューの利用 エビ
エビ
オプションメニューの利用 イワシ
イワシ
オプションメニューの利用 カメ
カメ
オプションメニューの利用 シャチ
シャチ

activity_main.xml-(レイアウト)


<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/image_syati" />

</RelativeLayout>

ImageView図解

menu_main.xml オプションメニュー


<menu 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"
    tools:context=".MainActivity">

    <item
        android:id="@+id/iwasi"
        android:title="イワシ"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item
        android:id="@+id/ebi"
        android:title="エビ"
        android:orderInCategory="200"
        app:showAsAction="never" />

    <item
        android:id="@+id/kame"
        android:title="カメ"
        android:orderInCategory="300"
        app:showAsAction="never" />

    <item
        android:id="@+id/syati"
        android:title="シャチ"
        android:orderInCategory="400"
        app:showAsAction="never" />

</menu>

Android-オプションメニュー図解

MainActivity.java (プログラム)

package com.text.menutest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;     // 3・インポート必要

public class MainActivity extends ActionBarActivity {

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


     // 4・オプションメニューの作成
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 4・res → menu → menu_main.xml をメニューに設定
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    // 3・オプションメニューが押されたら
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        // 3・画像変更の準備
        ImageView iv = (ImageView)findViewById(R.id.imageView);
        // 3・イワシの画像に変更(説明用:後で削除)
        iv.setImageResource(R.drawable.image_iwasi);

        // 5・メニューの押されたアイテムidを取得
        int id = item.getItemId();

        // id iwasi(イワシ)が押されたら
        if (id == R.id.iwasi) {
            // イワシの画像に変更(本番)
            iv.setImageResource(R.drawable.image_iwasi);
            // 正常終了
            return true;
        }

        // id ebi(エビ)が押されたら
        if (id == R.id.ebi) {
            // エビの画像に変更
            iv.setImageResource(R.drawable.image_ebi);
            return true;
        }

        // id kame(カメ)が押されたら
        if (id == R.id.kame) {
            // カメの画像に変更
            iv.setImageResource(R.drawable.image_kame);
            return true;
        }

        // シャチは非掲載です。挑戦してみてくださいね!

        return super.onOptionsItemSelected(item);
    }
}

動画で学ぶ、Androidアプリの作り方

SeekBar(シークバー)の利用

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
 
未経験者を対象にして、できる限り分かりやすく解説しているつもりですが、プログラミングスキルや開発環境によって理解出来なかったり、再現出来ない時もあります。

SeekBarの利用_YouTubeアイコン

 

SeekBarの利用_学習内容
この動画は「SeekBar(シークバー)を使って背景色を変更する」を解説したものです。
 
難易度 :★★★★☆ ( 未経験者には理解も利用も困難で「再現出来れば十分」なレベル )
 
SeekBarを本格的に理解するのはオブジェクト指向を深く理解できてないと厳しいと思います。

残念ながら、初心者の方は「理解より再現(自分のパソコンで再現させる)」を目指してください。
不思議な物で、分からずに体験していると、学習が楽になりますので、是非2回は再現してみてください。
 
 
title_動画で学ぶアプリ作成_作成の流れ

  • 新規アプリケーション作成
  • 背景色の変更
  • SeekBerを配置
  • SeekBerでの背景色の変更
  • 復習作成( 同じ物をもう一度 )

 
 
SeekBarの利用_ソース

 

1・背景色の変更(前置き)

  • RelativeLayoutにIDを付ける
  • TextViewを削除する
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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="com.example.test1.MainActivity" >

</RelativeLayout>

 

・setBackgroundColorで背景色を付ける (MainActivity.java)

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        // この段階でエラーが出る人はバージョンUPが必要と思われます。( 2014/09/10 現在 )
    }

// ~ 以下略 (変更しません)~

SeekBarの利用_(RelativeLayout)findViewById

SeekBarの利用_setBackgroundColor(Color.rgb(255,-0,-0));


2・SeekBarの配置

・RelativeLayoutにIDを付ける (activity_main.xml)

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rLayout"
    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="com.example.test1.MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:max="255" />

</RelativeLayout>

 

 


3-1・バーを変更したときの処理を登録する (1/3)

・setOnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
        sb.setOnSeekBarChangeListener(l);            // エラーが出ます
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_sb.setOnSeekBarChangeListener(l);
 
 


3-2・バーを変更したときの処理を登録する (2/3)

・OnSeekBarChangeListenerの設定 ( MainActivity.java )

package com.example.test1;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;


public class MainActivity extends ActionBarActivity {

    // オンクリエイト( 画面表示直前に実行される )
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /************************************
         * 背景色の変更(前置き)
         ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(255, 0, 0));
        
        /************************************
         * シークバーの利用
         ***********************************/
        SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
//      sb.setBackgroundColor(Color.rgb(0, 0, 255));
        sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
                @Override
                public void onStopTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onStartTrackingTouch(SeekBar seekBar) {
                        // TODO Auto-generated method stub
				
                }
			
                @Override
                public void onProgressChanged(SeekBar seekBar, int progress,
                        boolean fromUser) {
                        // TODO Auto-generated method stub
				
                }
        });
        // ***ここまで*****************************
    }
// ~ 以下略 (変更しません)~

SeekBarの利用_イベントリスナー
 
 


3-3・バーを変更したときの処理を登録する (3/3)

  • 背景色変更の処理を移動する。
  • 赤色の変数をpに統一しています。

・ ( MainActivity.java )

/************************************
* シークバーの利用
***********************************/
SeekBar sb =(SeekBar)findViewById(R.id.seekBar1);
sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
			
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // タッチを離した時の処理を記載
    }
			
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // タッチした時の処理を記載
    }
			
    @Override
    public void onProgressChanged(SeekBar seekBar, int p, boolean fromUser) {
        // 値が変化する度に実行される
				
        /************************************
        * 背景色の変更
        ***********************************/
        RelativeLayout rl =(RelativeLayout)findViewById(R.id.rLayout);
        rl.setBackgroundColor(Color.rgb(p, 0, 0));
    }
});
// ***ここまで*****************************
Androidアプリの作り方「再生ボタンの設置」

音楽の再生ボタンを設置する

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
動作を保証する物で無く、未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

ゲーム等での「音楽の再生ボタンを設置する」を解説した動画です。
前回作成した「バックミュージックとアクティビティ」の続編としてご覧ください。
この動画は、予備知識としてアクティビティのライフサイクルIFを理解していることが前提の動画です。
まだ、未学習の方は参考程度にしてください。( わからない箇所はご質問ください。 )

 

Androidアプリの作り方「再生ボタンの設置」

 

 


【 使用画像 (ご自由にお使いください) 】

アプリ素材 スタートボタンアプリ素材 一時停止ボタン

 


【 レイアウト 】

fragment_main.xml か activity_main.xmlです。開発環境のバージョンで変わります。

 

<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=”com.example.sound0724.MainActivity$PlaceholderFragment” >

<ImageView
android:id=”@+id/soundButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:onClick=”onSoundButton
android:src=”@drawable/start” />

</RelativeLayout>

 


【 プログラム MainActivity.java 】

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.media.MediaPlayer;
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.widget.Button;
import android.widget.ImageView;

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);

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

	/*********************
	 * ボタンでの再生と停止
	 ********************/
	public void onSoundButton(View v) {

		// 表示内容の切替え
		ImageView button = (ImageView) findViewById(R.id.soundButton);

		// 再生中なら停止して、停止中なら再生する
		if (p.isPlaying()) {
			p.pause(); // 一時停止
			button.setImageResource(R.drawable.start);
		} else {
			p.start(); // 再生
			button.setImageResource(R.drawable.pause);
		}
	}

	/*****************************
	 * 終了処理(メモリの解放)
	 *****************************/
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();

		p.release(); // メモリの解放
		p = null; // 音楽プレーヤーを破棄
	}
	
	
	@Override
	protected void onPause() {
		super.onPause();
		// 本来なら停止処理が必要
	}
	
	
	@Override
	protected void onResume() {
		super.onResume();
		// 本来なら再開処理が必要
	}
  ~ 以下略 ~

動画で学ぶ、Androidアプリの作り方

バックミュージックとアクティビティ

※ 新バージョンがあります → [ バックミュージックの再生 ]

プログラミング未経験者対象の【 Androidアプリ作成動画 】です。
この動画はアプリの画面作成の流れを動画にしてUPしたもで、あまり丁寧に解説してません。
開発バージョンの違いや、文字コード、設定等により、コピペしてもうまく機能しない時があります。
動作を保証する物で無く、未経験者の方の参考動画としてご覧ください。

 

【 動画内容 】

ゲーム等での「バックミュージックを流す」を解説した動画です。
バックミュージック(音楽)を流すにはアクティビティのライフサイクルを理解する必要があるので、簡単にですが解説しています。

 

MediaPlayerとActivity

 

動画学習:アクティビティのライフサイクル

 


【 プログラム MainActivity.java 】

 

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.media.MediaPlayer;
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.widget.Toast;

public class MainActivity extends ActionBarActivity {

	// 再生の準備
	MediaPlayer p;

	/*****************************
	 * 起動処理 (読み込みと設定 )
	 *****************************/
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		Toast.makeText(this, "onCreate() 起動処理", Toast.LENGTH_SHORT).show();
		// 音楽の読み込み
		p = MediaPlayer.create(getApplicationContext(), R.raw.sound);
		// 連続再生設定
		p.setLooping(true);

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

	/*****************************
	 * 画面表示
	 *****************************/
	@Override
	protected void onResume() {
		super.onResume();

		Toast.makeText(this, "onResume() 再生処理", Toast.LENGTH_SHORT).show();
		p.start(); // 再生
	}

	/*****************************
	 * 画面非表示
	 *****************************/
	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		super.onPause();

		Toast.makeText(this, "onPause() 画面非表示", Toast.LENGTH_SHORT).show();
		p.pause(); // 一時停止
	}

	/*****************************
	 * 終了処理(メモリの解放)
	 *****************************/
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();

		Toast.makeText(this, "onDestroy() 終了処理", Toast.LENGTH_SHORT).show();
		p.release();// メモリの解放
		p = null; // 音楽プレーヤーを破棄
	}

	~ 以下略 ~