Create sliding menu-panel for android in fragment-layout

Hi All! In this post i am want to show you how to create android sliding panel for menu or content. This menu by founded on TranslateAnimation class.

For this we need one layout file bellow

XML code for this layout is shown bellow

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <SurfaceView
        android:id="@+id/surfaceView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <RelativeLayout
        android:id="@+id/rlContentSliding"
        android:layout_width="220dp"
        android:layout_height="fill_parent"
        android:background="#BBB"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/llFakeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" android:visibility="gone">
        </LinearLayout>

        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </ListView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rlContentMain"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#AfA"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/llButtonLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true" android:background="#fff" android:layout_margin="2dp"
            android:weightSum="1">

            <Button
                android:id="@+id/button"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:text="slide"
                android:layout_weight="0.11" />
        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

Now we have to attach our layout as a fragment to the main Activity, adding events to the button in the method OnCreateView

public class SlideExampleFragment extends Fragment {
    View V;
    private Button buttonSwitch;
    private View subLayout;
    private View topLayout;
    private ListView subViewListView;
    private String listViewDummyContent[]={"Menu Item 1","Menu Item 2","Menu Item 3","Menu Item 2"};
    private Display display;
    private View fakeLayout;
    private Animation.AnimationListener AL;

    // Values for after the animation
    private int oldLeft;
    private int oldTop;
    private int newleft;
    private int newTop;
    private int screenWidth;
    private int animToPostion;
    // TODO change the name of the animToPostion for a better explanation.

    private boolean menuOpen = false;
    
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        V = inflater.inflate(R.layout.slide_layout, container, false);

        buttonSwitch = (Button)V.findViewById(R.id.button);
        subLayout = (View) V.findViewById(R.id.rlContentSliding);
        topLayout = (View) V.findViewById(R.id.rlContentMain);
        subViewListView=(ListView)V.findViewById(R.id.listView1);
        fakeLayout = (View)V.findViewById(R.id.llFakeLayout);

        subViewListView.setAdapter(new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1 , listViewDummyContent));

        display =  getActivity().getWindowManager().getDefaultDisplay();
        screenWidth = display.getWidth();
        int calcAnimationPosition = (screenWidth /3);

        // Value where the onTop Layer has to animate
        // also the max width of the layout underneath
        // Set Layout params for subLayout according to calculation
        animToPostion = screenWidth - calcAnimationPosition;

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(animToPostion, RelativeLayout.LayoutParams.FILL_PARENT);
        subLayout.setLayoutParams(params);

        topLayout.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                if(event.getAction() == MotionEvent.ACTION_DOWN) {
                    if (menuOpen == true) {
                        animSlideLeft();
                    }
                }

                return false;
            }
        });

        buttonSwitch.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                if(menuOpen == false){
                    animSlideRight();
                } else if (menuOpen == true) {
                    animSlideLeft();
                }
            }
        });

        AL = new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
                buttonSwitch.setClickable(false);
                topLayout.setEnabled(false);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub

            }
            @Override
            public void onAnimationEnd(Animation animation) {
                if(menuOpen == true) {
                    Log.d("", "Open");
                    topLayout.layout(oldLeft, oldTop, oldLeft + topLayout.getMeasuredWidth(), oldTop + topLayout.getMeasuredHeight() );
                    menuOpen = false;
                    buttonSwitch.setClickable(true);
                    topLayout.setEnabled(true);
                } else if(menuOpen == false) {
                    Log.d("","FALSE");
                    topLayout.layout(newleft, newTop, newleft + topLayout.getMeasuredWidth(), newTop + topLayout.getMeasuredHeight() );
                    topLayout.setEnabled(true);
                    menuOpen = true;
                    buttonSwitch.setClickable(true);
                }
            }
        };

        return V;
    }

    public void animSlideRight(){

        fakeLayout.setVisibility(View.VISIBLE);
        newleft = topLayout.getLeft() + animToPostion;
        newTop = topLayout.getTop();
        TranslateAnimation slideRight = new TranslateAnimation(0,newleft,0,0);
        slideRight.setDuration(500);
        slideRight.setFillEnabled(true);
        slideRight.setAnimationListener(AL);
        topLayout.startAnimation(slideRight);
    }

    public void animSlideLeft() {

        fakeLayout.setVisibility(View.GONE);
        oldLeft = topLayout.getLeft() - animToPostion;
        oldTop = topLayout.getTop();
        TranslateAnimation slideLeft = new TranslateAnimation(newleft,oldLeft,0,0);
        slideLeft.setDuration(500);
        slideLeft.setFillEnabled(true);
        slideLeft.setAnimationListener(AL);
        topLayout.startAnimation(slideLeft);
    }
}

End result for this post show bellow

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Отправить ответ

avatar
  Subscribe  
Notify of