[Android] Navigation Drawerを画面上側から表示させる

Support Package revision 13でNavigation Drawerを作るためのクラス(DrawerLayoutとかActionBarDrawerToggleとか)が追加されました。

しかし、Navigation Drawerは左側固定で変更することができません。
それを右側から表示するように変更する！...にしようと思いましたが、ActionBarDrawerToggleのGravity.LEFTをGravity.RIGHTに変更したらできてしまったので、今回は上側から表示させるようにしました。

※Navigation Drawerのデザインガイドに準拠してないので使用する場合は自己責任でお願いします。

作成したのは以下のクラスです。それぞれDrawerLayout、ActionBarDrawerToggleの左右の処理を上下の処理に変更しました。

• VerticalDrawerLayout.java
• ActionBarVerticalDrawerToggle.java

使用例

MainActivity.java

public class MainActivity extends Activity {
    private VerticalDrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarVerticalDrawerToggle mDrawerToggle;

    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    private String[] mPlanetTitles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTitle = mDrawerTitle = getTitle();
        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerLayout = (VerticalDrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.top_drawer);

        // set a custom shadow that overlays the main content when the drawer opens
        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, Gravity.TOP);
        // set up the drawer's list view with items and click listener
        mDrawerList.setAdapter(new ArrayAdapter<string>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        // enable ActionBar app icon to behave as action to toggle nav drawer
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

        // ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon
        mDrawerToggle = new ActionBarVerticalDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close  /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            selectItem(0);
        }
    }

    ...

}

Navigation Drawerのサンプルを使用しました。DrawerLayoutをVerticalDrawerLayoutに、ActionBarDrawerToggleをActionBarVerticalDrawerToggleに置き換えました。

activity_main.xml

<android.support.v4.widget.VerticalDrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView
        android:id="@+id/top_drawer"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_gravity="top"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.VerticalDrawerLayout>

DrawerLayoutをVerticalDrawerLayoutに、android:layout_gravityを"top"に変更します。

実行

上からスワイプまたは左上の画像をタップで、Navigation Drawerが上側から表示されました∩( ´∀｀ )∩
android:layout_gravityを"bottom"、ActionBarVerticalDrawerToggle#setGravity()にGravity.BOTTOMを設定することで下側からも表示できます。

まとめ
Navigation Drawerの上下表示はまだしも、右側表示はできるようにしないと右手だけで操作する人（私です）は左からスワイプするという操作が難しいので不便。。。

ソース
https://github.com/lilylight/VerticalNavigationDrawer

[Android] AlertDialog風なDialogFragmentを作成する

Fragmentが導入されてから、Dialog系(showDialog()とか)のAPIが非推奨になり、半ばDialogFragmentを強要されてますが、ちょっと使うのが面倒くさい。
簡単な文字とかリストを表示するだけならAlertDailogみたいな感じで使いたい！と思ったので作りました。

需要ないだろうなーと思って適当にローカルで使ってましたが、調べてみたら結構あったのでちゃんとしたの作ってみました。

ちょっと大きくなったのでソースはGithubに置きます。
https://github.com/lilylight/AlertDialogFragment

使用例

package jp.lilylight.alertdialogfragment.sample;

import jp.lilylight.alertdialogfragment.AlertDialogFragment;
import jp.lilylight.alertdialogfragment.DialogFragmentInterface.OnClickListener;
import jp.lilylight.alertdialogfragment.DialogFragmentInterface.ListAdapterDelegate;
import jp.lilylight.alertdialogfragment.R;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.Toast;

public class MainActivity extends FragmentActivity implements OnClickListener, ListAdapterDelegate {

    private static final int ID_DIALOG_ALERT = 1;
    private static final String[] ITEMS = new String[] {
            "アイテム１",
            "アイテム２",
            "アイテム３",
            "アイテム４",
            "アイテム５",
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(android.R.id.button1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showAlertDialog();
            }
        });
    }

    @Override
    public void onClick(int id, DialogInterface dialog, int which) {
        switch (id) {
            case ID_DIALOG_ALERT:
                Toast.makeText(this, ITEMS[which], Toast.LENGTH_SHORT).show();
                break;

            default:
                break;
        }
    }

    @Override
    public ListAdapter getAdapter(int id) {
        return new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, ITEMS);
    }

    private void showAlertDialog() {
        new AlertDialogFragment.Builder(this)
//              .setTargetFragment(this) Fragmentの場合
                .setId(ID_DIALOG_ALERT)
                .setIcon(R.drawable.ic_launcher)
                .setTitle("サンプル")
                .setAdapter(this, this)
                .setNeutralButton(android.R.string.cancel, null)
                .create()
                .show(getSupportFragmentManager());
    }
}

制約としてAlertDialogと違う点は

• Bundle型に格納できない引数は～Delegateの戻り値で渡す
• ～Listenerは必ずFragmentActivityかFragmentに実装する

