Androidアプリ開発 Viewをつかったインターフェースデザイン
ページングを実行します
Implementing Paging
アクティビティにリンクするなどで、
Intentオブジェクトを使っていろんなアクティビティに
リンクする方法を紹介しました。
他のアクティビティへリンクするときに、
ターゲットとなるアクティビティは単にスクリーンに
現れるだけです。
時には、ユーザに次のページに移ってもらうために
画面をサッと動かして欲しい時もあるでしょう。
ここでは、画面をこする動作でどのように
次のページを画面に出すかを示します。
/res/drawable-mdpiフォルダに3つの画像があると仮定します。
3つのXMLファイルをres/layoutフォルダに加え、
それらをpage1.xml、page2.xml、page3.xmlの名前にします。
page1.xmlファイルは以下のように設定します。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Page 1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="@drawable/img1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:tag="1"
android:text="Button 1" />
<LinearLayout>
page2.xmlファイルは以下のようにします。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Page 2" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="@drawable/img1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:tag="2"
android:text="Button 2" />
<Linearlayout>
page3.xmlファイルは次のようにします。
<linearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Page 3" />
ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:tag="3"
android:text="Button 3" />
<LinearLayout>
それぞれのxmlファイルは今のところTextView、ImageButtonと
Buttonがあるファイルなだけです。
srcフォルダに新しいJavaクラスを加え、
MyPageAdapter.javaと名づけます。
MyPageAdapter.javaファイルは以下のようにします。
package net.learn2develop.swiping;
import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
public class MyPageAdapter extends PagerAdapter{
//---return the total number of pages---
public int getCount(){
return 3;
}
public object instantiateItem(View collection, int position){
LayoutInflater inflater = (LayoutInflater) collection.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int resId = 0;
switch (position){
case 0;
resId = R.layout.page1;
break;
case 1;
resId = R.layout.page2;
break;
case 2;
resId = R.layout.page3;
break;
}
View view = inflater.inflate(resId, null);
((ViewPager) collection).addView(view, 0);
return view;
}
@Override
public void destroyItem(View arg0, int arg1, object arg2){
((ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, object arg1){
return arg0 == ((View) arg1);
}
@Override
public Parcelabel saveState(){
return null;
}
}
MyPageAdapterクラスは、PageAdapterクラスの拡張で、
ユーザが画面をフリップしたときに様々なページを
表示させるようにできるものです。
getCount()メソッドは、表示したいページの合計を返します。
instatiateItem()メソッドはページの現在の位置によって、
表示するページを検索します。
activity_main.xmlファイルは以下のようにします。
<LinearLayout xmlns:android="http://schema.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation~"vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_widht="match_parent"
android:layout_height="match_parent" />
<LinearLayout>
上のコードで定義したばかりのMyPageAdapterクラスを使うために、
以下の強調した部分のステートメントをアクティビティに加えます。
package net.learn2develop.swiping;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.Toast;
public class MainActicity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MypageAdapter adapter = new MyPageAdapter();
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(adapter);
//---starts with the second page---
viewPager.setCurrentitem(1);
}
public void onClick(View view){
int buttonTag = Integer.valueOf(view.getTag().toString());
Toast.makeText(this, "Button " + Integer.toString(buttonTag)+
" clicked", Toast.LENGTH_LONG).show();
}
}
onCreate()メソッドでは、MyPageAdapterクラスのインスタンスを作り、
そして、UIからViewPagerのViewを検索して、
MyPageAdapterクラスのインスタンスに検索したViewをセットします。
初期設定では、ViewPagerは通常、最初のページに表示されますが、
特定のページを表示するためのsetCurrentItem()メソッドを
呼び出すことで、Viewpagerの表示を変えることができます。
onClick()メソッドは、3つのボタンを3つのページに
広げたとしても動き、それらのイベントは同じアクティビティの中で、
すべて処理されます。
XML
HTMLと同じような言語ですが、
すべての型の複雑なデータ構造を
送信するための設計ができる
ファイル型式。
オブジェクト
ある手続きを持った
データアイテムで、
他の手続きと関連づけされるもの
metaタグ
ウェブページに与える
情報の宣言につかわれ
検索エンジン・ウェブアプリ
などにウェブページの内容を
伝える役目をする。
metaタグの内容は
ページ内に表示されない。
コンストラクタ
オブジェクト指向
プログラミングで使われ
新しいオブジェクトが
作られ時に呼び出される
メソッドのこと。
クラス
オブジェクト指向
プログラミングでの
オブジェクトの型
オブジェクト指向プログラミング
プログラミングの
方式のことで、
プログラマはデータ型を
定義できるだけでなく
自動的にデータ型と
メソッドを関連付け
できる
アクティビティ
Androidにおける
アクティビティは
Androidアプリの画面に
相当するもの
ボタンやウェブページ
など表示されている
すべてのもののこと。
view
Androidのアプリを開発する
上で使う部品のことで、
トリガボタン・イメージボタン
チェックボックスなどのこと。
UI
ユーザインターフェースのこと。