マルチスクリーンイントロチュートリアルのアニメーションを追加する - Xamarin.Android

Question

私たちのアプリのマルチスクリーンイントロチュートリアルを作成する必要があります。それは - >最初の画面にアニメーションがあり、それは自動的に始まります - ページを変更するためのユーザーのスワイプ - > 2番目の画面にアニメーションがあり、それが自動的に始まります - >ユーザーがスワイプします...画面。

アニメーションではなく、すべての画面で完璧に動作する例を作成しました。私はDrawableAnimationsを以下の例で見ることができ、フレーム単位で作成する方法を知っています。私はレイアウトやMainActivityでこれらのアニメーションを実装するのを助けてくれるように頼んでいます。ここにMainActivity、メインレイアウト、LayoutSlide（そのステップのアニメーションを表示するすべての画面のレイアウト）のコードがあります。 AnimatedScreen（アニメートするアイテムのリスト）。

注：これは、画像ではないアニメーションを使用するコードである私の問題の解決策は、私が思った以上に複雑で、誰かが解決策を持っている場合、我々はEメールまたはスカイプを介して相互に連絡することができますか他のサービス。

MainActivity：

using Android.App; 
using Android.Widget; 
using Android.OS; 
using Android.Support.V7.App; 
using Android.Support.V4.View; 
using Android.Views; 
using Android.Content; 
using Android.Text; 
using Android.Content.Res; 
using Android.Graphics; 
using Android; 
using Android.Graphics.Drawables; 

namespace IntroSliderEndy 
{ 
    [Activity(Label = "SliderForTheFirstLaunch")] 
    public class MainActivity : AppCompatActivity 
    { 
     ViewPager viewPager; 
     LinearLayout dotsLayout; 
     TextView[] dots; 
     public int[] layouts; 
     Button btnNext, btnSkip; 

     protected override void OnCreate(Bundle savedInstanceState) 
     { 
      base.OnCreate(savedInstanceState); 

      SetContentView(Resource.Layout.Main); 

      layouts = new int[] 
      { 
         Resource.Layout.LayoutSlide1, 
         Resource.Layout.LayoutSlide2, 
         Resource.Layout.LayoutSlide3, 
         Resource.Layout.LayoutSlide4 
      }; 

      viewPager = (ViewPager)FindViewById(Resource.Id.viewPager); 
      dotsLayout = (LinearLayout)FindViewById(Resource.Id.layoutPanel); 
      btnNext = (Button)FindViewById(Resource.Id.btn_next); 
      btnSkip = (Button)FindViewById(Resource.Id.btn_skip); 

      addDots(0); 

      ViewPagerAdapter adapter = new ViewPagerAdapter(layouts); 
      viewPager.Adapter = adapter; 

      viewPager.PageSelected += ViewPager_PageSelected; 
      //viewPager.AddOnPageChangeListener(new ViewPager.IOnPageChangeListener()); 


      btnNext.Click += (sender, e) => 
      { 
       int current = GetItem(+1); 
       if (current < layouts.Length) 
        //Pomakni se u drugi screen 
        viewPager.CurrentItem = current; 
       else 
       { 
        //Pokreni prvi screen - inace ce se tu otvoriti aplikacija 
        Intent intent = new Intent(this, typeof(MainActivity)); 
        StartActivity(intent); 

       } 
      }; 

      btnSkip.Click += (sender, e) => 
      { 
       Intent intent = new Intent(this, typeof(MainActivity)); 
       StartActivity(intent); 

      }; 
     } 

     void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e) 
     { 
      addDots(e.Position); 

      if (e.Position == layouts.Length - 1) 
      { 
       //Ako je zadnja stranica stavi "GOT IT" 
       btnNext.Text = (GetString(Resource.String.start)); 
       btnSkip.Visibility = ViewStates.Gone; 

      } 
      else 
      { 
       //Ako nije zadnja stranica 
       btnNext.Text = (GetString(Resource.String.next)); 
       btnSkip.Visibility = ViewStates.Visible; 
      } 
     } 

     private void addDots(int currentPage) 
     { 
      dots = new TextView[layouts.Length]; 


      string[] colorsActive = { "#6A2D4E", "#6A2D4E", "#6A2D4E", "#6A2D4E" }; 
      string[] colorsInactive = { "#C099AE", "#C099AE", "#C099AE", "#C099AE" }; 


      dotsLayout.RemoveAllViews(); 
      for (int i = 0; i < dots.Length; i++) 
      { 
       dots[i] = new TextView(this); 
       dots[i].Text = (Html.FromHtml("•")).ToString(); 
       dots[i].TextSize = 35; 
       dots[i].SetTextColor(Color.ParseColor(colorsActive[currentPage])); 
       dotsLayout.AddView(dots[i]); 
      } 

      if (dots.Length > 0) 
      { 
       dots[currentPage].SetTextColor(Color.ParseColor(colorsInactive[currentPage])); 
      } 
     } 

