support - viewpager android slider
La animación en la pestaña Viewpager cambia fadein/fadeout como pantalla de introducción a Linkedin (2)
Establezca ViewPager.PageTransformer en ViewPager y consiga la animación deseada utilizando las propiedades de animación de translation y aplha .
La entrada más importante es el parámetro de position pasado a la devolución de llamada transformPage . El valor de posición indica cómo se posiciona la vista actualmente.
Asumiendo que las vistas en ViewPager son de ancho completo, aquí es cómo se debe interpretar el valor de posición.
------------------------------------------------------------------------------------
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);
}
});
Aquí está el diseño:
<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>
Aquí está el registro de la pantalla:
Quiero implementar el mismo tipo de animación, como el enlazado in does en la aplicación de Android para su pantalla de Introducción (Inicio de sesión / registro).
Estoy usando el buscapersonas para la pantalla de Introducción y quiero implementar la animación de fundido de fadein en el cambio de la imagen de fondo, como deslizar de derecha a izquierda o viceversa. Quiero implementar la animación de fadein y fadeout en el cambio de imagen de fondo de acuerdo con el deslizamiento de la pantalla. cualquier ayuda es apreciada Por favor, eche un vistazo a mi código de diseño
<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>
Y el diseño del fragmento de paginador de vista es
<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>
muestra Splashs creen esto es lo que quiero implementar. Gracias
Este es un lag free y también maneja los Buttons
Idea principal:
1) Primero crea un fondo transparente para tus fragmentos.
2) Cree LayerDrawable y agregue una imagen de fondo de cada fragmento como un elemento. A continuación, agregue su LayerDrawable como fondo de su viewpager.
3) en el método onCreate establece alfa de cada capa correctamente, por lo que solo el superior tiene un valor alfa de 255.
4) configure para cada vista de su FragmentStatPagerAdapter una etiqueta que corresponda al índice LayerDrawable que declaró en LayerDrawable . por ejemplo, cuando abre la aplicación se muestra FragmentA por lo que su etiqueta debe corresponder a drawable superior que es 2 (comenzando desde 0). la etiqueta de la última página debe ser 0 corresponde al dibujable más bajo.
5) cambiar dibujable de cada vista en la función transformPage
6) para agregar el botón use RelativeLayout . Para colocar botones en la parte superior de todas las vistas, use RelativeLayout . Más tarde, los niños se colocan más arriba en el eje Z. Puedes verlo en el código:
ahora veamos código:
Actividad principal
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>
para las personas perezosas que simplemente no quieren declarar fragmentos:
FragmentoA
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>