Анимированные режимы видимости, GONE и VISIBLE - PullRequest
Новая
       52

Анимированные режимы видимости, GONE и VISIBLE

114 голосов
/ 28 октября 2010

Так что я пытаюсь анимировать, когда я устанавливаю видимость линейного макета с другими виджетами, от GONE до VISIBLE и наоборот. Я использую тумблеры, чтобы показать и скрыть. Вот изображение, чтобы показать, что я хочу сделать:

enter image description here

Я могу показать и скрыть, но я не понимаю, как правильно анимировать скольжение ....: (

Вот мой xml: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01" 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="vertical">
<ScrollView 
    android:id="@+id/ScrollView01" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:orientation="vertical">
        <!-- TITULO1 -->
            <LinearLayout 
                android:layout_height="wrap_content"
                android:layout_width="fill_parent" 
                android:orientation="horizontal" 
                android:background="#848284"
                android:padding="4px">  
                <TextView 
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:id="@+id/TextView01" 
                    android:text="Informação Geral" 
                    android:textColor="#FFFFFF"
                    android:gravity="left"
                    android:textStyle="bold"
                    android:singleLine="true"
                    android:ellipsize="end"
                    android:layout_gravity="center_vertical"
                    android:textSize="18px" 
                    android:paddingLeft="4px">
                </TextView>
                <LinearLayout 
                    android:layout_height="wrap_content"
                    android:layout_width="fill_parent" 
                    android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px">
                        <ToggleButton 
                            android:layout_height="wrap_content" 
                            android:layout_width="wrap_content" 
                            android:textOff="Expandir" 
                            android:textOn="Minimizar"
                            android:id="@+id/mostrar" 
                            android:width="80px">
                        </ToggleButton>
                </LinearLayout>

            </LinearLayout>
            <!--LINHA SEPARADORA-->
            <View 
                android:id="@+id/View01" 
                android:layout_width="wrap_content" 
                android:background="#B5B5B5" 
                android:layout_height="2px">
            </View>
            <!-- CONTENT INITIALLY HIDDEN (GONE) -->
            <LinearLayout 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:visibility="gone"  
                android:id="@+id/informgeral"
                android:orientation="vertical"> 
                <LinearLayout 
                    android:id="@+id/LinearLayout01" 
                    android:layout_height="wrap_content"
                    android:layout_width="fill_parent" 
                    android:paddingBottom="5px" 
                    android:paddingTop="5px" 
                    android:paddingLeft="8px"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">
                        <TextView
                            android:id="@+id/consult_nrprocesso"
                            android:textStyle="bold"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="left"
                            android:ellipsize="end"
                            android:layout_width="wrap_content" 
                            android:singleLine="true" 
                            android:text="@string/srch_number_proc"/>
                        <TextView
                            android:id="@+id/consult_nrprocessovalue"
                            android:layout_width="0px"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="right"
                            android:singleLine="true"
                            android:ellipsize="end"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_height="wrap_content" 
                        android:layout_width="fill_parent">
                        <TextView
                            android:id="@+id/consult_tipoprocinfo"
                            android:text="Numero Atribuido ao Processo"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:gravity="left"
                            android:singleLine="true"
                            android:ellipsize="end" 
                            android:layout_width="wrap_content" 
                            android:textSize="12px"/>
                    </LinearLayout>
                </LinearLayout>
                <View 
                    android:id="@+id/View01" 
                    android:layout_width="wrap_content" 
                    android:background="#B5B5B5" 
                    android:layout_height="1px">
                </View>
<LinearLayout 
    android:id="@+id/LinearLayout02" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_tipoproc"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/proc_type"/>
            <TextView
                android:id="@+id/consult_tipoprocvalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent">
    <TextView
            android:id="@+id/consult_tipoprocinfo"
            android:text="Variante do Processo em causa"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="fill_parent" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout03" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_etapa"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/srch_task"/>
            <TextView
                android:id="@+id/consult_etapavalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_etapainfo"
            android:text="Etapa onde se encontra o processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
    <LinearLayout
    android:id="@+id/LinearLayout04" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_criadopor"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/criado_por"/>
            <TextView
                android:id="@+id/consult_criadoporvalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_criadoporinfo"
            android:text="Entidade responsável pela criação do Processo."
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_assunto"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/proc_subject"/>
            <TextView
                android:id="@+id/consult_assuntovalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_assuntoinfo"
            android:text="Assunto do Processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
<View android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px">
</View>
<LinearLayout
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
            <TextView
                android:id="@+id/consult_datainicio"
                android:textStyle="bold"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:ellipsize="end"
                android:layout_width="wrap_content" 
                android:singleLine="true" 
                android:text="@string/srch_datebeg"/>
            <TextView
                android:id="@+id/consult_datainiciovalue"
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:singleLine="true"
                android:ellipsize="end"/>
    </LinearLayout>
    <LinearLayout
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content">
    <TextView
            android:id="@+id/consult_dataincioinfo"
            android:text="Data da criação do Processo"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="left"
            android:singleLine="true"
            android:ellipsize="end" 
            android:layout_width="wrap_content" 
            android:textSize="12px"/>
    </LinearLayout>     
</LinearLayout>
</LinearLayout>
<!-- TITULO2 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" android:padding="4px"> 
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Informação Complementar" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar2" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>
</LinearLayout>
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>

<!-- TITULO3 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Documentos Anexados" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical"
        android:textSize="18px" 
        android:paddingLeft="4px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>
<!-- TITULO4 -->
<LinearLayout 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284"
    android:padding="4px">  
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/TextView01" 
        android:text="Etapas" 
        android:textColor="#FFFFFF"
        android:gravity="left"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:layout_gravity="center_vertical"
        android:textSize="18px" 
        android:paddingLeft="4px">
    </TextView>
    <LinearLayout 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" 
        android:gravity="right|center_vertical" 
        android:paddingTop="2px">
        <ToggleButton 

            android:layout_height="wrap_content" 
            android:layout_width="wrap_content" 
            android:textOff="Expandir" 
            android:textOn="Minimizar"
            android:id="@+id/mostrar" 
            android:width="80px">
        </ToggleButton>
    </LinearLayout>     
</LinearLayout>
<!--LINHA SEPARADORA-->
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px">
</View>
</LinearLayout>
</ScrollView>

А вот код Java, который вызывает событие кнопки: 

final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar);


    bt.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            if (bt.isChecked()) {

                /*TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
                          -findViewById(R.id.informgeral).getHeight()*2);
                           slide.setDuration(500);
                           slide.setFillAfter(true);
                           findViewById(R.id.informgeral).startAnimation(slide);*/

                findViewById(R.id.informgeral).setVisibility(View.VISIBLE);;

            } else {

            /*  TranslateAnimation slide = new TranslateAnimation(0, 0, 0,
                          findViewById(R.id.informgeral).getHeight());
                           slide.setDuration(500);
                           slide.setFillAfter(true);
                           findViewById(R.id.informgeral).startAnimation(slide);*/


                           //findViewById(R.id.listBut).startAnimation(slide);


                findViewById(R.id.informgeral).setVisibility(View.GONE);;


            }
        }
});

