Xamarin Schritt für Schritt Assistenten android Aufrufe

Question

Ich möchte eine Android-Aktivität in Xamarin C# für Schritt für Schritt Registrierung und/oder Informationen zu bauen. Wie kann ich etwas tun, wie folgt aus:

Kann mir jemand ein Code-Beispiel oder etwas geben? Vielen Dank.

Answer 1

Grundsätzlich müssen Sie ein Element namens ViewPager verwenden, und jede Seite wird eine andere sein Fragment. Sie können die Bibliothek this verwenden, um Ihnen zu helfen. Fühlen Sie sich frei, Fragen und Anleitungen zu stellen.

Bearbeiten - Ausführliche Erläuterung:
Fügen Sie zwei Bilder auf Ihren ziehbar Ordner- einer der nicht ausgewählten Punkt und einer der ausgewählten Punkt. Fügen Sie diese beiden NuGet-Pakete hinzu (Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Ihr Projekt, klicken Sie auf NuGet-Pakete verwalten, und suchen Sie): Xamarin.Android.Support.v4 und Xamarin.Android.Support.v7.AppCompat.

Dann wird Ihr Main.axml Layout setzen diese:

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

Sie können mit der Breite spielen, um die Höhe und die spätere Marge.

Als nächstes erstellen Sie neue Fragmente, die jeweils Ihre verschiedenen Seiten (oder "Schritte") enthalten. Für dieses Beispiel habe ich drei erstellt.

dies dreimal tun, während die Namen der Dateien zu ändern und deren Inhalt:
Projekt Rechtsklick >> Hinzufügen >> Neue Artikel >> Fragment, schreiben Sie den folgenden Code als Beispiel:

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

Ersetzen Sie die Namen der Klassen und Layouts für jedes Fragment.

Klicken Sie dann mit der rechten Maustaste auf Ihren Layout-Ordner >> Add New Item >> Android Layout.
Beitrag der folgende Code als Beispiel:

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

dies dreimal tun, während Sie den Namen und den Inhalt zu ändern.

nun in Ihnen MainActivity.cs, schreiben Sie den folgenden Code nach dem Namespace Name:

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

es Run und sehen, ob es funktioniert ...