DrawerLayout here でメニューの作成方法を確認しただけです。ただし、左側のメニューはメインコンテンツの前面に移動しています。メニューに設定し、メインコンテンツを並べて移動するにはどうすればよいですか(メニューはコンテンツを右に押します)?
サードパーティのライブラリを使用したくないの場合、ActionBarDrawerToggleのonDrawerSlideをオーバーライドするだけで実装できます。そこで、引き出しの開口率に基づいてフレームレイアウトビューを翻訳できます。
コード付きの例:
<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.DrawerLayout
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/left_drawer"
Android:layout_width="240dp"
Android:layout_height="match_parent"
Android:layout_gravity="start"
Android:choiceMode="singleChoice"
Android:divider="@Android:color/transparent"
Android:dividerHeight="0dp"/>
</Android.support.v4.widget.DrawerLayout>
そして、ここでonDrawerSlideをオーバーライドします。
public class ConfigurerActivity extends ActionBarActivity
{
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private FrameLayout frame;
private float lastTranslate = 0.0f;
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
frame = (FrameLayout) findViewById(R.id.content_frame);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.acc_drawer_open, R.string.acc_drawer_close)
{
@SuppressLint("NewApi")
public void onDrawerSlide(View drawerView, float slideOffset)
{
super.onDrawerSlide(drawerView, slideOffset);
float moveFactor = (mDrawerList.getWidth() * slideOffset);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
{
frame.setTranslationX(moveFactor);
}
else
{
TranslateAnimation anim = new TranslateAnimation(lastTranslate, moveFactor, 0.0f, 0.0f);
anim.setDuration(0);
anim.setFillAfter(true);
frame.startAnimation(anim);
lastTranslate = moveFactor;
}
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
// ... more of your code
}
}
SetTranslationXはHoneycombより前のバージョンでは利用できないため、Androidバージョンであるため、下位バージョンのデバイスではTranslateAnimationを使用して管理しました。
それが役に立てば幸い!
Drawer Toggles のこのライブラリを使用したいと思うかもしれません。
ContentDisplaceDrawerToggle
が便利だと思います:
ContentDisplaceDrawerToggle mContentDisplaceToggle = new ContentDisplaceDrawerToggle(this, mDrawerLayout, R.id.content_frame);
mDrawerLayout.setDrawerListener(mContentDisplaceToggle);
ContentDisplaceDrawerToggle
は、まさにあなたが言っていることをします。 DrawerLayout
をスライドイン/アウトすると、コンテンツビューが移動します。
異なるトグルを組み合わせる場合は、ActionBarToggleWrapper
またはDrawerToggleWrapper
を使用できます
使用オプションはread meファイルに記載されています。
ここに作業コードがあります...
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
mContainerFrame.setTranslationX(slideOffset * drawerView.getWidth());
mDrawerLayout.bringChildToFront(drawerView);
mDrawerLayout.requestLayout();
//below line used to remove shadow of drawer
mDrawerLayout.setScrimColor(Color.TRANSPARENT);
}//this method helps you to aside menu drawer
};
答えは非常に簡単です。最初にNavigationDrawerアクティビティを作成します。
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
Android:layout_width="match_parent"
Android:layout_height="match_parent" />
<Android.support.design.widget.NavigationView
Android:id="@+id/nav_view"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_gravity="start"
Android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</Android.support.v4.widget.DrawerLayout>
次に、app_bar_main.layoutを開き、親レイアウトにIDを割り当てます。
Android:id = "@ + id/appBarMain"を指定したとしましょう
MainActivity.classでそれぞれのidで親ビューグループを宣言するだけです:
以下のように、ドロワーリスナーをドロワーレイアウトに追加します。
drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
float moveFactor = 0;
moveFactor = (drawerView.getWidth() * slideOffset);
appBarMain.setTranslationX(moveFactor);
}
@Override
public void onDrawerOpened(View drawerView) {
}
@Override
public void onDrawerClosed(View drawerView) {
}
@Override
public void onDrawerStateChanged(int newState) {
}
});
上記のようにOnDrawerSlide()メソッドに翻訳コードを追加すれば、それだけです。
OPが答えを得ました。しかし、その効果を望む他の誰かのために、 SlidingPaneLayout を使用できます。この目的のために設計されています。
XMLファイル内:
<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.SlidingPaneLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@id/mainFrame"
style="@style/MP.mainFrame" >
<!--****************************Right Pane ****************************-->
<LinearLayout style="@style/searchLayout">
<Android.support.v4.widget.NestedScrollView style="@style/MP">
<LinearLayout style="@style/MP.verticalLinearLayout">
</LinearLayout>
</Android.support.v4.widget.NestedScrollView>
</LinearLayout>
<!--****************************Right Pane ****************************-->
<!--****************************Left Pane ****************************-->
<FrameLayout style="@style/MP.mainLayout">
<LinearLayout Android:id="@id/fragmentContainer" style="@style/MP.fragmentContainer"/>
<Android.support.v7.widget.Toolbar style="@style/toolbar">
<ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appTitle" style="@style/WC.appTitle"/>
<ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appBarSearchIcon" style="@style/WC.appBarSearchIcon"/>
</Android.support.v7.widget.Toolbar>
</FrameLayout> <!--****************************Left Pane ****************************-->
右と左の2つのペインがあり、一緒にくっついて一緒に移動します。私にとって、左側のペインはメインペインであり、右側はトグルアイコンで非表示になっています。 (idappBarSearchIconのビュー)。
覚えておいて、viewgroupという名前があり、SlidingPaneLayoutには2つの子しかありません、LeftおよびTheRight。
アクティビティの重要な部分:
slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.mainFrame);
// Sets a color for covering left pane(Main Pane)
slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(context, R.color.searchPaneFadeColor));
// The listener for Opening the Right pane(Hidden pane)
findViewById(R.id.appBarSearchIcon).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view){
slidingPaneLayout.openPane();
}
});
右側のペインを閉じることは、Navigation Drawerと同様にAPIによって行われます。