難易度 – ページ 7 – ハコニワデザイン

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

2015年10月13日2015年11月11日たんたむ

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

重なりに注意

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

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

match_parentが無難

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

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

15分で作る？【簡易ストップウォッチ】

2015年10月6日2016年1月7日たんたむ

「15分で作る」シリーズはある程度知識のある方向けの動画です。
未経験の方でもコピペで再現出来るように目指していますが、理解には「RPGで学ぶ」「3分で学ぶ」を先にご覧ください。

動画の内容

超シンプルなストップウォッチです。

「とりあえず動かす！」を優先しているので、デザインもアレンジもありません。

難易度：★★☆☆☆ 未経験でも再現は簡単、アレンジは難しい

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

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

MainActivity.java（スタートのみ）

package com.hakoniwadesign.stopwatch;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Chronometer;

public class MainActivity extends AppCompatActivity {

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

        ((Chronometer)findViewById(R.id.c)).start();
    }
}

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

    <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" />

</LinearLayout>

MainActivity.java（完成）

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;

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

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

}

15分で作る？【動画の再生】

2015年10月5日2015年10月10日たんたむ

アプリ内に組み込んだ動画再生方法です。
具体的にはresフォルダ内の動画（mp4）を再生します。

動画素材

サンプル動画【シャカシャカ】

サンプル動画【ひよこ】

＊注意点：動画の形式によって再生できないものがありました。

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

    <VideoView
        android:id="@+id/v"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java

package com.hakoniwadesign.video;

import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

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

        // ID取得
        VideoView v = (VideoView)findViewById(R.id.v);

        // 動画の指定（mp4の読込み）
        v.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.raw.video1));

        // 再生スタート
        v.start();

        // コントローラNO（動画をタップするとメニュー表示）
        v.setMediaController(new MediaController(this));

    }
}

Android Studio 開発【アクションバー非表示】

2015年10月1日2016年1月10日たんたむ

動画の内容

アクションバー（タイトルバー）を非表示にする設定です。

編集

res → values → styles.xml を開き、１カ所修正するだけでOKです。

Android プログラミング【ボタンで文字変更】

2015年8月11日2015年8月15日たんたむ

動画の内容

前回の「ボタンで画像変更」に「文字の変更」を追加します。

画面のボタンクリックで背景画像と説明文が変更します。

ポイント

前回の動画に以下を追加すると可能です。（コピペでOK ）

activity_main.xml

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="aaaaaaaaaa"
        android:textSize="30dp" />

MainActivity.java

import android.widget.TextView;
((TextView)findViewById(R.id.t0)).setText("０mだよー");

activity_main.xml

画面作りは簡略化します。コピペでOKです。


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

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

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

    <TextView
        android:id="@+id/t0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="あああああ"
        android:textSize="30sp" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.test0811;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
        ((TextView) findViewById(R.id.t0)).setText("浮上したよ");
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
        ((TextView) findViewById(R.id.t0)).setText("10mです");
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
        ((TextView) findViewById(R.id.t0)).setText("20mまで潜ったよ！");
    }

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

Android プログラミング【ボタンで画像変更】

2015年8月3日2015年8月17日たんたむ

前編 → YouTube
後編 → YouTube

動画の内容

画面上にボタンを配置して「ボタンを押すと背景画像が変わる」を学習します。
もちろん、背景画像だけで無く、キャラクター自信や表情も変更できます。

作成の流れ

今回は「新規作成から完成」までを動画に納めたいので、細かい解説は省かせてもらいます。(m_m)
詳細は以下リンク先をご覧ください。

アプリの新規作成
画像の準備
画面レイアウト（背景画像）
画面レイアウト（ボタンの配置）
クリック処理（本題）
背景画像の変更（本題）

使用素材

以下、背景画像をパソコン内に保存し、アプリ内のdrawableフォルダーに保存してください。

activity_main.xml

画面作りは簡略化します。コピペでOKです。

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

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

    <Button
        android:id="@+id/b0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="b0"
        android:text="0m" />

    <Button
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b0"
        android:onClick="b1"
        android:text="10m" />

    <Button
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:onClick="b2"
        android:text="20m" />

</RelativeLayout>

MainActivity.java

プログラミング（動的な変化）です。赤文字を適切な場所にコピペすると動くはずです。

package com.test.testf;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    // 0mのボタン
    public void b0(View v) {
        // 画像の変更 （b0画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b0);
    }

    // 10mのボタン
    public void b1(View v) {
        // 画像の変更 （b1画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b1);
    }

    // 20mのボタン
    public void b2(View v) {
        // 画像の変更 （b2画像を設定）
        ((ImageView) findViewById(R.id.back)).setImageResource(R.drawable.b2);
    }

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ポイント

Android Studio 開発【プロパティウインドウ】

