8月 26
我が家に4台目のタブレット端末として Apple の iPad2 がやってきました。Google と Android が大好きな私ですが、なんだかんだ言って Apple 製品も大好きです。

DSC_1.png

いつものように記念撮影。

DSC_2.png

他の仲間達と一緒に撮影。(左から Xoom, iPad2, Web Station)

DSC_3.png

重ねて撮影。(上から Web Station, Xoom, iPad2)

DSC_4.png

あれ?4台目って言ってなかったけ?そう Google のイベントでゲットした Optimus Pad (関連記事)が見当たりません。そうです。実は彼は今某所でハニカムの修行中なのです。きっともう直ぐ立派なハニカムアプリを携えて帰ってくる事でしょう。乞うご期待!!


Posted by sak+

Tagged with:
8月 20
前回の記事ではレイアウトファイルを使用して Fragment の生成を行いました。レイアウトが固定の場合はそれで良いのですが、レイアウトを動的に変更したい、あるいはボタンを押すなどの操作を行いその結果としてレイアウトの一部を変更させたい場合などは今回取り上げる方法が有効です。

その方法とは、予め Fragment を挿入する領域を確保し(サンプルでは LinearLayout)そこに Fragment を挿入する方法です。

今回のサンプルの画面は前回とほぼ同じです。

device-1.png

まず、レイアウトファイルでは Fragment を挿入する枠組みを用意します。

(res/layout/main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >
    <LinearLayout
       android:id="@+id/fragment1"
       android:layout_height="match_parent"
       android:layout_width="0dp"
       android:layout_weight="1"
       />
    <LinearLayout
       android:orientation="vertical"
       android:layout_height="match_parent"
       android:layout_width="0dp"
       android:layout_weight="2"
       >
        <LinearLayout
           android:id="@+id/fragment2"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="1"
           />
        <LinearLayout
           android:id="@+id/fragment3"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="2"
           />
    </LinearLayout>
</LinearLayout>

プログラムで Fragment を生成し LinearLayout で定義してあった領域に挿入します。(replace)

(Main.java)

public class Main extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        MyFragment1 df1 = MyFragment1.newInstance();
        MyFragment2 df2 = MyFragment2.newInstance();
        MyFragment3 df3 = MyFragment3.newInstance();

        FragmentTransaction ft = getFragmentManager().beginTransaction();
       
        ft.replace(R.id.fragment1, df1);
        ft.replace(R.id.fragment2, df2);
        ft.replace(R.id.fragment3, df3);
       
        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.commit();
    }
}

最後に commit すると反映されます。

この仕組みを使うと画面遷移にいろいろな効果を与える事ができそうです。その件についてはまたの機会にでも。

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。


Posted by sak+

Tagged with:
8月 15
以前、『レイアウトを分割しよう!』という記事を書きましたがそれと同じことが fragment を使うと簡単に実現できちゃいます。Fragment は Honeycomb(Android 3.0)から導入された機能ですが、Backport を使えば、それ以前のバージョンの Android でも使用できちゃいます。Google の中の人も積極的に使ってくださいと言っていますので、これを使わない手はないですね。

Fragment を使ったサンプルはまだ意外と少ないのでなるべき最小構成でのサンプルを目指します。といってもそれだけでは寂しいのでActionButton を付けてみました。ActionButton はメニューに変わる新しい機能でよく使うボタンはメニューを開くことなく押せるようになっています。この ActionButton は Fragment をホストする Activity に付与してもいいし、Activity の中に配置する Fragment に付与してもいいです。

では、今回のサンプルアプリの画面はこちら。

device-1.png

赤(Fragment1)、緑(Fragment2)、青(Fragment3)の部分は Fragment でそれぞれ対応するレイアウトファイルを持っています。

(Main.java)

public class Main extends Activity {

    private static final int MENU_FRAGMENT_0_0 = Menu.FIRST + 0;
    private static final int MENU_FRAGMENT_0_1 = Menu.FIRST + 1;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
   
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        menu.add(0, MENU_FRAGMENT_0_0, 0, "Main_0")
            .setIcon(android.R.drawable.ic_menu_help)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        menu.add(0, MENU_FRAGMENT_0_1, 0, "Main_1")
            .setIcon(android.R.drawable.ic_menu_compass)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        return true;
    }
   
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        boolean result = true;
        switch (item.getItemId()){
        case MENU_FRAGMENT_0_0:
            Toast.makeText(this, "MENU_FRAGMENT_0_0 が選択された。", Toast.LENGTH_LONG).show();
            break;
        case MENU_FRAGMENT_0_1:
            Toast.makeText(this, "MENU_FRAGMENT_0_1 が選択された。", Toast.LENGTH_LONG).show();
            break;
        default:
            result = super.onOptionsItemSelected(item);
            break;
        }
        return result;
    }
}

(Fragment1.java)

public class MyFragment1 extends Fragment {

    private static final int MENU_FRAGMENT_1_0 = Menu.FIRST + 100;
    private static final int MENU_FRAGMENT_1_1 = Menu.FIRST + 101;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        this.setHasOptionsMenu(true);
    }
   
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment1, container, false);
        return v;
    }

    @Override
    public void onCreateOptionsMenu(Menu menu, android.view.MenuInflater inflater) {
        menu.add(0, MENU_FRAGMENT_1_0, 0, "Fragment1_0")
            .setIcon(android.R.drawable.ic_menu_call)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
        menu.add(0, MENU_FRAGMENT_1_1, 0, "Fragment1_1")
            .setIcon(android.R.drawable.ic_menu_gallery)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
    }
   
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        boolean result = true;
        switch (item.getItemId()){
        case MENU_FRAGMENT_1_0:
            Toast.makeText(getActivity(), "MENU_FRAGMENT_1_0 が選択された。", Toast.LENGTH_LONG).show();
            break;
        case MENU_FRAGMENT_1_1:
            Toast.makeText(getActivity(), "MENU_FRAGMENT_1_1 が選択された。", Toast.LENGTH_LONG).show();
            break;
        default:
            result = super.onOptionsItemSelected(item);
            break;
        }
        return result;
    }
}

(res/layout/main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >
    <fragment class="sak.samples.hellofragment.MyFragment1"
       android:id="@+id/fragment1"
       android:layout_height="match_parent"
       android:layout_width="0dp"
       android:layout_weight="1"
       />
    <LinearLayout
       android:orientation="vertical"
       android:layout_height="match_parent"
        android:layout_width="0dp"
       android:layout_weight="2"
        >
        <fragment class="sak.samples.hellofragment.MyFragment2"
           android:id="@+id/fragment2"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="1"
           />
        <fragment class="sak.samples.hellofragment.MyFragment3"
           android:id="@+id/fragment3"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="2"
           />
    </LinearLayout>
</LinearLayout>

(res/layout/fragment1.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#ff00"
   >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Fragment 1"
        android:textColor="#ffff"
        android:textSize="64sp"
       />        
</RelativeLayout>

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。


Posted by sak+

Tagged with:
preload preload preload