Android - Transição de Fragmento
O que é uma transição?
As transições de atividade e fragmento no Lollipop são criadas em cima de um recurso relativamente novo no Android chamado Transições. Introduzido no KitKat, a estrutura de transição fornece uma API conveniente para animação entre diferentes estados da IU em um aplicativo. A estrutura é construída em torno de dois conceitos principais: cenas e transições. Uma cena define um determinado estado da IU de um aplicativo, enquanto uma transição define a mudança animada entre duas cenas.
Quando uma cena muda, uma transição tem duas responsabilidades principais -
- Capture o estado de cada visualização nas cenas inicial e final.
- Crie um animador com base nas diferenças que animarão as vistas de uma cena para a outra.
Exemplo
Este exemplo irá explicar como criar sua animação personalizada com transição de fragmento. Então, vamos seguir as etapas a seguir para se assemelhar ao que seguimos durante a criação do Exemplo Hello World -
Degrau | Descrição |
---|---|
1 | Você usará o Android Studio para criar um aplicativo Android e nomeá-lo como fragmentcustomanimations em um pacote com.example.fragmentcustomanimations , com Activity em branco. |
2 | Modifique o activity_main.xml, que foi colocado em res / layout / activity_main.xml para adicionar uma Visualização de Texto |
3 | Crie um layout chamado fragment_stack.xml.xml no diretório res / layout para definir sua tag de fragmento e tag de botão |
4 | Crie uma pasta, que é colocada em res / e nomeie-a como animação e adicione fragment_slide_right_enter.xml fragment_slide_left_exit.xml, fragment_slide_right_exit.xml e fragment_slide_left_enter.xml |
5 | Em MainActivity.java, é necessário adicionar pilha de fragmentos, gerenciador de fragmentos e onCreateView () |
6 | Execute o aplicativo para iniciar o emulador Android e verifique o resultado das alterações feitas no aplicativo. |
a seguir estará o conteúdo de res.layout / activity_main.xml que continha TextView
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:text="@string/hello_world"
android:textAppearance="?android:attr/textAppearanceMedium" />
A seguir estará o conteúdo de res/animation/fragment_stack.xmlArquivo. continha layout de quadro e botão
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
android:id="@+id/fragment1"
android:name="com.pavan.listfragmentdemo.MyListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
A seguir estará o conteúdo de res/animation/fragment_slide_left_enter.xmlArquivo. continha método definido e animador de objeto
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="100dp" android:valueTo="0dp"
android:valueType="floatType"
android:propertyName="translationX"
android:duration="@android:integer/config_mediumAnimTime" />
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="0.0" android:valueTo="1.0"
android:valueType="floatType"
android:propertyName="alpha"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
a seguir estará o conteúdo de res/animation/fragment_slide_left_exit.xml file.it continha tags de animador de conjunto e objeto.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="0dp" android:valueTo="-100dp"
android:valueType="floatType"
android:propertyName="translationX"
android:duration="@android:integer/config_mediumAnimTime" />
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="1.0" android:valueTo="0.0"
android:valueType="floatType"
android:propertyName="alpha"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
O código a seguir será o conteúdo de res/animation/fragment_slide_right_enter.xmlfile.it continha tags de animador de conjunto e objeto
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="-100dp" android:valueTo="0dp"
android:valueType="floatType"
android:propertyName="translationX"
android:duration="@android:integer/config_mediumAnimTime" />
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="0.0" android:valueTo="1.0"
android:valueType="floatType"
android:propertyName="alpha"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
o código a seguir será o conteúdo de res/animation/fragment_slide_right_exit.xmlarquivo, ele continha tags de animador de conjunto e objeto
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="0dp" android:valueTo="100dp"
android:valueType="floatType"
android:propertyName="translationX"
android:duration="@android:integer/config_mediumAnimTime" />
<objectAnimator
android:interpolator="@android:interpolator/decelerate_quint"
android:valueFrom="1.0" android:valueTo="0.0"
android:valueType="floatType"
android:propertyName="alpha"
android:duration="@android:integer/config_mediumAnimTime" />
</set>
o código a seguir será o conteúdo de src/main/java/MainActivity.javaArquivo. continha ouvinte de botão, fragmento de pilha e onCreateView
package com.example.fragmentcustomanimations;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
/**
* Demonstrates the use of custom animations in a FragmentTransaction when
* pushing and popping a stack.
*/
public class FragmentCustomAnimations extends Activity {
int mStackLevel = 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_stack);
// Watch for button clicks.
Button button = (Button)findViewById(R.id.new_fragment);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
addFragmentToStack();
}
});
if (savedInstanceState == null) {
// Do first time initialization -- add initial fragment.
Fragment newFragment = CountingFragment.newInstance(mStackLevel);
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.add(R.id.simple_fragment, newFragment).commit();
}
else
{
mStackLevel = savedInstanceState.getInt("level");
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putInt("level", mStackLevel);
}
void addFragmentToStack() {
mStackLevel++;
// Instantiate a new fragment.
Fragment newFragment = CountingFragment.newInstance(mStackLevel);
// Add the fragment to the activity, pushing this transaction
// on to the back stack.
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.setCustomAnimations(R.animator.fragment_slide_left_enter,
R.animator.fragment_slide_left_exit,
R.animator.fragment_slide_right_enter,
R.animator.fragment_slide_right_exit);
ft.replace(R.id.simple_fragment, newFragment);
ft.addToBackStack(null);
ft.commit();
}
public static class CountingFragment extends Fragment {
int mNum;
/**
* Create a new instance of CountingFragment, providing "num"
* as an argument.
*/
static CountingFragment newInstance(int num) {
CountingFragment f = new CountingFragment();
// Supply num input as an argument.
Bundle args = new Bundle();
args.putInt("num", num);
f.setArguments(args);
return f;
}
/**
* When creating, retrieve this instance's number from its arguments.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mNum = getArguments() != null ? getArguments().getInt("num") : 1;
}
/**
* The Fragment's UI is just a simple text view showing its
* instance number.
*/
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.hello_world, container, false);
View tv = v.findViewById(R.id.text);
((TextView)tv).setText("Fragment #" + mNum);
tv.setBackgroundDrawable(getResources().
getDrawable(android.R.drawable.gallery_thumb));
return v;
}
}
}
a seguir estará o conteúdo de AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.fragmentcustomanimations"
android:versionCode="1"
android:versionName="1.0" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.fragmentcustomanimations.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Executando o aplicativo
Vamos tentar executar nosso Fragment Transitionsaplicativo que acabamos de criar. Suponho que você tenha criado o seuAVDao fazer a configuração do ambiente. Para executar o aplicativo no Android Studio, abra um dos arquivos de atividade do seu projeto e clique no ícone Executar na barra de ferramentas. O Android instala o aplicativo em seu AVD e o inicia e se tudo estiver bem com sua configuração e aplicativo, ele exibirá a seguinte janela do emulador:
Se clicar no novo fragmento, ele será alterado do primeiro fragmento para o segundo fragmento como mostrado abaixo