Fragmentの性質上難しいけど割と嫌な制約...
匿名クラス使いたい(ﾊﾞﾝﾊﾞﾝ

全部試したわけじゃないのでバグってるかもしれません。その時はpullなり焼くなりしてください。

[Android] Android4.2でアプリのバージョンダウンをする方法

Androidのアプリをバージョンダウン（例：Version codeが2のアプリをVersion codeが1のアプリで上書き）する場合はADBで以下のコマンドを入力していました。

adb install -r <apkのpath>

しかし4.2(以上？)ではこのコマンドを入力すると以下のエラーが出ます。

Failure [INSTALL_FAILED_VERSION_DOWNGRADE]

なんかバージョンダウンできないよと言われます。adb(version 1.0.31)のオプションにそれらしいものもないしｵﾜﾀ＼(^o^)／

...と思いましたがADBにはもうひとつインストールするコマンドがありました。

pm installコマンドです。4.2の端末でpmコマンドを見ると、

pm install: installs a package to the system.  Options:
    -l: install the package with FORWARD_LOCK.
    -r: reinstall an exisiting app, keeping its data.
    -t: allow test .apks to be installed.
    -i: specify the installer package name.
    -s: install package on sdcard.
    -f: install package on internal flash.
    -d: allow version code downgrade.

-dのオプションにそれらしいものが書いてました。ということで、

adb shell pm install -r -d <package>

または

adb install -r -d <apkのpath>

でバージョンダウンができました。

[Android] PagerTitleStripを改造する

PagerTitleStripとは

Support Package revision 9 から追加されたクラスです。
PagerTitleStripを使うと、ViewPagerのページごとにタイトルを表示させることができます。Google Plaｙのアプリ一覧画面のようなレイアウトです（「カテゴリ」とかのところ）。

PagerTitleStripのタイトル部分は、(Fragment)PagerAdapter#getPageTitle(int)で設定しますが、戻り値がCharSequenceなので文字列しか指定できません。
これをViewを指定できるように変更します。

ソース

ViewTitlePagerAdapter.java

package android.support.v4.view;

import android.view.View;

public abstract class ViewTitlePagerAdapter extends PagerAdapter {

    public abstract View getPageTitleView(int position);

}

PagerAdapterにViewを返すメソッドを追加したものです。

PagerViewTitleStrip.java

PagerTitleStripのソース（revision 12現在）を元に作成したクラスです。
以下は変更部分です。

//    TextView mPrevText;
//    TextView mCurrText;
//    TextView mNextText;
    View mPrevView;
    View mCurrView;
    View mNextView;

    public PagerViewTitleStrip(Context context, AttributeSet attrs) {
        super(context, attrs);

//        addView(mPrevText = new TextView(context));
//        addView(mCurrText = new TextView(context));
//        addView(mNextText = new TextView(context));
        addView(mPrevView = new View(context));
        addView(mCurrView = new View(context));
        addView(mNextView = new View(context));
    }

TextViewの部分をViewに置き換えてます。

    void updateText(int currentItem, PagerAdapter adapter) {
        final int itemCount = adapter != null ? adapter.getCount() : 0;
        mUpdatingText = true;
        
//        CharSequence text = null;
//        if (currentItem >= 1 && adapter != null) {
//            text = adapter.getPageTitle(currentItem - 1);
//        }
//        mPrevText.setText(text);
//
//        mCurrText.setText(adapter != null && currentItem < itemCount ?
//                adapter.getPageTitle(currentItem) : null);
//
//        text = null;
//        if (currentItem + 1 < itemCount && adapter != null) {
//            text = adapter.getPageTitle(currentItem + 1);
//        }
//        mNextText.setText(text);

        removeView(mPrevView);
        if (currentItem >= 1 && adapter != null) {
            mPrevView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem - 1);
        } else {
            mPrevView = new View(getContext());
        }
        addView(mPrevView);

        removeView(mCurrView);
        if (currentItem < itemCount && adapter != null) {
            mCurrView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem);
        } else {
            mCurrView = new View(getContext());
        }
        addView(mCurrView);

        removeView(mNextView);
        if (currentItem + 1 < itemCount && adapter != null) {
            mNextView = ((ViewTitlePagerAdapter) adapter).getPageTitleView(currentItem + 1);
        } else {
            mNextView = new View(getContext());
        }
        addView(mNextView);
   }
}

PagerAdapter#getPageTitle()の代わりに、ViewTitlePagerAdapter#getPageTitleView()を呼ぶようにします。
以上がライブラリ側の変更です。

使用例

