c# - Xamarin 分步向导 android View

Question

我想在 Xamarin c# 中构建一个 android Activity ，用于逐步注册和/或信息。我怎样才能做这样的事情:

任何人都可以给我一个代码示例或任何东西吗？谢谢。

Answer 1

基本上您需要使用一个名为 ViewPager 的元素，并且每个页面都将是一个不同的 Fragment。您可以使用 this图书馆来帮助你。随时提出问题和指导。

编辑 - 详细解释:
将两张图片添加到您的可绘制文件夹 - 一张未选中的点和一张选中的点。 添加这两个 NuGet 包(在解决方案资源管理器中右键单击您的项目，单击管理 NuGet 包，然后搜索):Xamarin.Android.Support.v4 和 Xamarin.Android.Support.v7.AppCompat。

然后你的 Main.axml 布局，把这个:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:popupTheme="@style/ThemeOverlay.AppCompat"
      app:titleMarginTop="15dp"/>
  <FrameLayout
     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/viewPagerCountDots"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginBottom="10dp"
               android:layout_gravity="bottom|center_horizontal"
               android:orientation="horizontal">
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotSelected"/>
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotUnselected"/>
      <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:src="@drawable/ViewPagerDotUnselected"/>
    </LinearLayout>
  </FrameLayout>
</LinearLayout>

稍后您可以调整宽度、高度和边距。

接下来，创建新的 fragment ，每个 fragment 将包含您的不同页面(或“步骤”)。对于这个例子，我创建了三个。

这样做三次，同时更改文件名及其内容:
右键Project>>Add>>New Item>>Fragment，贴出如下代码为例:

public class Fragment1 : Fragment
{
    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        // Use this to return your custom view for this Fragment
        var view = inflater.Inflate(Resource.Layout.Fragment1Layout, container, false);

        //Here goes what you want to do within the fragment.

        return view;
    }
}

替换每个 fragment 的类名和布局。

然后右键单击您的布局文件夹 >> 添加新项目 >> Android 布局。
贴出以下代码作为例子:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="FRAGMENT 1"
    android:layout_gravity="center"/>
</LinearLayout>

在更改名称和内容的同时执行此操作三次。

现在，在您的 MainActivity.cs 中，在您的命名空间名称后发布以下代码:

 [Activity(Label = "ViewPagerIndicator", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.AppCompat.Light.DarkActionBar")]
 public class MainActivity : AppCompatActivity
 {

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        SetSupportActionBar(toolbar);
        SupportActionBar.Title = "ViewPager Indicator Dots";

        var pager = new ViewPagerAdapter(SupportFragmentManager);
        var viewPager = FindViewById<ViewPager>(Resource.Id.viewPager);
        viewPager.Adapter = pager;
        viewPager.PageSelected += ViewPager_PageSelected;
    }

    private void ViewPager_PageSelected(object sender, ViewPager.PageSelectedEventArgs e)
    {
        var viewPagerDotsLayout = FindViewById<LinearLayout>(Resource.Id.viewPagerCountDots);
        for (int i = 0; i < viewPagerDotsLayout.ChildCount; i++)
        {
            ImageView dotImage = (ImageView)viewPagerDotsLayout.GetChildAt(i);
            if (i == e.Position)
                dotImage.SetImageResource(Resource.Drawable.ViewPagerDotSelected);
            else
                dotImage.SetImageResource(Resource.Drawable.ViewPagerDotUnselected);
        } 
    }
}


public class ViewPagerAdapter : FragmentStatePagerAdapter
{
    int numberOfFragments = 3;

    public ViewPagerAdapter(Android.Support.V4.App.FragmentManager fm) : base(fm)
    {

    }
    public override int Count
    {
        get
        {
            return numberOfFragments;
        }
    }

    public override Android.Support.V4.App.Fragment GetItem(int position)
    {
        switch (position)
        {

            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default: return new Fragment1();
        }
    }
}

运行它，看看它是否有效......