MvxListView in Android with MvvmCross - android

I'm using MvvmCross v3 and I have a little problem with list in Android.
I actually have a Mvx.MvxListView who works well, but I'm working on tablet, and ListView is a little bit inapropriate. So I want to have a control like WrapPannel in XAML to have more than one item in a row.
How can I have this kind of control?
Thanks

There are two challenges here:
1. Find or make the control you want
The first is really up to you and your UX/design team to do - although people might be able to suggest apps and projects which might help. When choosing a control always be careful to understand it's memory use - especially:
whether it virtualises the UI reusing cells (like a list does)
or whether it creates a cell for every item even if the item is not visible (like a SL WrapPanel does?)
2. Add data-binding to it
This second step is generally quite simple to do - take a look at one of the Mvx layout controls and see how it is converted for databinding - e.g. https://github.com/slodge/MvvmCross/blob/v3/Cirrious/Cirrious.MvvmCross.Binding.Droid/Views/MvxLinearLayout.cs
You can generally just cut-and-paste this code over to your new type.
For more on subclassing existing types, also see N=18 in the video series - http://slodge.blogspot.co.uk/2013/05/n18-android-custom-controls-n1-days-of.html - this shows subclassing of a TextView
For a wrappanel, I did previously adapt and use one of #CheeseBaron's ports - FlowLayout - see http://slodge.blogspot.co.uk/2013/01/an-mono-for-android-wrappanelflowlayout.html. However, this has not been updated for v3 - if you do update it, it'd be great if you shared the results back.

Related

Nativescript Vertical Screen Slide / ViewPager

What is the easiest way to implement a screen slide in Nativescript like shown in Android Viewpager , but in a vertical direction ? Another example of this functionality would be the rss reader feedly where you can change rss feeds by swiping up/down.
The page should allow vertical scrolling to the top/bottom and then transition after a certain treshold.
I already encountered nativescript-slides, which can only do horizontally sliding.
So is there a "nativescript" way or do i have to implement it as native android/ios feature (for example by this) ? In either case a sample on how to integrate it in nativescript would be great.
Update
Recorded an example:
taken from this Repo with Android native code. The outstanding PR made changes to offer vertical scrolling in the list. But the repo seems to be outdated and a bit buggy.
I can provide more info later but there's a new plugin implementing the native controls for android and iOS for slides/carousel her https://github.com/alexrainman/nativescript-carousel-view and vertical swiping is on his radar, I think he might even be close to completing that.
To give an answer for anybody interested in above nested scrolling animation:
For Android I had to implement the native ReyclerView in Nativescript in favor of the NS buildin ListView. It is an optimized view structure which among other things allows nested (vertical) scrolling and can be used as replacement for an ordinary list.
Together with https://github.com/alexrainman/nativescript-carousel-view works like a charm!
Anyone that ends up here still looking for ways to achieve this.
I spent a lot of time trying to figure out a way to achieve this and tried to find ready plugins for this. Also tried to use the plugin from Alexrainman but eventually gave up since the plugin was not up to date with the current nativescript-version.
My solution:
I used radListView as a basis for this implementation and leveraged the methods and events on the radListView.
By using scrolled-event I gathered data for the use of the scrolling feature: scroll Speed and scroll direction. (These might be also taken from the event data, but since I did not find the event details from the Nativescript-documentation I gave up trying to guess where to find this data on the event-model).
Then I also saved the fixed height of one item on my list (The height I fixed to screenHeight-200).
With all this info, I managed to hook the event "ScrollDragEnded" and add logic that makes my list behave like a vertical slider. Moving on the list by method "scrollToIndex" and figuring out which index to scroll and when by leveraging all the data mentioned above.
This is the way I managed to make a pretty good vertical slide.
Good luck!

Creating a dynamic/complex Android viewText + editText layout

