Xamarin.Forms手勢在Android上

Question

是否可以使用手勢在SnapChat上滑動頁面？ 我有這樣的東西，但是沒有用。 當然，我有接口和類，但是我不知道如何實現一切正常。 我想像在SnapChat上一樣滑動表單的左側頁面和右側頁面，並在滑動時更改顏色背景。

  SwipeListener swipeListener = new SwipeListener(przeglad, this);

  public void onLeftSwipe(View view)
    {
        if (view == przeglad)
        {
            Page ne = new SrchPage();
        }
    }

接口：

public interface ISwipeCallBack
{
    void onLeftSwipe(View view);
    void onRightSwipe(View view);
    void onTopSwipe(View view);
    void onBottomSwipe(View view);
    void onNothingSwiped(View view);
}

滑動類別：

 public class SwipeListener : PanGestureRecognizer
{

    private ISwipeCallBack mISwipeCallback;
    private double translatedX = 0, translatedY = 0;

    public SwipeListener(View view , ISwipeCallBack iSwipeCallBack)
    {

        mISwipeCallback = iSwipeCallBack;
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        view.GestureRecognizers.Add(panGesture);
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {

        View Content = (View)sender;

        switch (e.StatusType)
        {

            case GestureStatus.Running:

                try
                {
                    translatedX = e.TotalX;
                    translatedY = e.TotalY;
                }
                catch (Exception err)
                {
                    System.Diagnostics.Debug.WriteLine("" + err.Message);
                }
                break;

            case GestureStatus.Completed:

                System.Diagnostics.Debug.WriteLine("translatedX : " + translatedX);
                System.Diagnostics.Debug.WriteLine("translatedY : " + translatedY);

                if (translatedX < 0 && Math.Abs(translatedX) > Math.Abs(translatedY))
                {
                    mISwipeCallback.onLeftSwipe(Content);
                }
                else if (translatedX > 0 && translatedX > Math.Abs(translatedY))
                {
                    mISwipeCallback.onRightSwipe(Content);
                }
                else if (translatedY < 0 && Math.Abs(translatedY) > Math.Abs(translatedX))
                {
                    mISwipeCallback.onTopSwipe(Content);
                }
                else if (translatedY > 0 && translatedY > Math.Abs(translatedX))
                {
                    mISwipeCallback.onBottomSwipe(Content);
                }
                else
                {
                    mISwipeCallback.onNothingSwiped(Content);
                }

                break;

        }
    }

}

XML：

<Grid RowSpacing="10" Padding="30" VerticalOptions="Center"  x:Name="przeglad">

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

             <Button  Grid.Row="2"  Text="{resource:TranslateExtension Szukaj}"
                BorderRadius="30"
                BackgroundColor="#80FFFFFF"

                FontSize="18"
                TextColor="#330025"
                BorderWidth="4"
                BorderColor="#ffdbdb"
                Clicked="Button_Clicked_1"
              FontAttributes="Bold"/>

             <Button  Grid.Row="3"  Text="{resource:TranslateExtension Mapa}"
                BorderRadius="30"
                BackgroundColor="#80FFFFFF"
                FontSize="18"
                TextColor="#330025"                    
                BorderWidth="4"
                BorderColor="#ffdbdb"
                Clicked="Button_Clicked"
               FontAttributes="Bold"/>

        </Grid>

Answer 1

我認為您需要的是一個ViewPager ，它可以用透明背景覆蓋原始視圖。

例如，如下創建布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <ImageView
      android:id="@+id/img"
      android:layout_height="match_parent"
      android:layout_width="match_parent"
      android:src="@drawable/BG" />
  <android.support.v4.view.ViewPager android:id="@+id/viewpager"
                                     android:layout_height="match_parent"
                                     android:layout_width="match_parent"
                                     android:background="@android:color/transparent" />
</FrameLayout>

在后面的代碼中，首先為ViewPager創建一個適配器：

public class MyVPAdapter : PagerAdapter
{
    private Context context;
    private List<PItemModel> list;

    public MyVPAdapter(Context _context, List<PItemModel> _list)
    {
        context = _context;
        list = _list;
    }

    public override int Count
    {
        get { return list.Count; }
    }

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

    public override void DestroyItem(View container, int position, Java.Lang.Object view)
    {
        var viewpager = container.JavaCast<ViewPager>();
        viewpager.RemoveView(view as View);
    }

    public override Java.Lang.Object InstantiateItem(View container, int position)
    {
        ImageView tile = new ImageView(context);
        tile.SetImageResource(list[position].TileId);
        var viewpager = container.JavaCast<ViewPager>();
        viewpager.AddView(tile);
        return tile;
    }
}

在后面的代碼中：

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

    // Create your application here
    SetContentView(Resource.Layout.layout2);

    ViewPager pager = FindViewById<ViewPager>(Resource.Id.viewpager);
    List<PItemModel> list = new List<PItemModel>();
    list.Add(new PItemModel() { TileId = Resource.Drawable.BackButton });
    list.Add(new PItemModel() { TileId = Resource.Drawable.solidimg });
    var adapter = new MyVPAdapter(this, list);
    pager.Adapter = adapter;
} 

PItemModel很簡單，如下所示：

public class PItemModel
{
    public int TileId { get; set; }
}

最后一個問題，您在最后一個案例的注釋中提供的鏈接喜歡在照片上添加圖塊， ViewPager應該放在用於呈現攝像機流的TextureView上。 在這里，我僅使用ImageView進行演示。

更新：

抱歉，我只是意識到您正在使用XF進行開發，因此您應該能夠為視圖創建Custom Renderer ，並在Android客戶端項目中實現上述代碼， OnCreate的代碼應移至視圖渲染器的實現中在客戶項目中。