AndreiMisiukevich / CardView

CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms
MIT License
710 stars 114 forks source link

Is it possible to preview next item? #17

Closed sorenverhagen closed 5 years ago

sorenverhagen commented 6 years ago

Is it possible to preview the next item, like in example underneath?

previewitems

AndreiMisiukevich commented 6 years ago

Hi Sorry, but now - there is no such possibility. But I'm working on this..

sorenverhagen commented 6 years ago

Thnx for your reponse! Looking forward to see this feature. :)

AndreiMisiukevich commented 6 years ago

I have been working on this feature..) but I haven't got a lot of spare time..)

I need implement this classes (Moving items during user's interaction)

https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Processors/BaseSceneFrontProcessor.cs

https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Processors/BaseSceneBackProcessor.cs

http://prntscr.com/jhr8xf

cerealdj commented 6 years ago

If using SceneView (I know we aren't meant to be yet). You can change the InitialBackPositionPercentage to a value lower than 0.6 in the Scene Processors and it will give the preview ability your after provided the Cards themselves are of a decent size (in my case 90% width and height of screen)

BraulioOC commented 6 years ago

I using SceneView, set the InitialBackPositionPercentage at 0.9 or lower give you that result

This is my code example

var cardCarousel = new SceneView( new BaseSceneFrontProcessor{ InitialBackPositionPercentage = 0.88 }, new BaseSceneBackProcessor{InitialBackPositionPercentage = 0.88} ) { Items = CardListFilter, ItemTemplate = typeof(YourDataTemplate)), CurrentIndex = default(int), Padding =new Thickness(20,0), //Important for distance between elements HorizontalOptions = LayoutOptions.FillAndExpand };

cerealdj commented 6 years ago

Ive expanded on this bit more and started using a MultiProcessor, essentially a Processor that wraps a collection of child processors and runs each one in order.

I'll pull it out from my main project over the weekend and put it in my local repo to stick a pull request in for @AndreiMisiukevich

AndreiMisiukevich commented 6 years ago

@thedjnova sounds interesting)

AndreiMisiukevich commented 6 years ago

@thedjnova hi) Don't forget to rebase on top of master origin) because today i changed code a little. Thanks

jaspervanmegroot commented 6 years ago

Can i use the scene view to archive this? (scrolling between items on one row) knipsel

AndreiMisiukevich commented 6 years ago

Hi, I'm still waiting for PR ...

jaspervanmegroot commented 6 years ago

Okay but it is possible with Scene view?

AndreiMisiukevich commented 6 years ago

It will be possible, if somebody creates PR )

AndreiMisiukevich commented 6 years ago

@thedjnova do you remember about your promise ?)))

cerealdj commented 6 years ago

sorry guys been overloaded.

In honesty when I look at it it isn't actually an improvement, its purely using whats already there in the right way.

I created scene processors that held a lists of other scene processors for front and back which I set as the scene processors for the control.

Those Multiprocessor containers cycle each method of the child processors in order.

Simply create one for Scaling and Translate and add them to the multiprocessor list in its constructor.

AndreiMisiukevich commented 6 years ago

Could you share your code? I will think, how we would to embed this

cerealdj commented 6 years ago

https://github.com/AndreiMisiukevich/CardView/pull/44

Phenek commented 6 years ago

Hello Guys, Are you on this enhancement? If you are too busy I can help, but I have to study the code.

AndreiMisiukevich commented 6 years ago

@Phenek it would be awesome, if you will help me))

AndreiMisiukevich commented 6 years ago

@Phenek https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Processors/BaseSceneBackProcessor.cs and https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/Processors/BaseSceneFrontProcessor.cs

we need to fix these two classes

Phenek commented 6 years ago

I think, we need juste one View processor. Using two seems to display one item twice at the same time.

AndreiMisiukevich commented 6 years ago

@phenek, hmm, why do you think so? Front processor responds only for front view, back — only back views

Phenek commented 6 years ago

To see it -> just increase the AnimationLength to 5000ms in both processors

Then you can see that the item in the currentView is still in use by the front processor, when the back processor is initialising it.

screen shot 2018-09-05 at 11 57 29

