web-dev-qa-db-ja.com

ViewpagerタブのアニメーションはLinkedinの紹介画面のようにフェードイン/フェードアウトを変更します

Androidはじめに（ログイン/登録）画面のアプリケーション）にリンクインされているような同じ種類のアニメーションを実装したいと思います。

概要画面にビューページャーを使用しており、背景画像の変更時にフェードインフェードアウトアニメーションを実装したいと思います。画面のスワイプによる背景画像の変化にフェードインとフェードアウトのアニメーションを実装したい。どんな助けでもありがたいです。私のレイアウトコードを見てください

<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>

そして、ページャーフラグメントレイアウトの表示は

<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>

サンプルSplashs creenこれは私が実装したいものです。 Linkedin Spalsh screen ありがとうございました

androidanimationandroid-viewpagerandroid-animation
24
Swap-IOS-Android

これは lag free 1つで、Buttonsも処理します

enter image description here

本旨：

1）最初にフラグメントの透明な背景を作成します。

2）LayerDrawableを作成し、各フラグメントの背景画像をアイテムとして追加します。次に、LayerDrawableをビューページャーの背景として追加します。

3）onCreateメソッドで各レイヤーのアルファを正しく設定し、上のレイヤーのアルファの値が255になるようにします。

4）FragmentStatPagerAdapterで宣言した描画可能なインデックスに対応するタグをLayerDrawableの各ビューに設定します。たとえば、アプリを開いたときにFragmentAが表示されているので、そのタグは2（0から始まる）の上部のドローアブルに対応している必要があります。最後のページのタグは0でなければなりません。これは最低のドローアブルに対応します。

5）関数transformPageで各ビューのドローアブルを変更

6）ボタンを追加するには、RelativeLayoutを使用します。すべてのビューの上にボタンを配置するには、RelativeLayoutを使用します。その後、子供たちはZ軸上に配置されます。あなたはコードでそれを見ることができます：

コードを見てみましょう：

主な活動

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>

単にフラグメントを宣言したくない怠惰な人々のために：

フラグメントA

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>
52
mmlooloo

ViewPager.PageTransformer をViewPagerに設定し、aplhaおよびtranslationアニメーションプロパティを使用して目的のアニメーションを実現します。

最も重要な入力は、positionコールバックに渡されるtransformPageパラメータです。位置の値は、ビューが現在どのように配置されているかを示します。

ViewPagerのビューが全幅であると仮定して、位置の値をどのように解釈する必要があるかを次に示します。

------------------------------------------------------------------------------------
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);
        }
    });

ここにレイアウトがあります：

<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>

これがスクリーンレコードです：

Screen record

18
Manish Mulimani