I'd like to do something a little complex for my android application, and I'm struggling a little.
Overview -
I'm creating a game where the player is given a sentence with some words blanked out, and they must fill in the gaps.
'22 P____ on a F____ P____' becomes '22 Players on a Football Pitch'
'J_____ B_____ is 007' - 'James Bond is 007',
and so forth.
I'm having trouble laying out the textViews + editText's in a way that I like. Their are lots, and lots of these questions - so many that I don't want to hand code a solution.
I want to dynamically create the textViews + the editViews - from the question I pass it. I can create them just fine, it's the adding to the final view I am struggling with - all of the items are bunched into one corner! A linearLayout changes that, but then it's a single element on each line.
I've tried looking online - but I'm not convinced I'm looking at any of the right materials.
What I want is to create something exactly like the picture below (sorry it's so huge) - I think I want to create a wrapper of sorts for all the separate elements (so it lays out nicely) or a make my own custom view class(?) - but I really am unsure of how to progress - so any advice would be great.
Thank you
I had a similar situation where I wanted to have a list of names that would go side-to-side if possible, but if a name was long to begin on the next line.
I played around with a library called android-flowlayout. It has good examples and is fairly easy to customize.

Create UI like Chrome for Android

I want to implement this behaviour [https://github.com/gleue/TGLStackedViewController] in an app that I am trying to make.
The closest thing/the effect that I want to achieve is how the Google Chrome browser behaves.
Tile/card interface
Be able to access a form of navigation (access other tabs) when user pulls down the address bar
Be able to re-arrange the tabs in any order the user wishes
Photo taken from this Android Layout : How to implement a UI similar to deck of cards? SO question
Is there anyone out there who has tried to implement this kind of behavior? Do you guys know any libraries that can help achieve this effect? It would be very helpful! Thank you
systemUI/Recents package, as mentioned by Andrei, can be your starting point. It adds a little more to the flat rendition of chrome tabs.
I have been meaning to refactor systemUI/Recents package ever since I got the L update. I finally got to it.
A sample project is hosted at: Link
Even though the viewgroup recycles, it updates the progress map (child properties) for all children on each scroll step. This will lead to lags with large data sets. For a few hundred, it should be fine.
The sample project uses Picasso for loading and caching images from LoremPixel. Since these are random images & may repeat, you can verify that they are bound correctly by looking at bottom left of the image.
If you feel like looking through the AOSP code, the functionality you are looking for is actually open-source and you can find it in Android 5.0 in the recent apps screen. This is the code you want to look at on github.
The view you want to extract from AOSP is the RecentsView. This would be the best approach.
You could also consider extending StackView and overriding onLayout() so you get the children to lineup.
One other option is to extend ListView, override drawChild or layout methots and try to shift the views according to their position. You can find some inspiration here and here

Creating Connect4 in Android

I'm trying to create an Android app to play Connect 4 (Four In A Row, etc). As I'm new to Android dev I created a basic Java application to cope with the logic, which plays connect4 using a 2D array and just uses println to print the array to the console which shows the board.
My question is in my game activity what would be the best way to create a 'board' and have it so I can update it to show the position of counters throughout the game; should I create a canvas object, butcher a table layout, or do something else entirely.
Apologies if this is a silly question; I have very limited Android experience.
Many thanks.
As the board is always the same (4x4) you could use a GridLayout with 4 cols and 4 rows. Put an ImageView in every cell and modify it following the players touches.
Agreed, as 4x4 grid could work if that is what you want since you have limited android experience. You can really make a board/grid in multiple ways. I would suggest making sure you know a little about the UI and the android activity lifecycle before you start diving into something. Eventually you will like to add additional UI elements such as score, player's turn etc.
UI:
http://developer.android.com/guide/topics/ui/index.html
Lifecycle:
http://developer.android.com/training/basics/activity-lifecycle/index.html
Here is a grid tutorial instead of opening another view, just update the one with a piece/color or whatever
GridView tutorial:
http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/

Switch from one page to another

I'm new to Android programming and I'm working on my first application "FunFacts" where
there should be more than 100 cool things to learn about nature, science etc.
My question is: How can I switch from one page to another using two buttons "left" and "right"? which method should I use? I don't think that a horizontal scrollview is the solution.
So if I have 2 different layouts, page one and page two, how can I switch from one to other in my application?
Thank you!
It sounds like you might want a ViewPager. Below is a link to the Android tutorial. This creates a slideshow type effect which sounds like what you're going for. You said you will have different layouts which this will use one layout but you can customize the content and I would think you would want one so it all looks relatively the same
Docs
Update
No, you don't have to create 100 layouts or activities. Just one of each. Following will be a link to a post that explains it a little better. That post explains how it is like a listview in that you add the different pages to your view adapter as you would with a list. You can use the same layout for all and just add new data to it (like a list). Probably store them in an ArrayList or possibly a DB if you have that many and want to have a lot of data attached to them. I hope this makes sense and helps a little. I would suggest starting one with just a couple pages to see how it works, following these examples, and if you get stuck then post a more specific question as to what you can't get to work.
Link

Categories

Resources