I think we just need one processor that will move each recycled view in the same way. Created new views or recycle old one when passing from -x to x translation. It could be a different class than CardsView

AndreiMisiukevich commented 6 years ago

@Phenek yes, i agree with it.. really i though about creating separate class =) If you wish, we can start to develop it together xD

Phenek commented 6 years ago

@AndreiMisiukevich, Yes! I will start this week-end and, on my availables evenings. It will be on my fork on a branch "feature/CoverFlow" something like that.

AndreiMisiukevich commented 6 years ago

@Phenek awesome!

AndreiMisiukevich commented 6 years ago

i will wait you PR )

Tiotenshi commented 6 years ago

Андрей, добрый вечер. Скажите, пожалуйста, есть ли возможность изменить стиль indicatorsControl из xaml? У меня белый фон и по дефолту белые точки - сливается. Я целый вечер убил на то, чтобы попытаться изменить стиль, создавая его в c#, моих знаний не хватает.

AndreiMisiukevich commented 6 years ago

@Tiotenshi https://github.com/AndreiMisiukevich/CardView/issues/54

Phenek commented 6 years ago

@Tiotenshi так так на русском ?!

@AndreiMisiukevich So I looked, For now I tried just with pan gesture without any processors. I have 5 Recycled (Content)View, that I put all at the center x=0(So I will know which one is more at the center when translated). Then I translate them at equal distance from 0 to (x = width) back to (-x = -Width) until 0

Then when translating all got the same translation direction at the same time.

So I got the logic but I will need a containerView for each recycled views, which will have the following property:

This containerView will inherit from ContentView Could be named as "CoverContainer" "CoverView" "CoverCell" "CoverContent"?

Are you agree about this Container or Have you an another Idea? let me know.

AndreiMisiukevich commented 6 years ago

@Phenek i think, it's great idea for name) I'm look forward this PR =)

Phenek commented 5 years ago

Hey What's up? I can give you a preview here on my fork on the branch "feature/CoverFlow"

Alt Text

I will not do a PR right now. I have a lot of issues to fix and some features to add on this component. But enjoy and give me your feedback ))))

AndreiMisiukevich commented 5 years ago

@Phenek looks awesome!) I like it))

MaxenceMax commented 5 years ago

i was wating for this feature ! Great !

Phenek commented 5 years ago

@AndreiMisiukevich Do you have an idea to not show View translated out of the contentPage? If a view is an half inside and an half outside, just the half inside should be visible by the user.

I'm asking cause it's an issue on iOS part when sliding pop back from a navigation controller.

AndreiMisiukevich commented 5 years ago

@Phenek maybe it can help https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.isclippedtobounds?view=xamarin-forms

Phenek commented 5 years ago

Nice that made the trick! Thanks

Phenek commented 5 years ago

Hey now I'm on the HandlePanApply when touchEnd.

And I'm searching a way to perform the translate animation by checking the position of each view, to know if any view need to be recycled or displayed. the new displayed Views have to be added to the animation at runtime for the end.

All my recycler logic depend of the translationX of the displayedViews. Here -> CoverFlow Repo

Do you have any design idea to handle this?

AndreiMisiukevich commented 5 years ago

