web-dev-qa-db-ja.com

引き出しレイアウト左側でメインコンテンツを移動する方法

DrawerLayout here でメニューの作成方法を確認しただけです。ただし、左側のメニューはメインコンテンツの前面に移動しています。メニューに設定し、メインコンテンツを並べて移動するにはどうすればよいですか（メニューはコンテンツを右に押します）？

androidandroid-ui
60
Mr. Cat

サードパーティのライブラリを使用したくないの場合、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を使用して管理しました。

それが役に立てば幸い！

166
nsL

Drawer Toggles のこのライブラリを使用したいと思うかもしれません。

ContentDisplaceDrawerToggleが便利だと思います：

ContentDisplaceDrawerToggle mContentDisplaceToggle = new ContentDisplaceDrawerToggle(this, mDrawerLayout, R.id.content_frame);    
mDrawerLayout.setDrawerListener(mContentDisplaceToggle);

ContentDisplaceDrawerToggleは、まさにあなたが言っていることをします。 DrawerLayoutをスライドイン/アウトすると、コンテンツビューが移動します。

Example image

異なるトグルを組み合わせる場合は、ActionBarToggleWrapperまたはDrawerToggleWrapperを使用できます

使用オプションはread meファイルに記載されています。

8
Nikola Despotoski

ここに作業コードがあります...

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
 };
0
Ness Tyagi

答えは非常に簡単です。最初に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（）メソッドに翻訳コードを追加すれば、それだけです。

0
DalveerSinghDaiya

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によって行われます。

0
Arash