     int GetItem(int i) 
     { 
      return viewPager.CurrentItem + i; 
     } 

     public class ViewPagerAdapter : PagerAdapter 
     { 
      LayoutInflater layoutInflater; 
      int[] _layout; 

      public ViewPagerAdapter(int[] layout) 
      { 
       _layout = layout; 
      } 

      public override Java.Lang.Object InstantiateItem(ViewGroup container, int position) 
      { 
       layoutInflater = (LayoutInflater)Android.App.Application.Context.GetSystemService(Context.LayoutInflaterService); 
       View view = layoutInflater.Inflate(_layout[position], container, false); 
       container.AddView(view); 

       return view; 
      } 

      public override int Count 
      { 
       get 
       { 
        return _layout.Length; 
       } 
      } 

      public override bool IsViewFromObject(View view, Java.Lang.Object objectValue) 
      { 
       return view == objectValue; 
      } 

      public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue) 
      { 
       View view = (View)objectValue; 

       container.RemoveView(view); 
      } 
     } 
    } 
} 

主レイアウト：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <android.support.v4.view.ViewPager 
     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
    <LinearLayout 
     android:id="@+id/layoutPanel" 
     android:layout_width="match_parent" 
     android:layout_alignParentBottom="true" 
     android:layout_height="40dp" 
     android:gravity="center" 
     android:layout_marginBottom="15dp" 
     android:orientation="horizontal" /> 
    <View 
     android:layout_width="match_parent" 
     android:layout_height="1dp" 
     android:alpha="0.5" 
     android:layout_above="@id/layoutPanel" 
     android:background="@android:color/white" /> 
    <Button 
     android:id="@+id/btn_next" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:background="@android:color/transparent" 
     android:text="@string/next" 
     android:textColor="#6A2D4E" /> 
    <Button 
     android:id="@+id/btn_skip" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:background="@android:color/transparent" 
     android:text="@string/skip" 
     android:textColor="#6A2D4E" /> 
</RelativeLayout> 

LayoutSlide1（これが唯一の最初の画面のための例であるが、私は異なる背景を使用するので、他は同じである）：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/screen1"> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="center" 
     android:gravity="center" 
     android:orientation="vertical"> 
    </LinearLayout> 
</RelativeLayout> 

最後にFirstScreenAnimated（SecondScreenとThirdおよびFourthのコード同じで、異なる写真のみ）：

<?xml version="1.0" encoding="utf-8"?> 
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> 
    <item android:drawable="@drawable/BoyIntroFirst01" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst02" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst03" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst04" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst05" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst06" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst07" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst08" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst09" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst10" 
     android:duration="150" /> 
    <item android:drawable="@drawable/BoyIntroFirst11" 
     android:duration="150" /> 
</animation-list> 

何か助けていただきありがとうございます！

Answer 1

コードに基づいて、ユーザーがViewPagerをスワイプしたときにページ間にアニメーションを表示したい場合は、ViewPagerにTransformerを設定するだけです。たとえば：Customize the Animation with PageTransformer：

public class ZoomOutPageTransformer : Java.Lang.Object, IPageTransformer 
{ 
    private static float MIN_SCALE = 0.85f; 
    private static float MIN_ALPHA = 0.5f; 

    public void TransformPage(View page, float position) 
    { 
     int pageWidth = page.Width; 
     int pageHeight = page.Height; 

     if (position < -1) 
     { 
      page.Alpha = 0; 
     } 
     else if (position <= 1) 
     { 
      float scaleFactor = Math.Max(MIN_SCALE, 1 - Math.Abs(position)); 
      float vertMargin = pageHeight * (1 - scaleFactor)/2; 
      float horzMargin = pageWidth * (1 - scaleFactor)/2; 
      if (position < 0) 
       page.TranslationX = (horzMargin - vertMargin)/2; 
      else 
       page.TranslationX = (vertMargin - horzMargin)/2; 

      //Scale the page down 
      page.ScaleX = scaleFactor; 
      page.ScaleY = scaleFactor; 

      page.Alpha = (MIN_ALPHA + scaleFactor - MIN_SCALE)/(1 - MIN_SCALE) * (1 - MIN_ALPHA); 
     } 
     else 
     { 
      page.Alpha = 0; 
     } 
    } 
}