Androidオープンソースプロジェクトサイドバーメニュー(SlidingMenu)使用詳細
6995 ワード
プロジェクトのダウンロード先:https://github.com/jfeinstein10/SlidingMenu注意:SlidingMenuは別のオープンソースプロジェクトActionBarSherlockに依存するため、SlidingMenuとしてのライブラリエンジニアリングにActionBarSherlockを追加する必要があります.そうしないと、リソースにエラーが見つかりません.その後、SlidingMenuを自分のプロジェクトに追加します.
SlidingMenu統合の一般的なエラー:
Jar mismatch! Fix your dependencies:参照されたプロジェクトと、自身のプロジェクト以来のjarパッケージのバージョンが一致しないことによる競合.SlidingMenuとActionBarSherLockで使用されているjarパッケージのバージョンが一致していることを確認します.
ActionBarSherLockに関するapiを使用すると、getSupportActionBarなどのActionBarSherLockのメソッドが見つからない可能性があります.なぜなら、ActionBarSherLockを使用するActivityはSherlockActivityに継承され、SlidingMenu libraryのSlidingFragmentActivityを変更し、SherlockFragmentActivityに継承させ、libraryインポートを再コンパイルする必要があるからです.
SlidingMenuの一般的なプロパティの説明:
menu.setMode(SlidingMenu.LEFT);//左スライドメニューの設定
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//スライドする画面範囲を設定し、全画面領域をスライドできるように設定します.
menu.setShadowDrawable(R.drawable.shadow);//シャドウ画像の設定
menu.setShadowWidthRes(R.dimen.shadow_width);//シャドウ画像の幅を設定
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu切り出し時のホーム画面表示の余剰幅
menu.setBehindWidth(400);//SlidingMenuメニューの幅の設定
menu.setFadeDegree(0.35f);//SlidingMenuスライド時のグラデーション
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//ActivityにSlidingMenuをアタッチする
menu.setMenu(R.layout.menu_layout);//menuのレイアウトファイルの設定
menu.toggle();//動的判断自動オフまたはオンSlidingMenu
menu.showMenu();//SlidingMenuの表示
menu.showContent();//コンテンツの表示
menu.setOnOpenListener(onOpenListener);//リスニングslidingmenuオープン
menuを閉じるには2つの傍受があり,簡単に言えばmenu closeイベントではwhen,afterである.
menu.OnClosedListener(OnClosedListener);//slidingmenuクローズ時のイベントのリスニング
menu.OnClosedListener(OnClosedListener);//slidingmenuクローズ後のイベントのリスニング
左右にSlidingMenuメニューが表示されますので設定するだけです
menu.setMode(SlidingMenu.LEFT_RIGHT);を選択し、右側のメニューのレイアウトファイルを設定します.
menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右メニューのシャドウ画像
FragmentによるSlidingMenuの実装:
1.まずActivityがSlidingMenuパッケージから引き継いだSlidingFragmentActivity
2. setContentView(R.layout.content_frame);//このlayoutはフルスクリーンのFrameLayoutです
3. setBehindContentView(R.layout.menu_frame);//SlidingMenuで使用するレイアウトを設定します.同じフルスクリーンのFrameLayoutです.
4.SlidingMenu左側メニューのFragmentを設定する
MenuFragmentは実はFragmentであり、一つのListViewを表示してListViewの各項目をクリックすると、Activityに異なるFragmentを切り替えるように通知します.効果を見極めるために、Fragment 1、Fragment 2、Fragment 3、Fragment 4、Fragment 5をSlidingMenuでListViewで表示する5つのFramentを新規作成します.
ホーム画面に表示されるFragmentを設定するには、次の手順に従います.
ActivityのonSaveInstanceStateに現在表示されているFragment getSupportFragmentManager()を保存します.putFragment(outState, "contentFragment", contentFragment);
SlidingMenuプロパティの設定
sm = getSlidingMenu();//左側のメニューだけが表示されている場合はLEFT、右側がRIGHT、左右がサポートされている場合はLEFT_RIGHT sm.setMode(SlidingMenu.LEFT_RIGHT);//メニューのスライドモードを設定し、メニューが左側に現れるか右側に現れるか、左右両側にsmがあるかを設定する.setShadowDrawable(R.drawable.shadow);//影の画像リソースsmを設定します.setShadowWidthRes(R.dimen.shadow_width);//シャドウ画像の幅//smを設定します.setBehindWidth(200);//メニューの幅を設定します.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenuの切り出し時にホーム画面に表示する余剰幅sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//スライド領域の設定
右側のメニューをサポートする:
//SlidingMenuは左右のメニューを同時にサポートし、互いに衝突せず、アニメーションが美しく、体験が良い.sm.setSecondaryMenu(R.layout.menu_frame2);//右メニューsmを設定.setSecondaryShadowDrawable(R.drawable.shadowright);//右側のメニューシャドウの画像リソース//右側のSlidingMenuのFragment getSupportFragmentManager()を設定します.beginTransaction().replace(R.id.menu_frame2, new SampleListFragment()).commit();
ActionBarを設定するとクリックできます.
getSupportActionBar().setHomeButtonEnabled(true);//ActionbarのメインボタンはgetSupportActionBar()をクリックすることができる.setDisplayHomeAsUpEnabled(true);//左のアイコンを表示します.左右のslidingmenuのfragmentにタイトルバーが表示されているかどうか
ホーム画面に表示されるFragmentを切り替えます.
public void switch Content(Fragment f){//コンテンツFragmentに値を割り当て、onSaveInstanceStateでこのFragment contentFragment=fを保存します.FragmentTransaction t=getSupportFragmentManager().beginTransaction();t.replace(R.id.content_frame,f);t.commit();sm.showContent();
通常のActivityを使用してSlidingMenuを実装するには、次の手順に従います.
slidingMenu menu = new SlidingMenu(this);//getSlidingMenu menuではなく直接new.setMode(SlidingMenu.LEFT); menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); menu.setShadowDrawable(R.drawable.shadow); menu.setShadowWidthRes(R.dimen.shadow_width); menu.setBehindOffsetRes(R.dimen.slidingmenu_offset); menu.setBehindWidth(400);//SlidingMenuメニューの幅menuを設定.setFadeDegree(0.35f); menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//menuを呼び出す必要があります.setMenu(R.layout.menu_layout_left);//普通のレイアウトだsetBehindCanvasTransformer(mTransformer);
対応するSlidingMenuのクリックイベントは、SlidingMenuがActivityに含まれているため、直接findViewById(id)となり、viewを手に入れた後に対応する処理を行うことができる.
左右にメニューを表示できます
menu.setSecondaryMenu(R.layout.menu_layout_right); menu.setSecondaryShadowDrawable(R.drawable.shadowright);
右側のメニューのように直接findViewById(id)は、viewをもらってから任意に処理できます
SlidingMenuのアニメーションを交換してください
SlidingMenuでは、ストレッチ、スケール、回転などのアニメーションを含む、左または右のスライド時に異なるアニメーションを定義できます.スライド中にSlidingMenuがどのように現れるかというアニメーションです.アニメーションの使用も簡単です.まずCanvasTransformer mTransformerを定義します.変数:
次にmTransformerオブジェクトをSlidingMenuに設定します.これはスケールアニメーションです.
押し出しアニメーション:
SlidingMenu統合の一般的なエラー:
Jar mismatch! Fix your dependencies:参照されたプロジェクトと、自身のプロジェクト以来のjarパッケージのバージョンが一致しないことによる競合.SlidingMenuとActionBarSherLockで使用されているjarパッケージのバージョンが一致していることを確認します.
ActionBarSherLockに関するapiを使用すると、getSupportActionBarなどのActionBarSherLockのメソッドが見つからない可能性があります.なぜなら、ActionBarSherLockを使用するActivityはSherlockActivityに継承され、SlidingMenu libraryのSlidingFragmentActivityを変更し、SherlockFragmentActivityに継承させ、libraryインポートを再コンパイルする必要があるからです.
SlidingMenuの一般的なプロパティの説明:
menu.setMode(SlidingMenu.LEFT);//左スライドメニューの設定
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//スライドする画面範囲を設定し、全画面領域をスライドできるように設定します.
menu.setShadowDrawable(R.drawable.shadow);//シャドウ画像の設定
menu.setShadowWidthRes(R.dimen.shadow_width);//シャドウ画像の幅を設定
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu切り出し時のホーム画面表示の余剰幅
menu.setBehindWidth(400);//SlidingMenuメニューの幅の設定
menu.setFadeDegree(0.35f);//SlidingMenuスライド時のグラデーション
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//ActivityにSlidingMenuをアタッチする
menu.setMenu(R.layout.menu_layout);//menuのレイアウトファイルの設定
menu.toggle();//動的判断自動オフまたはオンSlidingMenu
menu.showMenu();//SlidingMenuの表示
menu.showContent();//コンテンツの表示
menu.setOnOpenListener(onOpenListener);//リスニングslidingmenuオープン
menuを閉じるには2つの傍受があり,簡単に言えばmenu closeイベントではwhen,afterである.
menu.OnClosedListener(OnClosedListener);//slidingmenuクローズ時のイベントのリスニング
menu.OnClosedListener(OnClosedListener);//slidingmenuクローズ後のイベントのリスニング
左右にSlidingMenuメニューが表示されますので設定するだけです
menu.setMode(SlidingMenu.LEFT_RIGHT);を選択し、右側のメニューのレイアウトファイルを設定します.
menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右メニューのシャドウ画像
FragmentによるSlidingMenuの実装:
1.まずActivityがSlidingMenuパッケージから引き継いだSlidingFragmentActivity
2. setContentView(R.layout.content_frame);//このlayoutはフルスクリーンのFrameLayoutです
3. setBehindContentView(R.layout.menu_frame);//SlidingMenuで使用するレイアウトを設定します.同じフルスクリーンのFrameLayoutです.
4.SlidingMenu左側メニューのFragmentを設定する
setBehindContentView(R.layout.menu_frame);
FragmentTransaction t = this.getSupportFragmentManager().beginTransaction();
leftMenuFragment = new MenuFragment();
t.replace(R.id.menu_frame, leftMenuFragment);
t.commit();
MenuFragmentは実はFragmentであり、一つのListViewを表示してListViewの各項目をクリックすると、Activityに異なるFragmentを切り替えるように通知します.効果を見極めるために、Fragment 1、Fragment 2、Fragment 3、Fragment 4、Fragment 5をSlidingMenuでListViewで表示する5つのFramentを新規作成します.
ホーム画面に表示されるFragmentを設定するには、次の手順に従います.
if (savedInstanceState == null) {//== null Fragment1
contentFragment = new Fragment1();
} else {// null, get
// null, Activity Fragment
contentFragment = getSupportFragmentManager().getFragment(savedInstanceState, "contentFragment");
}
// Fragment
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.content_frame, contentFragment)
.commit();
ActivityのonSaveInstanceStateに現在表示されているFragment getSupportFragmentManager()を保存します.putFragment(outState, "contentFragment", contentFragment);
SlidingMenuプロパティの設定
sm = getSlidingMenu();//左側のメニューだけが表示されている場合はLEFT、右側がRIGHT、左右がサポートされている場合はLEFT_RIGHT sm.setMode(SlidingMenu.LEFT_RIGHT);//メニューのスライドモードを設定し、メニューが左側に現れるか右側に現れるか、左右両側にsmがあるかを設定する.setShadowDrawable(R.drawable.shadow);//影の画像リソースsmを設定します.setShadowWidthRes(R.dimen.shadow_width);//シャドウ画像の幅//smを設定します.setBehindWidth(200);//メニューの幅を設定します.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenuの切り出し時にホーム画面に表示する余剰幅sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//スライド領域の設定
右側のメニューをサポートする:
//SlidingMenuは左右のメニューを同時にサポートし、互いに衝突せず、アニメーションが美しく、体験が良い.sm.setSecondaryMenu(R.layout.menu_frame2);//右メニューsmを設定.setSecondaryShadowDrawable(R.drawable.shadowright);//右側のメニューシャドウの画像リソース//右側のSlidingMenuのFragment getSupportFragmentManager()を設定します.beginTransaction().replace(R.id.menu_frame2, new SampleListFragment()).commit();
ActionBarを設定するとクリックできます.
getSupportActionBar().setHomeButtonEnabled(true);//ActionbarのメインボタンはgetSupportActionBar()をクリックすることができる.setDisplayHomeAsUpEnabled(true);//左のアイコンを表示します.左右のslidingmenuのfragmentにタイトルバーが表示されているかどうか
ホーム画面に表示されるFragmentを切り替えます.
public void switch Content(Fragment f){//コンテンツFragmentに値を割り当て、onSaveInstanceStateでこのFragment contentFragment=fを保存します.FragmentTransaction t=getSupportFragmentManager().beginTransaction();t.replace(R.id.content_frame,f);t.commit();sm.showContent();
通常のActivityを使用してSlidingMenuを実装するには、次の手順に従います.
slidingMenu menu = new SlidingMenu(this);//getSlidingMenu menuではなく直接new.setMode(SlidingMenu.LEFT); menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); menu.setShadowDrawable(R.drawable.shadow); menu.setShadowWidthRes(R.dimen.shadow_width); menu.setBehindOffsetRes(R.dimen.slidingmenu_offset); menu.setBehindWidth(400);//SlidingMenuメニューの幅menuを設定.setFadeDegree(0.35f); menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//menuを呼び出す必要があります.setMenu(R.layout.menu_layout_left);//普通のレイアウトだsetBehindCanvasTransformer(mTransformer);
対応するSlidingMenuのクリックイベントは、SlidingMenuがActivityに含まれているため、直接findViewById(id)となり、viewを手に入れた後に対応する処理を行うことができる.
左右にメニューを表示できます
menu.setSecondaryMenu(R.layout.menu_layout_right); menu.setSecondaryShadowDrawable(R.drawable.shadowright);
右側のメニューのように直接findViewById(id)は、viewをもらってから任意に処理できます
SlidingMenuのアニメーションを交換してください
SlidingMenuでは、ストレッチ、スケール、回転などのアニメーションを含む、左または右のスライド時に異なるアニメーションを定義できます.スライド中にSlidingMenuがどのように現れるかというアニメーションです.アニメーションの使用も簡単です.まずCanvasTransformer mTransformerを定義します.変数:
mTransformer = new CanvasTransformer() {
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
float scale = (float) (percentOpen*0.25 + 0.75);
canvas.scale(scale, scale, canvas.getWidth()/2, canvas.getHeight()/2);
}
};
次にmTransformerオブジェクトをSlidingMenuに設定します.これはスケールアニメーションです.
private void initSlidUpCanvasTransformer() {
mTransformer = new CanvasTransformer() {
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
canvas.translate(0, canvas.getHeight()*(1-interp.getInterpolation(percentOpen)));
}
};
}
private static Interpolator interp = new Interpolator() {
@Override
public float getInterpolation(float t) {
t -= 1.0f;
return t * t * t + 1.0f;
}
};
押し出しアニメーション:
mTransformer = new CanvasTransformer() {
@Override
public void transformCanvas(Canvas canvas, float percentOpen) {
canvas.scale(percentOpen, 1, 0, 0);
}
});