Xamarin mvvmcross How to show 3 layered data structure in UITableView? - xamarin.ios

There is a UITableView in touchview screen.
It shows a list of Car.
MyCarsViewModel contains List<Car> cars.
Car contains List<Wheel> wheels.
Wheel contains List<Tyer> tyers.
I have to show this 3 layered data structure in one tableview.
How can I achieve this?
Car1
|----Wheel1
|------------tyer1
|------------tyer2
|----Wheel2
...
Car2
...
PS:
In android, it will be implemented 3 layered MvxLinearLayout.
So in main.xml
<Mvx.MvxLinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
local:MvxItemTemplate="#layout/listCars"
local:MvxBind="ItemsSource Cars" />
in listCars.xml
<Mvx.MvxLinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
local:MvxItemTemplate="#layout/listWheels"
local:MvxBind="ItemsSource Wheels" />
In listWeels.xml
<Mvx.MvxLinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
local:MvxItemTemplate="#layout/listTyers"
local:MvxBind="ItemsSource Tyers" />
How can I implement this in xamarin.iOS?

Related

How to position ViewPager above RecyclerView?

This xml layout has been populated by ViewPager and RecyclerView via an activity class, I want to position ViewPager on top and RecyclerView at the bottom, I tired to use android:layout_below="#+id/awesomepager" in the LinearLayout of RecyclerView but it doesn't work (it stays on top behind the toolbar[Deep blue color in the picture]), I also used android:layout_alignBottom="#+id/awesomepager" but that puts it inside the ViewPager at the bottom.
I basically want ViewPager and RecyclerView to be siblings , like this picture , black area to be ViewPager at the top and the green area to be RecyclerView at the bottom.
what is correct way to do this?
viewpager_with_toolbar_overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</RelativeLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
Update:
If I define the hight of ViewPager the problem will be resolved , but when screen size changes lower part of the screen will be blank
I searched a lot and finally came up with a solution, first I changed RelativeLayout to LinearLayout and added android:orientation="vertical" to it, then added android:layout_weight="1" to ViewPager.
Final version
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</LinearLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>

How can make the mRecyclerView control fill in the free space?

I use Code A to design UI with constraint layout, the top of the UI is google AD and the bottom of the UI is toolbar.
I hope the RecyclerView control named mRecyclerView fill in all other space, how can I do?
BTW, Code B is generated by Android Studio 3.01 automatically when I drag and drop RecyclerView control to UI. It's a hard code for layout_width and layout_height.
Code A
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:layout_constraintTop_toTopOf="parent"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
/>
<LinearLayout
android:id="#+id/linearLayoutToolBar"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnBackup" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnExit" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
</android.support.constraint.ConstraintLayout>
Code B
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
Replace your RecyclerView code like below to fill the free space:
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/adView"
app:layout_constraintBottom_toTopOf="#id/linearLayoutToolBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>

AnimateLayoutChanges property disabled alpha property from child element

When I'm adding animatedLayoutChanges="true" to my parent Layout the alpha from the child layout doesn't work anymore:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:animateLayoutChanges="true"> // <<<<<<<
<LinearLayout
android:id="#+id/my_outofzoom_text_tablet_landscape"
android:layout_width="300dp"
android:layout_marginTop="25dp"
android:layout_centerHorizontal="true"
android:layout_height="100dp"
android:background="#drawable/border_rounded_corner"
android:layout_toRightOf="#id/movable_layout"
android:alpha="0.5" // <<<<<<<
android:visibility="gone"
android:gravity="center"
android:clickable="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#ffff"
android:layout_margin="5dp"
android:textSize="25dp"
android:text="#string/to_far_away">
</TextView>
</LinearLayout>
Does anybody got an idea why this is so and what can i do ?
I guess animatedLayoutChanges uses AlphaAnimation with keepLastFrame = true, which is editing your pre-determind alpha.
I never did, but maybe you can try to set animation listener and reset your desired alpha in the end. ( be aware animation listener has a bug on samsung devices it may not be called at all )

Android nested layout with layout_weight

I would like to create left and right reserved spaces (LinearLayout) on screen which give me felexiblitiy to ensure my UI is working in different size of screen as I want,
and in middle create a TableLayout to apply views and contorls, everything good great
except TableRow - android:layout_width is became zero, TableLayout width is not really zero however I had to put android:layout_width="0dp" for TableLayout to force android:layout_weight="4" working
how can I tell TableRow to take actual parnt(TableLayout) width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget32"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/widget33"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>
<TableLayout
android:id="#+id/widget34"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="4">
<TableRow
android:id="#+id/widget64"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/widget72"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I m here" />
</TableRow>
</TableLayout>
<LinearLayout
android:id="#+id/widget35"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>

ViewSwitcher with EditText leaves extra padding

I'm using a ViewSwitcher to allow switching from a TextView to an EditText element. What I've noticed is that the EditText element generates extra padding at the bottom of the view (i.e. if I remove the EditText everything looks as expected, but adding it, even when visibility is set to gone, generates extra space at the bottom). What's causing this and how should it be resolved?
<ViewSwitcher
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/IngredientsLineSwitcher"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/IngredientsLineText"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="0dip"
android:paddingLeft="10dip"
android:paddingTop="0dip"
android:text=""
android:textColor="#color/black"
android:textSize="#dimen/recipe_label_font_size" />
<EditText
android:id="#+id/IngredientsLineEdit"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="0dip"
android:paddingLeft="10dip"
android:paddingTop="0dip"
android:text=""
android:visibility="gone"
android:textColor="#color/black"
android:textSize="#dimen/recipe_label_font_size" />
</ViewSwitcher>
You should put a RelativeLayout around the TextView or EditText to control their positioning.
-----
android:layout_height="match_parent" >
mlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/IngredientsLineSwitcher"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/IngredientsLineText"
android:layout_height="match_parent"
android:layout_width="match_parent"
----
<EditText
android:id="#+id/IngredientsLineEdit"
android:layout_height="match_parent"
android:layout_width="match_parent"
-----
Change from fill_parent to match_parent in all Views.

Resources