FBやG +アプリのようなスライディングメニューを実装したいのですが、 FB Menu Demo と https://github.com/jfeinstein10/SlidingMen からサンプルコードを見つけました。
これらは最初から良いのですが、私はそれらから何か特別なものが必要です。ここのようにメニューボタンをクリックするだけで動作しますが、ジェスチャーでも動かしたいです。中央のビューがあり、その中央を右に移動すると1つのビューが表示され、左に移動するとメニューが表示されるという動作が必要です。 3つのビューA、B、Cがあり、Cを左にスワイプするとAが表示され、Cを右にスワイプするとBが表示されるとします。 CはAとBの真ん中にあります。
1.中央のビューが右に移動します
右に移動
2.中央のビューを左側に移動します
左に移動します
今私の質問は:そのようなビューを開発するためのベストプラクティスは何ですか。フラグメントとビューページャーも使用する必要があると誰かから聞いたことがあります。では、どうすればこれを開発できますか?誰かが行ったサンプル実装はありますか?任意のヘルプや提案をいただければ幸いです。
参考までに、このタイプのスライド式白黒ビューを使用するこのアプリを参照してください Skoutアプリ
最も簡単な解決策は、プロジェクトREADMEに基づいて、ベゼルスワイプが組み込まれている Android-undergarment を使用することです。
ユーザーは、画面の左側からベゼルをスワイプして引き出しを開き、右側から同じ操作を行って閉じることで、引き出しを制御することもできます。このタッチ機能を防止したい場合は、setDrawerEnabled(false)を呼び出すことができます。
移動したいビューでTranslateAnimation
を使用するだけで、フェード用のポップアップとメニュー用の別のポップアップウィンドウを使用できます。私はそれを私のアプリケーションに実装しました、そしてそれは魅力のように働きます。
コード:
public class SlidingOptionsMenuActivity extends Activity {
/**
* Signifies that the menu is already visible
*/
boolean alreadyShowing = false;
/**
* Width of the current window
*/
private int windowWidth;
/**
* Height of the current window
*/
private int windowHeight;
/**
* Reference of the {@link PopupWindow} which dims the screen
*/
private PopupWindow fadePopup;
/**
* The translate animation
*/
private Animation ta;
/**
* The view which needs to be translated
*/
private RelativeLayout baseView;
/**
* Reference of the {@link LayoutInflater}
*/
LayoutInflater inflater;
/*
* (non-Javadoc)
*
* @see Android.app.Activity#onCreate(Android.os.Bundle)
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Display display = getWindowManager().getDefaultDisplay();
windowWidth = display.getWidth();
windowHeight = display.getHeight();
inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
findViewById(R.id.btnOptions).setOnClickListener(new OnClickListener() {
/*
* (non-Javadoc)
*
* @see Android.view.View.OnClickListener#onClick(Android.view.View)
*/
@Override
public void onClick(View v) {
if(!alreadyShowing){
alreadyShowing = true;
openSlidingMenu();
}
}
});
}
/**
* Fades the entire screen, gives a dim background
*/
private void showFadePopup() {
final View layout = inflater.inflate(R.layout.fadepopup, (ViewGroup) findViewById(R.id.fadePopup));
fadePopup = new PopupWindow(layout, windowWidth, windowHeight, false);
fadePopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);
}
/**
* Opens the sliding Menu
*/
private void openSlidingMenu() {
showFadePopup();
// The amount of view which needs to be moved out. equivalent to the
// width of the menu
int width = (int) (windowWidth * 0.6f);
translateView((float) (width));
int height = LayoutParams.FILL_PARENT;
// creating a popup
final View layout = inflater.inflate(R.layout.option_popup_layout,(ViewGroup) findViewById(R.id.popup_element));
final PopupWindow optionsPopup = new PopupWindow(layout, width, height, true);
optionsPopup.setBackgroundDrawable(new PaintDrawable());
optionsPopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);
optionsPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {
public void onDismiss() {
//Removing the fade effect
fadePopup.dismiss();
//to clear the previous animation transition in
cleanUp();
//move the view out
translateView(0);
//to clear the latest animation transition out
cleanUp();
//resetting the variable
alreadyShowing = false;
}
});
}
/**
* This method is responsible for view translation. It applies a translation
* animation on the root view of the activity
*
* @param right The position to translate to
*/
private void translateView(float right) {
ta = new TranslateAnimation(0f, right, 0f, 0f);
ta.setDuration(300);
ta.setFillEnabled(true);
ta.setFillAfter(true);
baseView = (RelativeLayout) findViewById(R.id.baseView);
baseView.startAnimation(ta);
baseView.setVisibility(View.VISIBLE);
}
/**
* Basic cleanup to avoid memory issues. Not everything is release after
* animation, so to immediately release it doing it manually
*/
private void cleanUp(){
if (null != baseView) {
baseView.clearAnimation();
baseView = null;
}
if (null != ta) {
ta.cancel();
ta = null;
}
fadePopup = null;
}
} //END of Class
//END of file
これがお役に立てば幸いです。
私が見つけたもう1つの非常に優れたオープンソースライブラリは SlidingMen です。 「メニュー」クリックとベゼルスワイプで引き出しを開閉できるので、ニーズに合うはずです。これを ActionBarSherlock または johannilssonのAndroid-actionbar ライブラリのようなアクションバーライブラリと統合することは、ライブラリプロジェクトの1行か2行のコードを変更するだけの問題であることがわかりました。 SlidingMenuライブラリのReadmeには、ABSherlockライブラリと統合する方法が説明されています。
注目に値することの1つは、SlidingMenuサンプルプロジェクトがさまざまなドロワーの開閉アニメーションを示していることです。これらは、このスタイルのメニュー/ナビゲーションで私が見た中で最高のアニメーションの一部です。