Ответы [ 9 ]

274 голосов
/ 07 июля 2013

Для анимации изменений макета вы можете добавить следующий атрибут в свой LinearLayout 

android:animateLayoutChanges="true"

и он автоматически оживит изменения для вас.

Для информации, если используется android:animateLayoutChanges="true", пользовательская анимация через anim xml не будет работать.

22 голосов
/ 12 сентября 2012

Само изменение видимости может быть легко анимировано путем переопределения метода setVisibility.Посмотрите на полный код: 

public class SimpleViewAnimator extends FrameLayout
{
    private Animation inAnimation;
    private Animation outAnimation;

    public SimpleViewAnimator(Context context)
    {
        super(context);
    }

    public void setInAnimation(Animation inAnimation)
    {
        this.inAnimation = inAnimation;
    }

    public void setOutAnimation(Animation outAnimation)
    {
        this.outAnimation = outAnimation;
    }

    @Override
    public void setVisibility(int visibility)
    {
        if (getVisibility() != visibility)
        {
            if (visibility == VISIBLE)
            {
                if (inAnimation != null) startAnimation(inAnimation);
            }
            else if ((visibility == INVISIBLE) || (visibility == GONE))
            {
                if (outAnimation != null) startAnimation(outAnimation);
            }
        }

        super.setVisibility(visibility);
    }
}
14 голосов
/ 02 октября 2011

