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的代码应移至视图渲染器的实现中在客户项目中。