FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



スポンサーサイト



アフィリエイト・SEO対策




メモ帳開発③

メモ帳開発③

前回は、サブ画面を作成し、主画面から副画面の画面を遷移するところまでを記載しました。
今回は、キャンセルボタンによるサブ画面の終了処理と保存ボタンによるSQLiteへの保存の仕方を
解説いたします。

まず、簡単なキャンセルボタンによるサブ画面の終了方法です。

20130305-04.png

上記画面のキャンセルボタンに終了処理の機能を実装します。

1.はじめに、サブ画面のjavaソースファイルを開きます。

  ファイル名:SubMainActivity.java(※ご自身で作成されたサブ画面のソースファイル)

  onClick(※名称はなんでも構いません)メソッドを作成します。
  ※サブ画面にボタンを2つ配置しておりますので、ボタンによって分岐処理が行えるように
   しておきます。

  
  //ボタンのクリックイベントが発生した時
   public void onClick(View v){
    //IDごとに処理を分ける
    switch (v.getId()) {
     //保存ボタンの時
     case R.id.btn_Save:
      //処理は後ほど記載します。

     //キャンセルボタンの時
     case R.id.btn_Cancel:
      //画面を閉じる
      finish();

     default:
      break;
     }
   }

  キャンセルボタンを押したときの処理にfinish();を入れるだけです。簡単ですね。

 2.続いて、キャンセルボタンにイベント処理を追加します。

  こちらも手順としては単純です。

   ①activity_sub_main.xml(※ご自身で作成されたxmlのサブ画面)を開き、
    グラフィカルレイアウトを表示します。

   ②次にキャンセルボタンを選択し、プロパティにある「View」→「On Click」に
    上記1.で作成したonClickメソッドを指定するだけです。
    ※手書きでonClickと入力するだけです。

   これで準備完了です。エミュレーターを起動し、キャンセルボタンが動くことを確認してください。

  3.続いて、保存ボタンの処理についての実装です。

   データを保存する方法として、Androidに標準搭載されているデータベースSQLiteへの
   保存を使用したいと思います。

   SQLiteにはいくつか注意すべき点はあるのですが、はじめは何も気にせず、単純にデータベースを
   作成し、メモの内容を保存する所まで解説いたします。

   テーブル構造の設計は、単純化するために、保存日時(西暦月日何時何分何秒)とメモ内容の2つの
   カラムとします。

   データベース名:chokomemoDB
   テーブル名  :tbl_chokomemo
   カラム名   :date,naiyoh

   ①アンドロイドでは、SQLiteDatabaseオブジェクトを使って、データベースを操作します。
    SQLiteDatabaseオブジェクトを取得するには、SQLiteOpenHelperクラスを継承したクラスを作成して、
    このクラスよりSQLiteDatabaseオブジェクトを取得します。

    Eclipse上から「新規」→「クラス」を指定して、ソースファイルのひな型を作成します。
    クラス名は、DBOpenHelperとしておきます。※名称は自由です。

    作成したソースファイルのひな型下記ソースを書き加えます。
    コメントとしてソースの解説付きです。※一部解説を割愛しています。ボリュームが大きいので

    DBOpenHelper.java 
    //extends SQLiteOpenHelperを追記し、SQLiteOpenHelperクラスを継承します。
     public class DBOpenHelper extends SQLiteOpenHelper {
     //コンストラクタを用意します。
      //※Contextの説明は割愛いたします。
      // 今の所、SQLiteOpenHelperクラスを使用する時のお約束事と思っておいて下さい。
    public DBOpenHelper(Context context) {
   //スーパークラスSQLiteOpenHelperのコンストラクタを呼び出し、
       //コンテキストオブジェクト、データベース名、バージョンを指定します。
       //第1引数は、データベースを所有するコンテキストオブジェクトを指定。
       //第2引数は、データベースファイルの名前を指定。
       //※上記は、nullを指定すると、データベースはメモリー上に作られます。
       //第3引数は、無視して、常にnullを指定。
       //第4引数は、データベースのバージョンを指定。
//データベースのバージョンはテーブル構造が変わったときに自動的にあたらしい
       //バージョンに置き換えるために使用します。
       //初回バージョンは全て1で問題ないと思います。
       //データベースが作成されます。初回だけです。
       //データベース作成後、onCreateメソッドが呼び出されます。
       //2回目以降データベースの存在が確認された場合、処理は行われません。
   super(context, "chokomeoDB", null, 1);
    }

     //データベースを読み書き専用で開く
     public SQLiteDatabase getWritableDatabase(){
      //エラー処理は省略しています。
      //また、本来の開発では、データベース制御を扱う専用クラスを用意した方が良いと思います。
      //※整理できたら修正します。
      SQLiteDatabase db = super.getWritableDatabase();
      return db;
     }

    @Override
   public void onCreate(SQLiteDatabase db) {
  //テーブルを作成します。create table テーブル名(カラム1,カラム2,.,.,.)のように
      //指定します。ここでは、実際にデータを格納する予定のカラム以外に、
      //プライマリーキーの「_id」が記載されていますが、ここでは、AndroidでSQLiteを
      //使用する際の作法として覚えておいてください。
  db.execSQL(
"create table tbl_chokomemo("
+ "_id integer primary key autoincrement not null, "
+"date text not null,"
+"naiyoh text"+
");"
);
 }

     @Override
   public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
  // データベースの変更が生じた場合は、バージョンアップ処理をここに記載する。
      //ここの処理は今回記載しなくて問題ありません。
   }
   }

   ②続いて、サブ画面の保存ボタンによるテーブルへのインサート処理を記述します。
    サブ画面のソースを開いて、下記のような処理を追記します。

    サブのonClickのswitch分の保存ボタンイベントにて、インサート処理を追記します。
    SubMainActivity 
 //ボタンのクリックイベントが発生した時
    public void onClick(View v){
     //IDごとに処理を分ける
     switch (v.getId()) {
      //保存ボタンの時
      case R.id.btn_Save:
      // 現在の時刻を取得
      Date date = new Date();
      // 表示形式を設定
      SimpleDateFormat strDate = new SimpleDateFormat("yyyyMMddkkmmss");
      //テキストのIDを取得
      EditText strtxtNew=(EditText)findViewById(R.id.btn_New);
      //DBOpenHelperクラスを呼び出し、読み書き専用で開く
      //プライベート変数:private DBOpenHelper dbHelper;を追記しておいてください。
      SQLiteDatabase db = dbHelper.getWritableDatabase();
      
      // 挿入するデータはContentValuesに格納
      ContentValues val = new ContentValues();
      //現在の日付を追加
      val.put( "date", strDate.format(date) );
      //テキストに入力された値を追加
      val.put( "naiyoh" , strtxtNew.getText().toString() );

      //テーブル:tbl_chokomemoに1件追加
      db.insert( "name_book_table", null, val );

以上で、新規データの保存方法は、終わりです。

次は、保存したデータを参照する方法です。メモ開発④へ

テーマ : プログラミング
ジャンル : コンピュータ

メモ帳開発②

メモ帳開発②

起動画面は前回作成したので、(前回記事
サブ画面を作り、画面遷移を行いメモの内容が確認できる画面を作成したいと思います。

1.はじめにサブ画面を用意します。

 Eclipse上で、「ファイル」→「新規」→「その他」をクリック。

 ウィザードを選択画面で、「Android」→「Android XML レイアウト・ファイル」を選択し、次へをクリック。

 ファイル名に適当な名前をつけて(今回はactivity_sub_main.xmlとしました)、次へをクリック。

 次の画面では、レイアウトファイルの保存先を指定して、完了をクリック。
 ※何もしなくても、res/Layoutが指定されているはずなので、そのまま完了で問題ありません。

 すると下記のような画面が作成され、サブ画面の準備は完了です。
 20130304-05.png

2.このサブ画面を制御するためのソースファイルを用意します。

 「ファイル」→「新規」→「クラス」をクリック。

 新規 Java クラス画面で、下記の設定を指定してください。
 パッケージ名:(例、com.xxx.memo)
 名前:(例、SubMainActivity)
 スーパークラス:android.app.Activity

 上記を指定したら、「完了」ボタンをクリック。

 作成されたソースファイルにonCreateメソッドを追加します。
 この時に先で作成したレイアウトファイルを指定します。
 SubMainActivity.java
  @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 画面の XML を指定する
setContentView(R.layout.activity_sub_main);
}

 ※この時に、バンドルのimportをしろと警告が出ますので、importしてください。
  import android.os.Bundle;

3.メイン画面の処理を追加します。

 前回作成したメイン画面のボタンには、何も処理を記述していないので、
 ここで、メイン画面の新規作成ボタンを押したときに、サブ画面に遷移する処理を記述します。

 ボタンイベントの書き方はいろいろありますが、ここでは一番簡単な方法を記載します。

 ①メイン画面のソースファイルに新規にメソッドを追加する。
  メソッドの名前はなんでも良いです。(仮にClickEventとしておきます。)

 ②上記のメソッド内に、画面遷移の処理を書きます。

  ・複数のボタンイベントに対応するため、分岐処理とします。
  ・startActivityを呼び出して,別のアクティビティを表示します。
   ※ここでインテントによる処理を記載しますが、インテントとはAndroid特有の処理です。
    「明示的インテント」「暗黙的インテント」があり、イメージ的にはユーザが自分で意図する処理が
    「明示的」で相手から電話やメールがあった時に発生するイベントが「暗黙的」というイメージに
    なると思います。

 ③最後にボタンのプロパティでonClickに作成したメソッド名を記載する。

 ソースとxmlファイルは下記です。

 MainActivity.java
  //ボタンのクリックイベントが発生した時
public void ClickEvent(View v){
//IDごとに処理を分ける
switch (v.getId()) {
//新規作成ボタンの時
case R.id.btn_New:
//明示的インテント
Intent intent = new Intent( MainActivity.this, SubMainActivity.class );
//画面遷移
startActivity( intent );

default:
break;
}
}

 activity_main.xml(追加分のみ)
  <Button
・・・省略・・・
android:onClick="ClickEvent"
・・・省略・・・
/>

4.サブ画面をデザインしていきます。
 メモ帳の機能から考えて新規モードと編集モードが必要だと思いますが、
 まずは新規モードのみ考えてデザインを行います。
 とりあえず必要なのはMultiLineTextと保存ボタン・キャンセルボタンだと思うので、
 上記で作成したサブ画面にそれぞれ部品を配置し、下記画面を作成します。
 20130305-02.png

 ※デザインの仕方は、前回記事を参照し、作成してください。
  繰り返しになりますが、デザインは慣れるしかありません。
 
 レイアウトファイルとソースファイルは下記です。

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

<EditText
android:id="@+id/txt_New"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine" >

<requestFocus />
</EditText>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<Button
android:id="@+id/btn_Save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_btn_save2"
android:text="@string/btn_save" />

<Button
android:id="@+id/btn_Cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_btn_cancel"
android:text="@string/btn_cancel" />

</LinearLayout>

</LinearLayout>

 SubMainActivity 
  public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 画面の XML を指定する
setContentView(R.layout.activity_sub_main);
//タイトルの名称をレイアウトから取得
setTitle(R.string.title_sub_main);
}

5.起動確認を行います。

 起動後、「新規作成」ボタンをクリックすると、
 新規入力画面に遷移することが確認できると思います。
20130305-03.png
 ⇒ 20130305-04.png


次は、サブ画面の制御として、保存とキャンセルを実装します。
メモ開発③へ

























人気ブログランキングへ FC2 Blog Ranking BS blog Ranking
ブログランキング

テーマ : プログラミング
ジャンル : コンピュータ

メモ帳開発①

1.起動画面を作成します。
 ・はじめに、新規プロジェクトを作成してください。
 ・とりあえず、HelloWorldのTextViewは不要なので削除します。
 ・アプリケーションのタイトル名に日本語を表示したいので、タイトルを変更します。
   一番簡単な方法は、AndroidManifest.xmlのLabelを変更することですが、
   これだと画面遷移するようなアプリケーションの場合にサブ画面のタイトルも同じになってしまうようです。
   なので、今回はメインのアクティビティのonCreate時にタイトルをセットしようと思います。

①valuesのstring.xmlにタイトルの文字列を追加する。
20130303-01.png

②次にメインのアクティビティのonCreateにて、タイトルをセットする。
  protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setTitle(R.string.title_main);
}

