L'animation dans l'onglet Viewpager change le fondu / fondu comme l'écran d'introduction Linkedin
Je veux implémenter le même type d'animation tel que lié dans ne Android pour son écran Introduction (Connexion/enregistrement).
J'utilise le téléavertisseur de vue pour l'écran d'introduction et je veux implémenter une animation de fondu de fondu lors du changement d'image d'arrière-plan, selon le balayage de droite à gauche ou vice versa. Je veux implémenter une animation de fondu et de fondu sur le changement d'image d'arrière-plan en fonction du balayage de l'écran. toute aide est appréciée. Veuillez consulter mon code de mise en page
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent" >
<ImageView
Android:id="@+id/background_image"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:scaleType="centerCrop" />
<LinearLayout
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:orientation="vertical"
Android:weightSum="7" >
<LinearLayout
Android:id="@+id/linearLayout1"
Android:layout_width="match_parent"
Android:layout_height="0dp"
Android:layout_marginRight="10dp"
Android:layout_weight="1"
Android:gravity="right"
Android:orientation="horizontal" >
<ImageView
Android:id="@+id/imageView2"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="center"
Android:layout_marginRight="5dp"
Android:src="@drawable/icon_skip" />
<TextView
Android:id="@+id/skip_tv"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="center"
Android:text="Skip"
Android:textAppearance="?android:attr/textAppearanceMedium"
Android:textColor="@Android:color/white" />
</LinearLayout>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="0dp"
Android:layout_weight="4"
Android:gravity="bottom"
Android:orientation="vertical" >
<ImageView
Android:id="@+id/imageView3"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="center"
Android:src="@drawable/logo" />
<Android.support.v4.view.ViewPager
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/pager"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
tools:context="com.xyz.View.IntroductionScreen" />
</LinearLayout>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="0dp"
Android:layout_weight="2"
Android:gravity="center"
Android:orientation="vertical" >
<Button
Android:id="@+id/connection_bt"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginBottom="10dp"
Android:layout_marginLeft="40dp"
Android:layout_marginRight="40dp"
Android:background="@drawable/button"
Android:text="CONNEXION"
Android:textColor="@Android:color/white" />
<Button
Android:id="@+id/register_bt"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginLeft="40dp"
Android:layout_marginRight="40dp"
Android:layout_marginTop="10dp"
Android:background="@drawable/button"
Android:text="INSCRIPTION"
Android:textColor="@Android:color/white" />
</LinearLayout>
</LinearLayout>
Et la disposition de la vue du fragment de pageur est
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent">
<LinearLayout
Android:id="@+id/text_layout"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="10dp"
Android:orientation="vertical" >
<TextView
Android:id="@+id/tagline_tv1"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:gravity="center"
Android:singleLine="true"
Android:text="Laissez votre prochain job"
Android:textAppearance="?android:attr/textAppearanceMedium"
Android:textColor="@Android:color/white" />
<TextView
Android:id="@+id/details_tv"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:gravity="center"
Android:maxLines="2"
Android:text="vous trouver"
Android:textAppearance="?android:attr/textAppearanceMedium"
Android:textColor="@Android:color/white" />
</LinearLayout>
</RelativeLayout>
échantillon Splashs creen c'est ce que je veux implémenter. 
Je vous remercie
C'est un lag free one et gère également le Buttons
Idée principale:
1) créez d'abord un arrière-plan transparent pour vos fragments.
2) Créez LayerDrawable et ajoutez une image d'arrière-plan de chaque fragment en tant qu'élément. Ajoutez ensuite votre LayerDrawable comme arrière-plan de votre viseur.
3) dans la méthode onCreate, définissez correctement l'alpha de chaque calque de sorte que celui du haut ait une valeur alpha de 255.
4) définissez pour chaque vue de votre FragmentStatPagerAdapter une balise qui correspond à l'index dessinable que vous avez déclaré dans le LayerDrawable. par exemple, lorsque vous ouvrez l'application, FragmentA s'affiche, de sorte que sa balise doit correspondre au dessin supérieur qui est 2 (à partir de 0). la dernière balise de page doit être 0 correspond au plus petit dessinable.
5) changer le dessin de chaque vue à la fonction transformPage
6) pour ajouter le bouton, utilisez RelativeLayout. Pour placer des boutons sur toutes les vues, utilisez RelativeLayout. Plus tard, les enfants se placent plus haut sur l'axe Z. Vous pouvez le voir dans le code:
laisse maintenant voir le code:
Activité principale
public class MainActivity extends FragmentActivity {
ViewPager viewPager=null;
int numberOfViewPagerChildren = 3;
int lastIndexOfViewPagerChildren = numberOfViewPagerChildren - 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
final LayerDrawable background = (LayerDrawable) viewPager.getBackground();
background.getDrawable(0).setAlpha(0); // this is the lowest drawable
background.getDrawable(1).setAlpha(0);
background.getDrawable(2).setAlpha(255); // this is the upper one
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View view, float position) {
int index = (Integer) view.getTag();
Drawable currentDrawableInLayerDrawable;
currentDrawableInLayerDrawable = background.getDrawable(index);
if(position <= -1 || position >= 1) {
currentDrawableInLayerDrawable.setAlpha(0);
} else if( position == 0 ) {
currentDrawableInLayerDrawable.setAlpha(255);
} else {
currentDrawableInLayerDrawable.setAlpha((int)(255 - Math.abs(position*255)));
}
}
});
}
class MyAdapter extends FragmentStatePagerAdapter
{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
Fragment fragment=null;
if(i==0)
{
fragment=new FragmentA();
}
if(i==1)
{
fragment=new FragmentB();
}
if(i==2)
{
fragment=new FragmentC();
}
return fragment;
}
@Override
public int getCount() {
return numberOfViewPagerChildren;
}
@Override
public boolean isViewFromObject(View view, Object object) {
if(object instanceof FragmentA){
view.setTag(2);
}
if(object instanceof FragmentB){
view.setTag(1);
}
if(object instanceof FragmentC){
view.setTag(0);
}
return super.isViewFromObject(view, object);
}
}
}
activity_main.xml
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent" >
<Android.support.v4.view.ViewPager
Android:id="@+id/pager"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@drawable/layerdrawable" >
</Android.support.v4.view.ViewPager>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
Android:orientation="horizontal"
Android:layout_marginBottom="48dip" >
<Button
Android:layout_width="0dip"
Android:layout_height="wrap_content"
Android:layout_weight="1"
Android:text="Sign in"
Android:layout_margin="16dip"
Android:background="#2ec6e4"
Android:textColor="#FFFFFF" />
<Button
Android:layout_width="0dip"
Android:layout_height="wrap_content"
Android:layout_weight="1"
Android:text="Join us"
Android:background="#2ec6e4"
Android:layout_margin="16dip"
Android:textColor="#FFFFFF"
/>
</LinearLayout>
</RelativeLayout>
LayerDrawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<bitmap
Android:id="@+id/Idofbg3"
Android:gravity="fill"
Android:src="@drawable/bg3" />
</item>
<item>
<bitmap
Android:id="@+id/Idofbg2"
Android:gravity="fill"
Android:src="@drawable/bg2" />
</item>
<item>
<bitmap
Android:id="@+id/Idofbg1"
Android:gravity="fill"
Android:src="@drawable/bg1" />
</item>
</layer-list>
pour les paresseux qui ne veulent tout simplement pas déclarer de fragments:
FragmentA
public class FragmentA extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_a,container,false);
return v;
}
}
fragment_a.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent" Android:layout_height="match_parent"
Android:id="@+id/FragmentA"
Android:background="@Android:color/transparent">
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textAppearance="?android:attr/textAppearanceLarge"
Android:text="This is Fragment A"
Android:textColor="#FFFFFF"
Android:id="@+id/textView"
Android:gravity="center"
Android:layout_alignParentTop="true"
Android:layout_alignParentLeft="true"
Android:layout_alignParentRight="true"
Android:layout_alignParentBottom="true" />
</RelativeLayout>
Définissez un ViewPager.PageTransformer sur ViewPager et réalisez l'animation souhaitée en utilisant les propriétés d'animation aplha et translation.
L'entrée la plus importante est le paramètre position passé au rappel transformPage. La valeur de position indique la position actuelle de la vue.
En supposant que les vues dans ViewPager sont de pleine largeur, voici comment les valeurs de position doivent être interprétées.
------------------------------------------------------------------------------------
position | what does it mean
------------------------------------------------------------------------------------
0 | view is positioned in the center and fully visible to the user.
-1 | view is positioned in the left and not visible to the user.
1 | view is positioned in the right and not visible to the user.
>-1 & <0 | view is being scrolled towards left and is partially visible.
>0 & <1 | view is being scrolled towards right and is partially visible.
------------------------------------------------------------------------------------
mPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View view, float position) {
// Ensures the views overlap each other.
view.setTranslationX(view.getWidth() * -position);
// Alpha property is based on the view position.
if(position <= -1.0F || position >= 1.0F) {
view.setAlpha(0.0F);
} else if( position == 0.0F ) {
view.setAlpha(1.0F);
} else { // position is between -1.0F & 0.0F OR 0.0F & 1.0F
view.setAlpha(1.0F - Math.abs(position));
}
// TextView transformation
view.findViewById(R.id.textView).setTranslationX(view.getWidth() * position);
}
});
Voici la mise en page:
<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent" >
<ImageView
Android:layout_alignParentTop="true"
Android:id="@+id/imageView"
Android:layout_width="match_parent"
Android:layout_height="match_parent" />
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:id="@+id/textView" />
</RelativeLayout>
Voici l'enregistrement d'écran:
