IU de Tablet Android: fragmento de múltiples paneles o diseño lineal

Necesito crear una aplicación que funcionará inicialmente sólo para tablets. Soy consciente del patrón "List-and-Detail" en el que hay una lista de algo, donde hacer clic en la lista trae detalles sobre el elemento al que se hizo clic.

Eso es perfecto, siempre y cuando todos los diseños siempre tienen dos paneles: uno para la lista de elementos y otro para el detalle del elemento seleccionado.

Bueno, en mi aplicación quiero usar el primer panel que normalmente se utiliza para la lista de elementos como el menú de todas las opciones disponibles en la aplicación y el segundo panel, el que ocupa la mayor parte del espacio disponible, para mostrar un diseño específico basado en la opción que se seleccionó en el primer fragmento.

El problema es que el segundo panel no siempre estará compuesto de una sola pieza.

Estos son todos los posibles escenarios que tendré (la parte izquierda con el marco rojo representa el menú que siempre debe mostrarse):

1. Panel de detalles compuesto por una sola pieza:

introduzca la descripción de la imagen aquí

2. Panel de detalles compuesto por dos partes del mismo tamaño, que no tienen una relación maestro-detalle.

introduzca la descripción de la imagen aquí

3. Panel de detalles compuesto por dos partes, que tienen una relación mater-detalle, pero la parte maestra es más ancha que la parte de detalles

#Edit:

Dado que el objetivo principal de mi aplicación es ayudar a los camareros a recibir pedidos, este tercer escenario entra en juego cuando:

  • El camarero selecciona la opción "Tomar orden" en el menú de la izquierda (vamos a fingir que es el "Artículo dos" en la imagen)
  • En la primera parte del panel de detalles, el camarero puede elegir entre todas las categorías de alimentos que sirven (fingir que es la lista en la parte superior) y de acuerdo a la categoría seleccionada, la lista a continuación muestra todos los platos en esa categoría específica.
  • Una vez que el camarero grifos en un plato se agrega automáticamente a la segunda parte del panel de detalles (el que está oculto en el primer escenario)

introduzca la descripción de la imagen aquí

4. Panel de detalles compuesto por dos partes, que tienen una relación mater-detalle, pero la parte de detalles es más ancha que la parte maestra.

introduzca la descripción de la imagen aquí

Sé que si quiero reutilizar el diseño de diferentes tamaños de pantallas y orientaciones tengo que usar fragmentos, pero tengo que determinar sobre la marcha uno para mostrar dos o una parte (fragmentos) en el panel de detalles o que parte será más ancho que el otro parece un montón de trabajo y para ser honesto no estoy seguro de cómo hacerlo ya que todo lo que sé ahora es que la actividad principal, la que tiene las ranuras para el panel de menú y el panel de detalles debe ser similar a este :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/menu" android:layout_weight="30" android:layout_width="0px" android:layout_height="match_parent" /> <FrameLayout android:id="@+id/content" android:layout_weight="70" android:layout_width="0px" android:layout_height="match_parent" /> </LinearLayout> 

¿Crees que podrías dar algunas pautas de la interfaz de usuario aquí? Tal vez estoy pensando en todo esto debo ir con un solo diseño lineal con el número de piezas que necesito.

Gracias por adelantado.

¿Ha visto el ejemplo Recuperando una lista de contactos ? Aquí han mostrado cómo implementar correctamente el flujo de detalles maestros de múltiples paneles. El mismo código proporciona un diseño de paisaje de múltiples paneles en las tabletas y un diseño de portada de monocapa en los teléfonos normales. Es un ejemplo interesante, aunque un poco complicado.

Acerca de tener tres paneles en algunos casos: No creo que esto sea una gran idea. Creo que en cualquier momento debe haber sólo una pantalla de lista y una pantalla de detalle, y debe implementar el flujo de interfaz de usuario de su aplicación para admitir tal idioma. No sería muy difícil implementar un diseño de tres paneles, pero dudo que sea útil o innovador.

EDITAR:

He entendido su requisito, y tengo que admitir que no me di cuenta de la posibilidad de este tipo de uso. Es un buen diseño. Lo que siento es que realmente no necesitas pensar en términos de tres paneles: más bien, trata la lista izquierda como el panel de lista y todo el lado derecho como un solo panel de detalles. Dentro de este panel de detalle, puede tener tres Fragment anidados para las tres regiones separadas. O en su lugar, ya que los Fragment anidados pueden crear a veces más problemas de los que solucionan, deje que haya tres LinearLayout s. Eso sería más fácil de manejar, lo que estoy tratando de hacer es simplificar el diseño para que funcione correctamente y sin código complicado.

¿Qué conseguí de tu pregunta es que deseas fijar el peso diferente del diseño para diversas situaciones a la derecha? Si es así entonces usted puede hacerlo programáticamente, también desea ocultar su diseño para el primer caso así que use 3 diseños para el menú, content1 y content2 hide content2 para el primer caso como

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/menu" android:layout_weight="30" android:layout_width="0px" android:layout_height="match_parent" /> <FrameLayout android:id="@+id/content2" android:layout_width="0px" android:layout_height="match_parent" /> <FrameLayout android:id="@+id/content2" android:layout_width="0px" android:layout_height="match_parent" /> </LinearLayout> 

Para el uso del primer caso:

 LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); paramsmenu.weight = 30f; FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu); frameLayoutmenu.setLayoutParams(paramsmenu); LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params1.weight = 70f; FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1); frameLayoutContent1.setLayoutParams(params1); FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2); frameLayoutContent2.setVisibility(View.GONE); 

Para el uso del segundo caso:

  LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); paramsmenu.weight = 30f; FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu); frameLayoutmenu.setLayoutParams(paramsmenu); LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params1.weight = 35f; FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1); frameLayoutContent1.setLayoutParams(params1); FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2); LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params2.weight = 35f; frameLayoutContent2.setLayoutParams(params2); 

Para el uso de tercer caso:

  LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); paramsmenu.weight = 30f; FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu); frameLayoutmenu.setLayoutParams(paramsmenu); LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params1.weight = 40f; FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1); frameLayoutContent1.setLayoutParams(params1); FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2); LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params2.weight = 30f; frameLayoutContent2.setLayoutParams(params2); 

Para el uso del cuarto caso:

  LinearLayout.LayoutParams paramsmenu = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); paramsmenu.weight = 30f; FrameLayout frameLayoutmenu = (FrameLayout)findViewById(R.id.menu); frameLayoutmenu.setLayoutParams(paramsmenu); LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params1.weight = 20f; FrameLayout frameLayoutContent1 = (FrameLayout)findViewById(R.id.content1); frameLayoutContent1.setLayoutParams(params1); FrameLayout frameLayoutContent2 = (FrameLayout)findViewById(R.id.content2); LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT); params2.weight = 50f; frameLayoutContent2.setLayoutParams(params2); 
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.