Как tomash сказал ранее: Легкого пути нет.

Возможно, вы захотите взглянуть на мой ответ здесь .
Это объясняет, какреализовать скользящий (с изменением размеров) вид.
В данном случае это был вид слева и справа: расширение влево, исчезновение вправо.
Возможно, это не совсем то, что вам нужно, но с изобретательским духом вы можете заставить его работать;) * +1010 *

12 голосов
/ 27 октября 2016

Это довольно старый вопрос, но комментарии показывают, что у людей все еще есть проблемы, поэтому вот мое решение со следующими дополнительными функциями:

  • настроить анимацию (скорость, тип, ...)
  • не нужно расширять любой класс
  • в моем случае, animateLayoutChanges имеет проблемы в новом CoordinatorLayout

Функция - Пример (у меня есть эта функция в служебном классе) 

public static void animateViewVisibility(final View view, final int visibility)
{
    // cancel runnning animations and remove and listeners
    view.animate().cancel();
    view.animate().setListener(null);

    // animate making view visible
    if (visibility == View.VISIBLE)
    {
        view.animate().alpha(1f).start();
        view.setVisibility(View.VISIBLE);
    }
    // animate making view hidden (HIDDEN or INVISIBLE)
    else
    {
        view.animate().setListener(new AnimatorListenerAdapter()
        {
            @Override
            public void onAnimationEnd(Animator animation)
            {
                view.setVisibility(visibility);
            }
        }).alpha(0f).start();
    }
}

Настройка анимации

После вызова view.animate() вы можете настроить анимацию по своему усмотрению (установить продолжительность, установить интерполятор и многое другое ...). Вы также можете скрыть представление, масштабируя его вместо настройки его альфа-значения, просто замените alpha(...) на scaleX(...) или scaleY(...) в служебном методе, если хотите, чтобы

2 голосов
/ 18 апреля 2016

Если кто-то еще сталкивается с этим в настоящем, вот гораздо более простая версия:

Можно установить свойство родительского макета в XML: 

android:animateLayoutChanges="true"

Это оживит представления, когда они будут добавлены / удалены.
Сохраните ссылку на представление и вставьте его по правильному индексу, и вы получите золото.

2 голосов
/ 06 января 2012

Возможно, вы захотите использовать ExpandableListView, специальный ListView, который позволяет открывать и закрывать группы.

1 голос
/ 06 февраля 2012

Вы можете использовать расширяемое представление списка, описанное в демонстрациях API, для отображения групп

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.

Чтобы анимировать движение элементов списка, вам придется переопределить метод getView и применить анимацию перевода к каждому элементу списка. Значения анимации зависят от положения каждого элемента списка. Это было кое-что, что я попробовал на простом представлении списка давным-давно.

1 голос
/ 28 октября 2010

Нет простого способа анимировать скрытие / отображение видов. Вы можете попробовать метод, описанный в следующем ответе: Как мне оживить View.setVisibility (GONE)

0 голосов
/ 24 марта 2018

Ну, есть очень простой способ, но просто установка android:animateLayoutChanges="true" не будет работать. Вам нужно включить TransitionType в вашей деятельности. Проверьте эту ссылку для получения дополнительной информации: http://www.thecodecity.com/2018/03/android-animation-on-view-visibility.html

...