@Phenek sorry, now i have no enough time for diving to this issue :( Have you found any solution?

Phenek commented 5 years ago

For now I had a HandlePanApply func like so:

public void HandlePanApply(List<View> displayedViews, double dragX, AnimationDirection direction, List<View> recycledViews)
{
      var maxTranslate = CoverFlow.MaxGraphicAxis + CoverFlow.MarginBorder;
      Animation a = new Animation();
      foreach (var v in displayedViews)
      {
          var translate = v.TranslationX + dragX;
          if (Math.Abs(translate) > maxTranslate)
          {
              var diff = Math.Abs(translate) - maxTranslate;
              var coef = 1 - (diff / Math.Abs(dragX));
              a.Add(0, coef, new Animation(f => v.TranslationX = f, v.TranslationX, -(int)direction * maxTranslate, Easing.Linear, () => 
             {
                if (direction == AnimationDirection.Prev) // Movement --> right
                   CoverFlow.ItemMaxOnAxis = CoverFlow.VerifyIndex(CoverFlow.ItemMaxOnAxis - 1);
                else if (direction == AnimationDirection.Next)  // Movement <-- Left
                   CoverFlow.ItemMinOnAxis = CoverFlow.VerifyIndex(CoverFlow.ItemMinOnAxis + 1);
                v.IsVisible = false;
                recycledViews.Add(v);

                /* Unworking code here but have to be done
                // Remove Views from displayed List
                CoverFlow.RemoveUnDisplayedViews();

                // RecyclerView
                var recycledView = CoverFlow.RecyclerView(direction);

                // Add animation at runtime
                a.Add((diff / dragX), 1, new Animation(f => v.TranslationX = f, v.TranslationX, translate, Easing.Linear, null));
               */
              }));
          }
         else
             a.Add(0, 1, new Animation(f => v.TranslationX = f, v.TranslationX, translate, Easing.Linear, null));
     }
     a.Commit(CoverFlow, "SimpleAnimation", 60, 800, Easing.Linear, finished: (d,b) => CoverFlow.RemoveUnDisplayedViews());
}
AndreiMisiukevich commented 5 years ago

@Phenek i think for first release it would be acceptable =) everybody would be happy to have something working haha)

Phenek commented 5 years ago

I can do a PR but it's not working well.

AndreiMisiukevich commented 5 years ago

@Phenek what exactly is working wrong?

Phenek commented 5 years ago

My Problem is that I'm searching a way to perform the translate animation by checking the position of each view, to know if any view need to be recycled or displayed. the new displayed Views have to be added to the animation at runtime.

And for now it's not like I want it be.

There is the PR #116 with some comments in code.

If you want some click or selection events on Items just do them on your Item Templates. No need to charge the code for now.

AndreiMisiukevich commented 5 years ago

@Phenek Hi I think we should rename CoverFlow to SceneView (Remove old sceneview) And maybe try to release it)

I see it as killer feature =)

AndreiMisiukevich commented 5 years ago

@Phenek i appreciate any new pull requests

Phenek commented 5 years ago

Hey @Andrei, I will do some pull request I need this component to be perfect. But I will not have a lot of time until next week-end, I will try my best.

The main Idea is to add some properties like: _Orientation: Vert or Horizontal _RTL avaibility _Animations (Fade, rotation on Z Axis, Bigger centeredView etc...) The Idea would be to add to this component differents "FlowAnimation Class" to get a Carousel or a simple List with bounds effect or create a real CoverFlowAnimation like Itunes do with there CoverJackets. _Some Refacto

But first -> I need a second point of view about the recyclerView during TouchEnd animation. We need to add a recycledView to the animation during this one is already processing. I don't know if it's even possible?

About naming "SceneView" it's doesn't mean anything for me, it's hard to find on google. "CoverFlow" have a good referencing and it got the meaning of "Flow" like Swift API provide with there UICollectionViewFlowLayout. (on Android is "ViewGroup"..)

So CoverFlow can be renaming, but need for my part to get the meaning of "Flow", maybe "Layout" I searched for "CardsFlow" on google but was not a good result. But It's an open question :)

So If you got some time, give me your point of view about combining recyclerLogics and the TouchEnd animations. It will be very appreciated

AndreiMisiukevich commented 5 years ago

@Phenek Ok, maybe CoverFlowView would be acceptable name?

As for recycledView, i'm going to refactor code (fix naming convention (_constructor method), remove redundant code etc.)

I didn't dive to code so much, but as for recycler ... So, you can check TranslateX and Width, and if TranslateX + Width/2 doesn't intersect with ScreenSize, we can reuse this view =)

Sorry if i said something stupid xD

Good job!)

AndreiMisiukevich commented 5 years ago

@Phenek btw, where are you from?

Phenek commented 5 years ago

Я французский, который немного жил в Питере ))). и ты Белорусский?

At first CoverFlowView was my idea, so I'm Ok for it.

AndreiMisiukevich commented 5 years ago

@Phenek =) Да, я белорус) Ok, let's go ahead in English. I though, that you are native Russian speaker, because i'm not PRO in English and it would have better performance in communication =) Ok, great, no problem