为多屏幕简介教程添加动画 - Xamarin.Android

时间:2017-05-17 14:08:06

标签: c# android animation xamarin xamarin.android

我需要为我们的应用制作多屏幕介绍教程。它看起来应该是这样的 - > 第一个屏幕有动画,它会自动开始 - >用户滑动以更改页面(屏幕) - >第二个屏幕有动画并且它会自动启动 - >用户滑动... 等等四个屏幕。

我做了一个完美的例子但是每个屏幕都有效,而不是动画它有图片。我知道如何制作DrawableAnimations,你可以在下面的例子中看到,它们是逐帧制作的。我只是想请某人帮助我在布局和MainActivity中实现这些动画。以下是我的MainActivity,Main布局,LayoutSlide的代码(每个屏幕的布局,显示该步骤的动画)。 AnimatedScreen(要设置动画的项目列表)。

注意:这是使用图片而不是动画的代码,如果我的问题的解决方案比我想象的更复杂并且有人有解决方案,我们可以联系彼此通过电子邮件或Skype或任何其他服务。

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和第三和第四代码相同,只是不同的图片):

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

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

根据您的代码,我猜您想要在用户滑动ViewPager时在页面之间显示动画,然后您只需将Transformer设置为ViewPager即可。例如:

...
viewpager.Adapter = adapter;
viewpager.SetPageTransformer(true, new ZoomOutPageTransformer());

由于您没有要求特定动画,ZoomOutPageTransformer只是我根据官方文档修改的示例: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;
        }
    }
}