2015年7月11日2015年7月12日たんたむ

Component Tree（コンポーネントツリー）とpropertys（プロパティズ）の解説動画で、操作ミスしやすい部分を解説したいと思います。

この動画は「アプリ新規作成」を済ませた状態でご覧ください。

Component Treeとpropertys

3分で学ぶ Android Studio【画面解説】 — Component Treeとproper ties

Component Tree

コンポーネント（部品）　ツリー（構造）
画面の部品を構造的に表示する画面

※ 画面上の部品を選択、編集、削除等に使用

proper ties

プロパティ（性質・属性）　
部品の詳細を設定する画面

※ 部品の文字サイズや背景色の変更に使用

画面背景色の変更

3分で学ぶ Android Studio【 RelativeLayout 】 — RelativeLayout を選択

文字枠背景色の変更

3分で学ぶ Android Studio【 TextView 】 — TextViewを選択

簡単な操作ですが、簡単な操作ほど操作ミスしやすいので気をつけてください☆

Android Studio 開発【レイアウトの変更】

2015年6月23日2015年7月12日たんたむ

Android Studioでのレイアウト学習する動画です。
GUIで作成せずTextタブ（XML）でレイアウトの変更をすることでXMLの理解を深めます。

この動画は「アプリ新規作成」を済ませた状態でご覧ください。

LinearLayout vertical

・Linear ：リニア、直線上の
・Layout ：レイアウト、配置
・vertical：バーチカル、垂直
　→ 垂直に並べる

LinearLayout horizontal

・Linear ：リニア、直線上の
・Layout ：レイアウト、配置
・horizontal ：ホリゾンタル、水平
　→ 水平に並べる

RelativeLayout

・Relative ：リラティブ、相対的
・Layout ：レイアウト、配置
　→ 相対的に並べる（他を基準にして・画面の真ん中）

activity_main.xml （LinearLayout ・vertical）

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン１"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン２"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン３"/>


</LinearLayout>

Android Studio 開発【パレットウインドウ】

2015年6月17日2015年7月12日たんたむ

Paletteウインドウの解説動画で、主要な部品を解説しています。
この動画は「アプリ新規作成」を済ませた状態でご覧ください。

3分で学ぶ Android Studio【 layoutとwidget 】2 — Android Studioのlayoutとwidget

Palette　（パレット・調色板）

画面に表示する部品が並んでいるウインドウ
絵の具のパレットでOK

Layouts （レイアウト・配置）

ボタンや画像を並べる棚
本棚みたいなイメージでOK

Widgets （ウィジェット・小さな機械）

ボタンや画像など「画面に配置する部品」
本棚に並べる「本や物」イメージでOK

Android Studio 開発【フォルダ構成】

2015年6月15日2015年7月12日たんたむ

Projectウインドウの解説動画で、主要なフォルダを解説しています。

この動画は「アプリ新規作成」を済ませた状態でご覧ください。

3分で学ぶAndroid Studio【フォルダ構成】リソースフォルダ2 — Android Studioのフォルダ構成

res （リソース：素材）

アプリで使用する素材は以下階層に保存
※ 画像、音楽、文字などを保存

drawable ・ mipmap-※※

画像を保存するフォルダ
※ 背景画像やアプリのアイコンを保存
※ drawableが旧規格で低スペックでもOK、mipmap新規格で綺麗に表示できる模様。
※ 最初はdrawableを利用し、慣れてくるとmipmapも使用するでOK

menu（メニュー）

メニューの表示内容を保存
※ オプションメニューの表示内容などを記載

values（バリュー：値・価値）

文字や定数を保存
※ ボタンに表示する文字や外国語表示の文字を記載

重なりに注意

match_parentが無難

activity_main.xml

動画の内容

activity_main.xml（未完成）

MainActivity.java（スタートのみ）

activity_main.xml（完成）

MainActivity.java（完成）

動画素材

activity_main.xml

MainActivity.java

動画の内容

編集

動画の内容

ポイント

activity_main.xml

MainActivity.java

activity_main.xml

MainActivity.java

ポイント

動画の内容

作成の流れ

使用素材

activity_main.xml

MainActivity.java

ポイント

Component Treeとpropertys

Component Tree

proper ties

画面背景色の変更

文字枠背景色の変更

LinearLayout vertical

LinearLayout horizontal

RelativeLayout

activity_main.xml （LinearLayout ・vertical）

Palette （ パレット・調色板 ）

Layouts （ レイアウト・配置 ）

Widgets （ ウィジェット・小さな機械）

res （ リソース：素材）

drawable ・ mipmap-※※

menu（メニュー）

values（バリュー：値・価値）

Palette　（パレット・調色板）

Layouts （レイアウト・配置）

Widgets （ウィジェット・小さな機械）

res （リソース：素材）