Xamarin一步步向导android视图

Question

我想在Xamarin c#中构建一个Android活动,用于逐步注册和/或信息.我该怎么做这样的事情:

谁能给我一个代码示例或任何东西？谢谢.

Answer 1

基本上你需要使用一个名为a的元素ViewPager,每个页面都是不同的Fragment.您可以使用此库来帮助您.随意提问和指导.

编辑 - 详细说明:
将两个图像添加到可绘制文件夹 - 一个未选择的点和一个选定的点.添加这两个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>

您可以稍后使用宽度,高度和边距.

接下来,创建新的片段,每个片段包含不同的页面(或"步骤").在这个例子中,我创建了三个.

这样做三次,同时更改文件名及其内容:
右键单击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;
    }
}

替换每个片段的类和布局的名称.

然后右键单击布局文件夹>>添加新项>> 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();
        }
    }
}

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