Animation starts only after I've touched the s

问题:

I have a layout with a top bar container and a content container. When clicking on a button in the top bar, a vertical menu is displayed using an animation. My minSdkVersion is 9.

This works well when I start the app and I still haven't clicked a menu button (i.e. the content fragment has not changed), but as soon as I have clicked an option (and then replace the fragment in the content_container), the vertical menu behaves erratically. The click event of the menu btn is properly triggered, but the vertical menu is not always shown (but sometimes it is...). However, when I click the button and then touch the screen, the animation (show or hide the menu) starts.

I guess it has something to do with the vertical menu overlapping the content fragment, and then replacing the content fragment modify it in some way, but I can't find any solution.

Anybody can help?

top bar fragment

    @Override
    public void onActivityCreated (Bundle savedInstanceState){

        super.onActivityCreated(savedInstanceState);

        toggleMenu(0);      

        Button btn_menu = (Button) getView().findViewById(R.id.btn_menu);
        btn_menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVerticalMenu.setVisibility(View.VISIBLE);
                toggleMenu(1000);
            }
        });
    }

    private void toggleMenu(int duration){
        if(mMenuIsOpen){

            TranslateAnimation anim1 = new TranslateAnimation(0,0,0,-(mHeight-mMenuVerticalOffset));
            anim1.setFillAfter(true);
            anim1.setDuration(duration);
            mVerticalMenu.setAnimation(anim1);

            AlphaAnimation anim2 = new AlphaAnimation(0.7f, 0.0f);
            anim2.setFillAfter(true);
            anim2.setDuration(duration);            

            menu_option_01.setOnClickListener(null);
            menu_option_02.setOnClickListener(null);
            menu_option_03.setOnClickListener(null);

            mMenuIsOpen = false;
        }
        else{

            TranslateAnimation anim1 = new TranslateAnimation(0,0,-(mHeight-mMenuVerticalOffset),0);
            anim1.setFillAfter(true);
            anim1.setDuration(duration);
            mVerticalMenu.setAnimation(anim1);

            AlphaAnimation anim2 = new AlphaAnimation(0.0f, 0.7f);
            anim2.setFillAfter(true);
            anim2.setDuration(duration);

            menu_option_01.setOnClickListener(mButtonClickListener);
            menu_option_02.setOnClickListener(mButtonClickListener);
            menu_option_03.setOnClickListener(mButtonClickListener);

            mMenuIsOpen = true;
        }

    }



    private OnClickListener mButtonClickListener = new OnClickListener()
    {
        public void onClick(View v)
        {
            toggleMenu(1000);

            if(!v.isSelected()){        


                FragmentTransaction fragmentTransaction = getActivity().getSupportFragmentManager().beginTransaction();

                switch(v.getId()){

                case R.id.menu_option_01:

                    // replace content_container by fragment 1

                    break;

                case R.id.btn_02:

                    // replace content_container by fragment 2

                    break;      

                case R.id.btn_03:

                    // replace content_container by fragment 3

                    break;      

                }
            }
        }

    };

    private OnClickListener mBgClickListener = new OnClickListener()
    {
        public void onClick(View v)
        {
            toggleMenu(1000);           
        }
    };

Main layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="44dp" />

    <FrameLayout
        android:id="@+id/top_bar_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false" />

</RelativeLayout>

top bar layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00000000" >

    <LinearLayout
        android:id="@+id/vertical_menu"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_marginTop="44dp"
        android:background="#ffffff"
        android:orientation="vertical"
        android:visibility="gone" >

      <!-- menu layout -->

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:background="#ffffff" >

        <Button
            android:id="@+id/btn_menu"
            android:layout_width="50dp"
            android:layout_height="44dp"
            android:background="@drawable/menubtn" />   

        <ImageView
            android:layout_width="130dp"
            android:layout_height="44dp"
            android:src="@drawable/logo"
            android:layout_alignParentRight="true" />
    </RelativeLayout>

</RelativeLayout>

回答1:

At the end of my Toggle method, I invalidate the root view:

rootView.invalidate();

and now it works. Not quite clear why I must do that though...

回答2:

I know there is already an accepted answer for this but I had a similar problem and the answer didnt help.

I had a view that I declared at the end of my layout to keep its Z index above its siblings. I had to touch the page to make the animation work.

So I set the Z index again through Java and it worked.

view.bringToFront();