ConstraintLayout 入門 【 画像の表示② 】~ キャラっぽい画像 ~

ConstraintLayout 入門 【 画像の表示② 】~ キャラっぽい画像 ~ 768

Android Studio 入門動画です。
「ConstraintLayoutレイアウトでキャラクター画像を表示してみよう!」って内容です。

あくまでも画像表示の練習です。
キャラクター画像として完璧に利用できる訳ではありません。

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

Application name Test
Company Domain test.com
Package name com.test.test

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・慣れてない方はサンプル画像の使用をオススメします。

キャラクター画像
キャラクター画像
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.test.MainActivity">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/back"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/character"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

ConstraintLayout 入門 【 画像の表示① 】~ 背景っぽい画像 ~

ConstraintLayout 入門 【 画像の表示① 】~ 背景っぽい画像 ~

ConstraintLayout 入門 【 画像の表示① 】~ 背景っぽい画像 ~ 768

Android Studio 入門動画です。
「ConstraintLayoutで背景画像を表示してみよう!」って内容です。

あくまでも画像表示の練習です。
背景画像として完璧に利用できる訳ではありません。

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

Application name Test
Company Domain test.com
Package name com.test.test

* 注意 *
・画像をご自身で要するにはファイル名やファイルサイズ、拡張子に注意する必要があります。
・ファイル名は半角小文字の英数(a~z 0~9)とアンダーバー( _ )のみで、最初の1文字目は半角英字( a ~ z)のみです。
・慣れてない方はサンプル画像の使用をオススメします。

背景画像
背景画像
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.test.test.MainActivity">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/back"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
</android.support.constraint.ConstraintLayout>

挫折しないコツ? ~学習がしんどいとき~

Android 開発 挫折しないコツ? 768

プログラム学習がしんどくないですか?
聞き慣れない専門用語の多さに挫折しそうになった経験は無いでしょうか?

僕はしょっちゅう挫折しそうになります。

特に初歩の段階、一人で学習している・・・そんな時は挫折の危険がてんこ盛りだと思います。
右も左も分からないけど「専門用語の雨あられ」ですからね・・・汗

そんな苦しいときの参考になれば・・・と、僕個人的な「学習のコツ」です。
あくまでもコツの一つですが参考になれば幸いです。

※ この動画だけで「学習が楽々になる!」ものではありません。
対応できない場合も多々ありますので、参考程度にしてください。

00 自転車の練習

00a 自転車の説明

Android プログラミング【 アクティビティ① 】 ~ アクティビティとは ~

Android プログラミング【 アクティビティ① 】 ~ アクティビティとは ~

Android 【 アクティビティ1】 アクティビティとは? 768

アプリ開発に必須のアクティビティを学習します。
アクティビティを簡単に言うと「画面」です。

かなり重要な項目ですが、挫折ポイントでもある難問です。
焦らずにまずは「慣れ」を目指してください。

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

  1. 【 アクティビティ① 】 ~ アクティビティとは ~
  2. 【 アクティビティ② 】 ~ 画面の作成 ~
  3. 【 アクティビティ③ 】 ~ 画面の編集 ~
  4. 【 アクティビティ④ 】 ~ 画面の切替 ~
  5. 【 アクティビティ⑤ 】 ~ 画面を閉じる ~

アクティビティとは-1

アクティビティとは-2

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

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

3分で学ぶ Android Studio【 プロパティウインドウ 】768B

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

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

3分で学ぶ Android Studio【 画面解説 】
Component Treeとproper ties
  • コンポーネント(部品) ツリー(構造)
  • 画面の部品を構造的に表示する画面

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

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

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

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

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

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

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

3分で学ぶ Android Studio【 レイアウトの変更 】768

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

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

レイアウト比較
レイアウト比較

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

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

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

レイアウトの変更【XML解説】
レイアウトの変更【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: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="ボタン1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン3"/>


</LinearLayout>
Android Studio 開発【 パレットウインドウ 】

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

3分で学ぶ Android Studio【 パレットウインドウ 】768

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

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

パレットのイメージ
パレットイメージ

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

layoutイメージ
layoutイメージ

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

Widgetイメージ
Widgetイメージ

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

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

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

3分で学ぶ Android Studio【 フォルダ構成 】768

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

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

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

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

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

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

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

Android Studio 開発【 ファイル構成 】

3分で学ぶAndroid Studio【 ファイル構成 】

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

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

3分で学ぶAndroid Studio【 ファイル構成 】 ファイル解説2

Project

表示をProjectにしておく
※ 他でも編集可能です。

MainActivity

プログラム(動的な命令)を記載するファイル
※「ボタンを押したら背景色を変えなさい」などを記載

activity_main.xml

レイアウト(画面の見た目)を記載するファイル
※「ボタンを右上に表示」などを記載

AndroidManifest.xml

アプリの設定などを記載するファイル
※「アプリアイコン」や「対応バージョン」などを記載