③起動すると下記のように画面タイトルが変更されています。
20130303-02.png


2.次に保存したメモ内容をリスト表示できるようにするため、ListViewを配置し
 画面下部に「新規作成」ボタンと「削除」ボタンを用意します。

※とりあえず今は、配置するだけです。プログラム処理は今後行います。

Androidでは意外にこのレイアウト配置が苦戦します。
下記のようなレイアウト配置したアプリケーションを作成します。
20130303-03.png

下記のようなXMLファイルができることが理想です。
activity_main.xml
  <LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ListView
android:id="@+id/lst_MemoRereki"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<Button
android:id="@+id/btn_New"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_btn_new"
android:text="@string/btn_new" />

<Button
android:id="@+id/btn_Clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="@drawable/ic_btn_clear"
android:text="@string/btn_clear" />

</LinearLayout>

</LinearLayout>


上記のXML作成手順としては、
①LinearLayoutを配置
 重要な点は、layout_widthとlayout_heightをfill_parentに設定すること。
 ※fill_parentは画面全体に配置という意味

②上記のレイアウトの中にListViewを配置
 重要な点は、layout_widthは、match_parent、layout_heightは、wrap_contentを設定し、
 layout_weightは1を設定すること。
 match_parentは、親コンテナに従って画面全体に配置
 wrap_contentは、最少で配置
 layout_weightは、この部品がレイアウト内で占める割合
 ※レイアウト配置は慣れるしかないです。言葉で説明するのは難しいです。Swingと同じような感じ。

③①のレイアウトの中にさらにLinearLayoutを配置
 ボタンを横並びに配置したいのでLinearLayoutを配置
 同じように幅・高さ・画面上で占める割合を指定します。

④上記のレイアウトにボタンを2つ配置(ボタンを横並びで配置)

⑤各種ボタンの名称を変更します。(※名称の変更はプロパティのTextからNewString作成で簡単にできます。)

⑥ボタンのアイコンを変更します。
 アイコンの作成方法へ

ここまでが起動時の画面イメージの作成方法です。

長くなったので、続きはメモ帳開発②へ

























人気ブログランキングへ FC2 Blog Ranking BS blog Ranking
ブログランキング

テーマ : プログラミング
ジャンル : コンピュータ

カテゴリ
最新記事
最新コメント
PR





最新トラックバック
月別アーカイブ
検索フォーム
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
logo_shop2.png
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。