MainActivity.java

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);

        ViewPager vp = (ViewPager) findViewById(R.id.view_pager);
        vp.setAdapter(new TextPagerAdapter(this));
    }

    private static class TextPagerAdapter extends ViewTitlePagerAdapter {

        int[] mImages = {
                R.drawable.emo_im_angel,
                R.drawable.emo_im_cool,
                R.drawable.emo_im_crying,
                R.drawable.emo_im_embarrassed,
                R.drawable.emo_im_foot_in_mouth,
                R.drawable.emo_im_happy,
                R.drawable.emo_im_kissing,
                R.drawable.emo_im_laughing,
                R.drawable.emo_im_lips_are_sealed,
                R.drawable.emo_im_money_mouth,
                R.drawable.emo_im_sad,
                R.drawable.emo_im_surprised,
                R.drawable.emo_im_tongue_sticking_out,
                R.drawable.emo_im_undecided,
                R.drawable.emo_im_winking,
                R.drawable.emo_im_wtf,
                R.drawable.emo_im_yelling,
        };

        Context mContext;

        public TextPagerAdapter(Context context) {
            mContext = context;
        }

        @Override
        public int getCount() {
            return mImages.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == ((View) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView tv = (TextView) View.inflate(mContext, R.layout.view_item, null);
            tv.setText(Integer.toString(position));
            ((ViewPager) container).addView(tv);
            return tv;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager) container).removeView((View) object);
        }

        @Override
        public View getPageTitleView(int position) {
            TextView tv = (TextView) View.inflate(mContext, R.layout.view_title, null);
            tv.setText("Page:" + position);
            tv.setCompoundDrawablesWithIntrinsicBounds(
                    null, mContext.getResources().getDrawable(mImages[position]), null, null);
            return tv;
        }
    }
}

PagerAdapterをViewTitlePagerAdapterに置き換えて、getPageTitleView()でタイトル部分に表示したいViewを返します。

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.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerViewTitleStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerViewTitleStrip>
    </android.support.v4.view.ViewPager>

</LinearLayout>

レイアウトはPagerViewTitleStripと同じ使い方でOKです。

これで実行すると以下のようになります。

わかりにくいですが、画面をスワイプすると上の画像＆テキスト部分も一緒に切り替わります。

全ソース
https://github.com/lilylight/PagerViewTitleStrip

[Android] テンプレートを作成する（Object編）

今までProject、Activityとテンプレートを作成してきました。最後にObjectのテンプレートを作成します。

Objectといっても広すぎるので、Fragmentを生成するテンプレートにします。

Objectのテンプレートは
[SDK_ROOT]/tools/templates/other配下にあります。

ここにFragmentという名前のテンプレートを作成します。
(なんでよく使うFragmentのテンプレートが最初から無いんだろう(^_^;))

templates配下のフォルダ構成です。

template.xml

<?xml version="1.0"?>
<template
    format="1"
    revision="1"
    name="New Fragment"
    description="Creates a new fragment class">
    <dependency name="android-support-v4" revision="8" />

    <parameter
        id="className"
        name="Class Name"
        type="string"
        constraints="class|unique|nonempty"
        default="MyFragment" />

    <globals file="globals.xml.ftl" />
    <execute file="recipe.xml.ftl" />

</template>

今回はFragmentなのでSupport Libraryをインポートします。

recipe.xml.ftl

<?xml version="1.0"?>
<recipe>
    <instantiate from="src/app_package/Fragment.java.ftl"
                   to="${srcOut}/${className}.java" />
</recipe>

globals.xml.ftl

<?xml version="1.0"?>
<globals>
    <global id="srcOut" value="src/${slashedPackageName(packageName)}" />
</globals>

Fragment.java.ftl

package ${packageName};

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ${className} extends Fragment {

    @Override
    public void onAttach(Activity activity) {
        // TODO 自動生成されたメソッド・スタブ
        super.onAttach(activity);
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO 自動生成されたメソッド・スタブ
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO 自動生成されたメソッド・スタブ
        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO 自動生成されたメソッド・スタブ
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public void onStart() {
        // TODO 自動生成されたメソッド・スタブ
        super.onStart();
    }

    @Override
    public void onResume() {
        // TODO 自動生成されたメソッド・スタブ
        super.onResume();
    }

    @Override
    public void onPause() {
        // TODO 自動生成されたメソッド・スタブ
        super.onPause();
    }

    @Override
    public void onStop() {
        // TODO 自動生成されたメソッド・スタブ
        super.onStop();
    }

    @Override
    public void onDestroyView() {
        // TODO 自動生成されたメソッド・スタブ
        super.onDestroyView();
    }

    @Override
    public void onDestroy() {
        // TODO 自動生成されたメソッド・スタブ
        super.onDestroy();
    }

    @Override
    public void onDetach() {
        // TODO 自動生成されたメソッド・スタブ
        super.onDetach();
    }

}

空のFragmentを生成します。FragmentのライフサイクルはActivityより多くてよく忘れるのでライフサイクル順にOverrrideさせてます。

手抜きですがこれで完成です。（手の込んだやつは追々...）
あとはActivityと同様にEclipseから以下の手順で追加できます。
[ファイル]→[新規]→[その他]→[Android]→[Android オブジェクト]

Create Android ObjectでFragmentを選択し、Class Nameを入力したら完了です。

これでFragmentを生成することができました。

一応作成したのを置いておきます。Fragment.zip

これで一通りのテンプレート作成は終了です。Projectのテンプレートは現在1つしか作れないため最小構成になると思いますが、ActivityとFragmentは実際に使う場合、標準のLoginActivityなどのように用途に合わせて作成するとより便利になります。

...といっても個人で作るのは限界があるので、Googleか誰かがテンプレートの共有サイト(システム)を作ってくれないかなぁ...と[壁]_・)ﾁﾗｯ