Most user friendly option for layout in android Ap

问题:

SO the problem I am facing is not about subjectively judge what is best for the user (I think) but what options are available to illustrate positioning.

Think of some sort of team sports app, where you can put little dots for players (and then I can replace the dots with some UI component that represents the player) something like this where you can drag and drop the red and blue dots

I tried this with a gridview, and it's pretty hard because I need to have a set number of rows/cols and they don't scale when you are in a phone with bigger resolution, so started hacking on a "custom component" tho it feels like I am reinventing the wheel.

Is there a better option than writting my own component?

If it makes any difference, I m using xamarin.android

回答1:

I'd implement this using MvvmCross Data-binding against a collection-bound FrameLayout.

This core of the method uses the TranslationX and TranslationY properties on child Views within the parent held within a parent FrameLayout.

Parent is:

<?xml version="1.0" encoding="utf-8"?>
<pointsongrid.BindableFrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res/points.on.grid"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  local:MvxBind="ItemsSource Points"
  local:MvxItemTemplate="@layout/item"/>

List item is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res/points.on.grid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    local:MvxBind="TranslationX X, Converter=X;TranslationY Y, Converter=Y"
  >
  <LinearLayout
    android:layout_width="20dp"
    android:layout_height="20dp"
    local:MvxBind="BackgroundColor Color, Converter=NativeColor"
  />      
  <TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    local:MvxBind="Text Player"
    />      
</LinearLayout>

The entire code is a bit long for StackOverflow so I posted a quick repo to demonstrate - https://github.com/slodge/MvvmCross-Players - the databound FrameLayout there could certainly be improved on - take a look at the LinearLayout code in the main MvvmCross repo for some ideas if you need support for changing lists (e.g. ObservableCollection).

The result looks a bit like: