Question

我想重新创建UI功能，例如新的G +应用，或者在标题图片上庄严地调用视差效果的airbnb界面。我的应用程序在不同的约束下使用（两个）ListView和Gridview，我正在检查@CFlex tutorial以重新创建它但无法实现效果。

Main.axml：

namespace ParallaxTest
{
[Activity(Label = "ParallaxTest", MainLauncher = true, Icon = "@drawable/icon")]
public class ParallaxTest : Activity, AbsListView.IOnScrollListener
{
    int count = 1;

    public GridView _gridView;
    public CustomImageView _imageView;

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

        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);

        // Get our button from the layout resource,
        // and attach an event to it
        _gridView = new GridView(this)
        {
            VerticalFadingEdgeEnabled = false,
            LayoutParameters =
                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent,
                    LinearLayout.LayoutParams.MatchParent),
            CacheColorHint = Color.Transparent,
        };
        _gridView.SetOnScrollListener(this);
        _gridView.Adapter = new GridViewAdapter();
        _gridView.VerticalFadingEdgeEnabled = false;
        _gridView.SetColumnWidth(Resources.DisplayMetrics.WidthPixels / 2);
        _gridView.SetNumColumns(2);
        _gridView.SetVerticalSpacing(2);
        _gridView.SetHorizontalSpacing(2);
        _gridView.StretchMode = StretchMode.NoStretch;
        _gridView.SetGravity(GravityFlags.Center);
        _gridView.SetBackgroundColor(Color.Pink);
        _gridView.SetOnScrollListener(this);
        _imageView = new CustomImageView(this)
        {
            LayoutParameters = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MatchParent, 400, GravityFlags.Center)
        };
        _imageView.SetBackgroundColor(Color.White);
        FindViewById<FrameLayout>(Resource.Id.top_picture).AddView(_imageView);
        FindViewById<LinearLayout>(Resource.Id.items).AddView(_gridView);


    }

    public void OnScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
    {
        if (visibleItemCount == 0) return;
        if (firstVisibleItem != 0) return;
        _imageView.SetCurrentTranslation(_gridView.GetChildAt(0).Top);
    }

    public void OnScrollStateChanged(AbsListView view, ScrollState scrollState)
    {
        //throw new NotImplementedException();
    }
}

public class CustomImageView : ImageView
{
    protected CustomImageView(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public CustomImageView(Context context) : base(context)
    {
    }

    public CustomImageView(Context context, IAttributeSet attrs) : base(context, attrs)
    {
    }

    public CustomImageView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
    {
    }

    public int mCurrentTranslation;

    public void SetCurrentTranslation(int currentTranslation) {
        mCurrentTranslation = currentTranslation;
        Invalidate();
    }

    public override void Draw(Canvas canvas)
    {
        canvas.Save();
        canvas.Translate(0, -mCurrentTranslation/2);
        base.Draw(canvas);
        canvas.Restore();
    }

}

}

Main.axml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#000000"
          android:id="@+id/items">
<FrameLayout
android:id="@+id/top_picture"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#ffffff"/>

该应用程序运行在由Xamarin框架驱动的单声道上。任何帮助表示赞赏！

Answer 1

我创建了一个开源库，可以满足您的需求 - https://github.com/nirhart/ParallaxScroll您可以在此处查看示例 - https://play.google.com/store/apps/details?id=com.nirhart.parallaxscrollexample

Answer 2

我认为使用标题进行视差的最简单方法是下一步：

- 使用ObservableScrollView，其中包含作为标题图像的ImageView。 - 之后，在使用此布局的活动的Java代码上，通过实现ScrollViewCallBacks来管理ScrollView行为。最后，要实现视差效果，请使用imageView.setTranslation，如下一步：

scrollView.setScrollViewCallbacks(new ObservableScrollViewCallbacks() {
        @Override
        public void onScrollChanged(int i, boolean b, boolean b1) {
            imageView.setTranslationY(i*0.5f);
        }

        @Override
        public void onDownMotionEvent() {

        }

        @Override
        public void onUpOrCancelMotionEvent(ScrollState scrollState) {

        }
    });

特别注意属性＆＃34; i＆＃34;这是滚动运动的价值。并且在滚动时使用0.5f或更多以达到正确的效果。希望它有所帮助

Android视差头效应

2 个答案: