Let's　Re⇒move -34ページ目

<< 前のページへ最新 | 32 | 33 | 34 | 35 | 36 | 最初次のページへ >>

Androidの授業 5 [ 画面の操作 ]

------------------------------
プロジェクト名：Sample6
ビルドターゲット：2.3.3
アプリケーション：Sample6
パッケージ名：test.sample6
Create Activity ：MainActivity
MinSDKVersion ：10
-----------------------------

【画面の操作】

問題が出て解答をラジオボタンにチェックを入れ、
チェックボタンで答え合わせをする画面を作る。

今日扱うもの
・TextView
・ラジオボタン
・ラジオグループ
・チェックをかけるボタン

Sample6main→res→layout→main.xml編集を開く
---------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="問題の内容"
/>
<RadioGroup
android:id="@+id/rg1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="答え①"/>

<RadioButton
android:id="@+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="答え②"/>

<RadioButton
android:id="@+id/rb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="答え③"/>

</RadioGroup>

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="チェック"/>

</LinearLayout>
----------------------------------------------------------

Sample6→src→test.sample6→MainActivity.javaの編集
----------------------------------------------------------
package test.sample6;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends Activity
implements View.OnClickListener {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//リスナーの設定
findViewById(R.id.btn1).setOnClickListener(this);
}

@Override
public void onClick(View v) {
//ラジオグループの取得
RadioGroup rg =
(RadioGroup)findViewById(R.id.rg1);

//どのラジオボタンがチェックされているか判定
switch(rg.getCheckedRadioButtonId()) {
case R.id.rb1: //不正解
useDialog("説明文", false);
useToast("説明文", false);
break;
case R.id.rb2: //正解
useDialog("説明文", true);
useToast("説明文", true);
break;
case R.id.rb3: //不正解
useDialog("説明文", false);
useToast("説明文", false);
break;
}
/*
//簡単なトーストの使用
Toast.makeText(this,"トースト",Toast.LENGTH_SHORT)
.show();
*/
/*
//簡単なダイアログの使用
AlertDialog.Builder builder
= new AlertDialog.Builder(this);
builder.setTitle("タイトル")
.setMessage("メッセージ")
.setPositiveButton("OK", null)
.show();
*/
}

/**
* ダイアログの表示
* @param msg メッセージの内容
* @param correct true:正解 false:不正解
*/

private void useDialog(String msg, boolean correct) {
String title =null;
if(correct) {
title = "正解";
} else {
title = "不正解";
}

//ダイアログの設定･表示
AlertDialog.Builder builder =
new AlertDialog.Builder(this);
builder.setTitle(title)
.setMessage(msg)
.setPositiveButton("OK", null)
.show();
}

/**
* トーストの表示
* @param msg
* @param correct
* */
private void useToast(String msg, boolean correct) {
String title = null;
if(correct){
title = "正解です。";
} else {
title = "不正解です。";
}

//トーストの表示
Toast.makeText
(this, title + "⇒" + msg, Toast.LENGTH_SHORT)
.show();
}
}
----------------------------------------------------------

※トースト通知とダイアログ通知について
トースト通知：画面に一定時間表示する。ボタン等は影響なく触ることが可能
ダイアログ通知：ポップアップウィンドウによる通知。
　　　　　　　　OK、キャンセル等するまで画面は触ることができない。
参考
https://sites.google.com/a/techdoctranslator.com/jp/android/guide/ui/notifiers

※javadocスタイルのコメントアウト
/** としてenterを押すと次行から頭に*が付く形のコメントに。
→コメントの後に書くメソッドの説明等に使用する。
→eclipseではメソッドを使用した際、カーソルを合わせると説明が出るようになる。

Androidの授業 4 [ Javaで書いたレイアウトをxmlへ落とし込む ]

【Javaで書いたレイアウトをxmlへ落とし込む】

新規プロジェクト"JavaXml"作成
パッケージ：test.sample
Activity :MainActivity

①Javaでレイアウト

JavaXml→src→sample.test→MainActivityを開く。
---------------------------------------------------
package sample.test;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

/** Called when the activity is first created. */

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

}
----------------------------------------------------

・setContentView(R.layout.main);　の上の行に追加。

//LinearLayoutクラスのインスタンス化（一行に並べる為のレイアウトの準備）
LinearLayout layout = new LinearLayout(this);
(この時点で左に×（エラー）が付くのでLinearLayoutクラスをインポート)

//setOrientationメソッドで配置を縦に指定
layout.setOrientation(Linearlayout.VERTICAL);

//setBackgroundColorメソッドで背景色を白に指定（→Colorをインポート）
layout.setBackgroundColor(Color.WHITE);

・setContentView(R.layout.main);　の書き換え

//画面に作成したレイアウトを設定する
setContentView(layout);

・その下に追記していく内容

//文字を表示するためのUIの準備
TextView textView = new TextView(this);

//textViewに文字を設定する
textView.setText("テキストビュー");

//文字色の指定
textView.setTextColor(Color.BLACK);

//レイアウトにtextViewを配置する
layout.addView(textCiew);

