Мне нужно создать приложение, которое изначально будет работать только для планшетов. Мне известен шаблон «Список и детали», в котором есть список чего-либо, где при нажатии на список отображаются сведения об элементе, на который был выполнен щелчок.

Это просто идеально, если у всех макетов всегда есть две панели: одна для списка элементов, а другая для деталей выбранного элемента.

Что ж, в моем приложении я хочу использовать первую панель, которая обычно используется для списка элементов, как меню всех доступных опций в приложении, а вторую панель, которая занимает большую часть доступного места, для отображения конкретный макет на основе варианта, который был выбран в первом фрагменте.

Проблема в том, что вторая панель не всегда будет состоять из одной части.

Это все возможные сценарии, которые у меня будут (левая часть с красной рамкой представляет меню, которое всегда должно отображаться):

1. Панель сведений, состоящая из одной части:

enter image description here

2. Панель сведений, состоящая из двух частей одинакового размера, которые не имеют отношения "главный-подробный".

enter image description here

3. Панель сведений состоит из двух частей, которые связаны между собой, но основная часть шире, чем часть сведений.

#Редактировать :

Поскольку основная цель моего приложения - помочь официантам принимать заказы, этот третий сценарий вступает в игру, когда:

  • Официант выбирает опцию «Принять заказ» в левом меню (давайте представим, что это «Товар два» на изображении).
  • В первой части панели сведений официант может выбрать одну из всех категорий блюд, которые он подает (представьте, что это список вверху), и в соответствии с выбранной категорией в нижеследующем списке отображаются все блюда в этой конкретной категории.
  • Когда официант нажимает на блюдо, оно автоматически добавляется во вторую часть панели сведений (та, которая скрыта в первом сценарии).

enter image description here

4. Панель сведений состоит из двух частей, которые действительно связаны между собой, но часть сведений шире, чем основная часть.

enter image description here

Я знаю, что если я хочу повторно использовать макет с экранами разного размера и ориентации, я должен использовать фрагменты, но мне нужно на лету определять, какой из них будет отображать две или одну часть (фрагменты) на панели деталей или какая часть будет шире, чем другой, кажется, требует много работы, и, честно говоря, я не уверен, как это сделать, поскольку все, что я знаю сейчас, это то, что основное действие, то, что со слотами для панели меню и панелью деталей, должно быть похоже на это :

<?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>

Как вы думаете, вы могли бы дать здесь некоторые рекомендации по пользовательскому интерфейсу? Может быть, я слишком много думаю о том, что мне следует использовать одну линейную компоновку с нужным мне количеством деталей.

Заранее спасибо.

4
eddy 28 Фев 2015 в 16:40

2 ответа

Лучший ответ

Вы видели Получение списка контактов < / a> пример? Здесь они показали, как правильно реализовать многопанельный поток «мастер-детали». Тот же код обеспечивает многопанельный альбомный макет на планшетах и ​​однопанельный портретный макет на обычных телефонах. Это интересный, хотя и немного сложный пример.

О наличии трех панелей в некоторых случаях: я не думаю, что это отличная идея. Я думаю, что в любой момент времени должен быть только один экран со списком и один экран с подробностями, и вы должны реализовать поток пользовательского интерфейса своего приложения для поддержки такой идиомы. Было бы несложно реализовать трехпанельный макет, но я сомневаюсь, что это было бы полезно или новаторски.

РЕДАКТИРОВАТЬ:

Я понял ваше требование и должен признать, что не осознавал возможность такого использования. Хороший дизайн. Я считаю, что вам действительно не нужно думать в терминах трех панелей: лучше рассматривать левый список как панель со списком, а всю правую сторону как единую панель деталей. Внутри этой одной панели деталей вы можете иметь три вложенных Fragment для трех отдельных регионов. Или вместо этого, поскольку вложенные Fragment могут иногда создавать больше проблем, чем решать, пусть будет три LinearLayout. С этим было бы проще справиться. Я пытаюсь упростить макет, чтобы он работал правильно и без сложного кода.

5
Y.S 5 Мар 2015 в 22:14

Из вашего вопроса я понял, что вы хотите установить разный вес макета для разных ситуаций, верно? Если это так, вы можете сделать это программно, также вы хотите скрыть свой макет для первого случая, поэтому используйте 3 макета для меню, content1 и content2 скрыть content2 для первого случая как

<?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>

Для первого случая используйте:

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);

Для второго случая используйте:

    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);

Для третьего случая используйте:

    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);

Для четвертого случая используйте:

    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);
1
Sushant 1 Мар 2015 в 17:26