Can I partially hide a layout?

As I've a master in MS Paint, I will just upload a picture selfdescripting what I'm trying to achieve.

I've searched, but I'm not really sure what do I've to search. I've found something called Animations. I managed to rotate, fade, etc an element from a View (with this great tutorial http://www.vogella.com/articles/AndroidAnimation/article.html)

But this is a bit limited for what I'm trying to achieve, and now, I'm stuck, because I don't know how is this really called in android development. Tried words like "scrollup layouts" but I didn't get any better results.

Can you give me some tips?

Thank you.

You can see a live example, with this app: https://play.google.com/store/apps/details?id=alexcrusher.just6weeks

Sincerely,

Sergi

回答1:

Use something like this as your layout (Use Linear, Relative or other layout if you wish):

<LinearLayout
    android:id="@+id/lty_parent">
    <LinearLayout
        android:id="@+id/lyt_first" />
    <LinearLayout 
        android:id="@+id/lyt_second"/>
</LinearLayout>

And then in an onClick method on whatever you want to use to control it, set the Visibility between Visible and Gone.

public void buttonClickListener(){

    ((Button) findViewById(R.id.your_button))
        .setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {


        if (lyt_second.getVisibility() == View.GONE) {
            lyt_second.setVisibility(View.VISIBILE);
        } 
        else {
            lyt_second.setVisibility(View.GONE);            
        }
    });

Which is fine if you just want a simple appear/disappear with nothing fancy. Things get a little bit more complicated if you want to animate it, as you need to play around with negative margins in order to make it appear to grow and shrink, like so:

We use the same onClick method that we did before, but this time when we click it starts up a custom SlideAnimation for the hidden/visible view.

@Override
public void onClick(View v) {
    SlideAnimation slideAnim = new SlideAnimation(lyt_second, time);
    lyt_second.startAnimation(slideAnim);
}

The implementation of the SlideAnimation is based on a general Animation class, which we extend and then Override the transformation.

public SlideAnimation(View view, int duration) {

        //Set the duration of the animation to the int we passed in
        setDuration(duration);

        //Set the view to be animated to the view we passed in
        viewToBeAnimated = view;

        //Get the Margin Parameters for the view so we can edit them
        viewMarginParams = (MarginLayoutParams) view.getLayoutParams();

        //If the view is VISIBLE, hide it after. If it's GONE, show it before we start.
        hideAfter = (view.getVisibility() == View.VISIBLE);

        //First off, start the margin at the bottom margin we've already set. 
        //You need your layout to have a negative margin for this to work correctly.
        marginStart = viewMarginParams.bottomMargin;

        //Decide if we're expanding or collapsing
        if (marginStart == 0){
            marginEnd = 0 - view.getHeight();
        }
        else {
            marginEnd = 0;
        }

        //Make sure the view is visible for our animation
        view.setVisibility(View.VISIBLE);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        if (interpolatedTime < 1.0f) {

            // Setting the new bottom margin to the start of the margin 
            // plus the inbetween bits
            viewMarginParams.bottomMargin = marginStart
                    + (int) ((marginEnd - marginStart) * interpolatedTime);

            // Request the layout as it happens so we can see it redrawing
            viewToBeAnimated.requestLayout();

        // Make sure we have finished before we mess about with the rest of it
        } else if (!alreadyFinished) {
            viewMarginParams.bottomMargin = marginEnd;
            viewToBeAnimated.requestLayout();

            if (hideAfter) {
                viewToBeAnimated.setVisibility(View.GONE);
            }
            alreadyFinished = true;
        }
            hideAfter = false;
    }
}

EDIT: If anyone had used this code before and found that if you click on the button that starts the animation more than once before the animation was finished, it would mess up the animation from then on, causing it to always hide the view after the animation finished. I missed the reset of the hideAfter boolean near the bottom of the code, added it now.

回答2:

you can do this manually by using setvisibility feature on the event onClick()

use this

dynamically adding two views one below other