・画像の配置

//画像を表示するためのUIを用意する
ImageView imageView = new ImageView(this); (→ImageViewをインポート）

//画像を設定する
imageView.setImageResource(R.drawable.icon); (デフォルトの画像"icon")

//レイアウトにimageViewを配置する
layout.addView(imageView);

②同じ内容をxmlの操作で行う

一旦今やった作業内容のうちsetContentViewをコメントアウト。

//setContentView(layout);
setContentView(R.layout.main); を追記
(layoutの設定が影響しなくなる）

JavaXml→res→layout→main.xml を開く
------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
-------------------------------------------------
3行目～最終行の1行前までを書き換え。

-------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
<--! 幅の設定 -->
android:layout_width="fill_parent"
<--! 高さの設定 -->
android:layout_height="fill_parent"
<--! 配置を縦に設定 -->
android:orientation="vertical"
<--! 背景色の設定（白）-->
android:background="#FFFFFF"
>
<--! 上記までがLinearLayout内の設定。-->

<--! 文字の表示。LinearLayout内にTextViewを配置する -->
<TextView
<--! 幅の設定（最大）-->
android:layout_width="fill_parent"
<--! 高さの設定(最小）-->
android:layout_height="wrap_content"
<--! 文字の設定 -->
android:text="テキストビュー"
<--! 文字色の設定(黒) -->
android:textColor="#000000"
></TextView>

<--! 画像の表示。LinearLayout内にImageViewを配置 -->
<ImageView
<--! 幅、高さの設定 -->
android:layout_width="fill_parent"
android:layout_height="wrap_content"
<--! 画像の設定 -->
android:src="@drawable/icon"
></ImageView>
</LinearLayout>

③Strings.xmlで文字列を管理する。

JavaXml→res→values→Strings.xml を開く
-----------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, MainActivity!</string>
<string name="app_name">JavaXml</string>
</resources>
-----------------------------------------
</resources>の上に追記していく。

<string name="sample_text">テキストビュー</string>

これにより、"sample_text"という名前で呼び出せるstring"テキストビュー"が追加される。

この状態で②のテキスト表示の部分を変更。

android:text="テキストビュー"
　　　　　↓
android:text="@string/sample_text"

④色の設定(color.xml)を追加してみる。

valuesの中にxmlを新規作成。（なければその他から。）
名前をcolor.xmlに設定。

追加→color
Nameにwhite
Valueに#FFFFFF　を入力。

color.xmlに直接リソースの追記でもOK。
<color name="white">#FFFFFF</color>

同様にblack #000000 を追加してみる。

この状態で②の背景色指定、文字色指定の部分を変更。
android:background="@color/white"
android:textColor="@color/black"

Androidの授業 3 [ xmlファイルの編集その２ ]

【 xmlファイルの編集その２】

TextViewの編集

今日は幅200、高さ100にしてみて下さい。

android:text="@string/hello"　→""内の文字列を変えてみる。表示確認。

色の指定
textcolor 文字色
background 背景色

※色の種類と文字列に関しては”カラーコード”で検索して下さい。

文字サイズの設定
textSize="40s200p"

・パーツの配置を変更してみる

LinerLayoutの内容に追加。
android:gravity="center" (中央に配置）

TextView内に追加でTextView内の配置の変更。
TextViewを２つ作成
それぞれ
gravity="left|top"
guravity="right|bottom"
を指定してみる。

main.xmlの編集後の内容
---------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">

</LinearLayout>
------------------------------------------------------------------

<LinerLayoutの中にLinerLayoutを配置する>
-----------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dip"
android:orientation="horizontal">

<TextView
android:text="TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

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

<TextView
android:text="TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:text="TextView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

</LinearLayout>
--------------------------------------------------------

<Viewクラスのインスタンス化>
----------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android "
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<View
android:layout_width="100dip"
android:layout_height="100dip"
android:background="#ffffff"/>

</LinearLayout>
----------------------------------------
Viewクラスだけでも配置は可能なことを確認。

※TextViewとは？
java.lang.Object
→android.view.View
→android.widget.TextView
(さらにTextViewを継承したものとしてBottun等がある）

　LinearLayoutは？
　　java.lang.Object
→android.view.View
→android.view.ViewGroup
→android.widget.LinearLayout

☆教科書ではActivity中心で説明されているが
　表示する画面に関してはViewが継承元のクラスであることに注意

来週以降の前での講義の予定
<xmlファイルを触って作成していく>

レイアウトの設定とJavaとの関連性
画面の操作。（Listener）触って反応する
複雑のListenerを用意する
簡単なアプリケーションの作成

<< 前のページへ最新 | 32 | 33 | 34 | 35 | 36 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

Let's Re⇒move

ニートが社会を変える。

Androidの授業 5 [ 画面の操作 ]

Androidの授業 4 [ Javaで書いたレイアウトをxmlへ落とし込む ]

Androidの授業 3 [ xmlファイルの編集 その２ ]

Let's　Re⇒move

Androidの授業 3 [ xmlファイルの編集その２ ]