Сложный список

Содержание

Многоуровневый список в HTML: как создать и настроить?

Сложный список

От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!

Базовая теория

Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный.

Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке.

Соответственно, такой список подошел бы для планирования дня или записи рецепта.

В маркированном пункты просто стоят друг за другом, но при этом если их поменять местами, то ничего не поменяется, так как пункты не привязаны к какой-то строгой нумерации.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

Многоуровневый список: как его делать?

Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.

  1. 18 июля
    1. Написать статью
    2. Почитать книгу 1 час
    3. Сходить в кино
  2. 19 июля
  3. 20 июля
Почитать книгу 1 час

Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.

Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.

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

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

То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

Кстати, вот так это выглядит:

Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.

Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

ol ol{ list-style-type: lower-alpha; }

list-style-type: lower-alpha;

То есть мы использовали вложенный селектор. Свойство list-style-type: lower-alpha, поменяет нумераторы с цифр на строчные латинские буквы. Вообще значений у этого свойства много, но остальные можете посмотреть в справочнике.

Еще раз отмечу, что обращение происходит ко всем нумерованным спискам, которые, в свою очередь, вложены в другие нумерованные списки. Соответственно, селектор ol ol ol выберет все списки, которые имеют уже второй уровень вложенности и т.д.

Пока на этом мы остановимся, более интересный способ оформления я покажу вам позже с помощью css. А пока мы вернемся к маркированным спискам и создадим такой:

  • Овощи
    • картофель
    • перец
    • морковь
  • Фрукты
    • яблоки
    • бананы

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

Вы должны понимать, что в html в принципе нет никакого лимита на кол-во вложенных списков. То есть вы можете создать их хоть 10-15 в одном списке.

Единственная проблема, с которой вы столкнетесь – длинная и очень запутанная разметка, в которой трудно разобраться.

Изменяем маркеры для маркированного списка с помощью CSS

Если мы возьмем стандартное оформление списков, то, как видите, оно очень и очень скудное. В 99% процентов оно просто будет вас не устраивать и вы захотите его сменить. К счастью, для маркированных списков это сделать очень легко, так как есть свойство list-style-image, но я предлагаю использовать сокращенную запись и записать так:

ul{ list-style: url(marker.jpg); }

list-style: url(marker.jpg);

Предварительно я нашел и поместил в папку нужную картинку, вот что получилось:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Конечно, наиболее оптимальный форматом картинки-маркера я считаю формат png. С его помощью вы можете подбирать не только квадратные маркеры. Да и вообще png-картинка будет лучше смотреться.

Я думаю, за 5 минут поиска в интернете вы сможете найти немало подобных маркеров, которые потом можно применять в верстке. Конечно, наиболее оптимальным вариантом будет нарисовать самому, если не обделены талантом, либо заказать у дизайнера, чтобы дизайн маркеров соответствовал общему дизайну сайта.

Убираем маркеры и нумераторы полностью

В некоторых случаях нужно просто убрать маркеры или нумераторы у списков, потому что их не должно быть по дизайну. Например, вертикальные и горизонтальные менюшки в 90% случаев делают именно через список. Соответственно, маркеры нам в таком меню ни к чему. Чтобы убрать, пишем так:

ol или ul{ list-style-type: none; }

Либо в сокращенной записи – list-style: none.

Стилизуем нумерованный список

То, что я покажу далее, уже является более сложной фишкой, которая позволяет создать любое оформление для нумераторов. Во-первых, мы полностью уберем стандартные нумераторы, так как их все равно нормально не оформишь, лучше будет вообще полностью от них избавиться.

Далее в css напишем такой код, ниже я его объясню:

ol{ list-style-type: none; counter-reset: number; } ol li{ font-size: 18px; } ol li:before { color: #fff; background: #62CB91; display: inline-block; text-align: center; margin: 3px 3px; line-height: 22px; width: 22px; height: 22px; counter-increment: number; content:counter(number); border-radius: 3px; box-shadow: 2px 2px 0 0 #ccc; }

counter-increment: number; box-shadow: 2px 2px 0 0 #ccc;

Самое главное то, какую красоту он создал:

Да, это явно поинтереснее, причем вы можете сделать любой, абсолютно любой дизайн для ваших нумераторов. Но я обещал вам объяснить код.

Итак, львиная доля свойств прописана для селектора ol li:before. Во-первых, нам надо разобраться, как он работает. Псевдоэлемент before позволяет поместить любое содержимое перед указанным элементом. В нашем случае это все пункты нумерованных списков.

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

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

counter-increment: number;

counter-increment: number;

Через двоеточие прописывается название счетчика. Оно может быть произвольным, не обязательно number. Хорошо, это мы просто задали счетчик, но пока его значение никак не выводится. Если вы изучали псевдоэлементы after и before, то знаете, что текстовое содержимое задается в них с помощью свойства content. Значит, пишем так:

Теперь в псевдоэлементах будет выводиться значение счетчика. В первом элементе – 1, во втором – 2. То есть то, что нужно для списка. Какие еще свойства я указал, чтобы завершить оформление? Например, border-radius – это закругление углов, box-shadow – небольшая тень, display: inline-block – очень важное правило, оно позволит псевдоэлементу отображаться на одной строке с контентом пункта li.

Но и это не все!) Вот такой код еще у нас прописан для нумерованных списков в целом:

Что он означает и для чего нужен? По сути, это сброс счетчика. То есть для каждого нумерованного списка значение будет сброшено до нуля и с него начнется отсчет. Если бы этого правила не было, то было бы вот что:

Как видите, у вложенного списка уже отсчет пошел бы неправильно, не с одного, а с двух. Ну и вообще все работало бы неверно. Так что обязательно добавляйте сброс счетчика для каждого отдельного счетчика.

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

Как видите, вам даже дизайнер может не понадобиться, чтобы сделать вполне себе симпатичные списки. Все упирается в ваши знания по css: чем их больше, тем проще вам создавать классное оформление любым элементам на веб-странице.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/mnogourovnevyj-spisok-v-html-kak-sozdat-i-nastroit/

1.8. HTML-списки

Сложный список

HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

  • маркированный список
      — каждый элемент списка

    • отмечается маркером,
    • нумерованный список
        — каждый элемент списка

      1. отмечается цифрой,
      2. список определений — — состоит из пар термин — определение.

    Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение.

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

    1. Маркированный список

    Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента

      . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:ul { padding-left: 40px; margin-top: 1em; margin-bottom: 1em; }Каждый элемент списка создаётся с помощью элемента

    • (от англ. List Item).Для элемента
        доступны ‎глобальные атрибуты.

        • Microsoft
        • Google
        • Apple
        • IBM
        • Microsoft
        • Google
        • Apple
        • IBM

        Фигура. 1. Маркированный список

        2. Нумерованный список

        Нумерованный список создаётся с помощью элемента

          . Каждый пункт списка также создаётся с помощью элемента

        1. . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

          Блок списка также имеет стили браузера по умолчанию:

          ol { padding-left: 40px; margin-top: 1em; margin-bottom: 1em; }

          Для элемента

        2. доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
        3. , то остальная нумерация будет пересчитана относительно нового значения.

          Для элемента

            доступны следующие атрибуты:

            Таблица 1. Атрибуты элемента

              АтрибутОписание, принимаемое значение
              reversedАтрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
              startАтрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция

                первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,

                  .
              typeАтрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:1 — значение по умолчанию, десятичная нумерация.A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).I — нумерация римскими заглавными цифрами (I, II, III, IV).i — нумерация римскими строчными цифрами (i, ii, iii, iv).
              1. Microsoft
              2. Google
              3. Apple
              4. IBM
              1. Microsoft
              2. Google
              3. Apple
              4. IBM

              Фигура. 2. Нумерованный список

              3. Список определений

              Списки определений создаются с помощью элемента . Для добавления термина применяется элемент , а для вставки определения — элемент .

              Блок списка определений имеет следующие стили браузера по умолчанию:

              dl { margin-top: 1em; margin-bottom: 1em; }

              Для элементов , и доступны ‎глобальные атрибуты.

              Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Режиссер:Петр ТочилинВ ролях:Андрей ГайдулянАлексей ГавриловВиталий ГогунскийМария КожевниковаФигура. 3. Список определений

              4. Как создать вложенный список

              Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

              • Пункт 1.
              • Пункт 2.
                • Подпункт 2.1.
                • Подпункт 2.2.
                  • Подпункт 2.2.1.
                  • Подпункт 2.2.2.
                • Подпункт 2.3.
              • Пункт 3.
              • Пункт 1.
              • Пункт 2.
                • Подпункт 2.1.
                • Подпункт 2.2.
                  • Подпункт 2.2.1.
                  • Подпункт 2.2.2.
                • Подпункт 2.3.
              • Пункт 3.

              Фигура. 4. Вложенный список

              5. Многоуровневый нумерованный список

              Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

              1. пункт
              2. пункт
                1. пункт
                2. пункт
                3. пункт
                  1. пункт
                  2. пункт
                  3. пункт
                4. пункт
              3. пункт
              4. пункт

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

              • counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
              • counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
              • content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

              ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано – по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li, “.”) “. “; }

              1. пункт
              2. пункт
                1. пункт
                2. пункт
                3. пункт
                4. пункт
              3. пункт
              4. пункт

              Фигура. 5. Многоуровневый нумерованный список

              Источник: https://html5book.ru/html-lists/

              Что такое маркированные и многоуровневые списки

              Сложный список

              Word для Microsoft 365 Outlook для Microsoft 365 Word 2019 Outlook 2019 Word 2016 Outlook 2016 Word 2013 Outlook 2013 Word 2010 Outlook 2010 Word 2007 Word Starter 2010 Дополнительно…

              Меньше

              Вы можете настроить внешний вид списка, определив собственный нумерованный, маркированный или многоуровневый список.

              После этого можно сохранить его параметры в качестве стиля и использовать их повторно.

              Определение нового формата маркера

              Определение нового формата номера

              Определение нового многоуровневого списка

              Определение нового стиля списка

              Отключение автоматической нумерации списков

              Дополнительные сведения

              Выполните одно из указанных ниже действий.

              Изменение маркера на символ

              1. Выделите текст или маркированный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список  и выберите пункт Определить новый маркер.

              3. Нажмите кнопку Символ и щелкните нужный символ.

              4. Нажмите кнопку ОК.

              Изменение маркера на рисунок

              1. Выделите текст или маркированный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список  и выберите пункт Определить новый маркер.

              3. Щелкните Рисунок и выберите изображение из файла или с помощью поиска изображений Bing.

              4. Нажмите кнопку Вставить.

              5. Просмотрите, как будет выглядеть рисунок в качестве маркера, и нажмите кнопку ОК, чтобы добавить его, либо замените рисунок, повторив шаги 3–5.

              Изменение шрифта маркера

              1. Выделите текст или маркированный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список  и выберите пункт Определить новый маркер.

              3. Нажмите кнопку Шрифт и измените свойства шрифта, который будет использоваться для маркера. Вы можете выбрать параметры на вкладках Шрифт и Дополнительно:

              ВкладкаОписание
              Вкладка ШрифтИзменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
              Вкладка ДополнительноНастройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.

              Изменение выравнивания маркера

              1. Выделите текст или маркированный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список  и выберите пункт Определить новый маркер.

              3. В группе “Выравнивание” выберите Слева, По центру или Справа.

              4. Нажмите кнопку ОК.

              1. Выделите текст или нумерованный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Нумерованный список  и выберите пункт Определить новый формат номера.

              3. Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности.

              4. Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:

                ВкладкаОписание
                Вкладка ШрифтИзменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
                Вкладка ДополнительноНастройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
              5. Чтобы добавить к номеру дефис, круглую скобку или другой символ, введите его в поле Формат номера.

              6. Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе “Выравнивание”.

              7. Нажмите кнопку ОК.

              1. Выделите текст или нумерованный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список  и выберите пункт Определение нового многоуровневого списка.

              3. Разверните диалоговое окно “Многоуровневый список”, щелкнув Дополнительно в левом нижнем углу.

              4. Выберите уровень списка, который нужно изменить, щелкнув его в списке. По умолчанию выбрано значение 1.

              5. Укажите, к чему вы хотите применить изменения, щелкнув ко всему списку, до конца документа или к текущему абзацу.

              6. Чтобы использовать существующий стиль в Word для каждого уровня в списке, выберите стиль в разделе “Связать уровень со стилем”.

              7. Выберите номер для отображения в коллекции. По умолчанию отображается Уровень 1.

              8. Присвойте многоуровневому списку имя в разделе “Имя списка поля ListNum”. Оно будет отображаться для всех полей ListNum.

              9. Чтобы добавить к нумерованному списку дефис, круглую скобку или другой символ, введите его в поле Формат номера.

              10. Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:

                ВкладкаОписание
                Вкладка ШрифтИзменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.
                Вкладка ДополнительноНастройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.
              11. Чтобы изменить стиль, щелкните стрелку вниз рядом с полем Нумерация и выберите числа, буквы или другой формат последовательности. Укажите номер уровня, начиная с которого нужно это включать.

              12. Выберите начальный номер для списка. Значение по умолчанию — 1. Чтобы заново начать нумерацию после определенного уровня, установите флажок Нумеровать заново и выберите уровень в списке.

              13. Выберите Заменить римские цифры арабскими для использования этого стиля в многоуровневом списке.

              14. Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе “Выравнивание”.

              15. Укажите, откуда нужно начать выравнивание, и задайте отступ.

              16. Чтобы применить эти значения ко всему списку, выберите Параметры для всех уровней.

              17. Укажите, что должно следовать после каждого номера: знак табуляции, пробел или ничего. Установите флажок Добавить позицию табуляции и введите значение.

              18. Нажмите кнопку ОК.

              1. Выделите текст или нумерованный список, который вы хотите изменить.

              2. На вкладке в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список  и выберите пункт Определение нового стиля списка.

              3. Введите имя для нового стиля списка.

              4. Выберите начальный номер для списка. Значение по умолчанию — 1.

              5. Выберите уровень в списке, к которому нужно применить форматирование.

              6. Укажите начертание, размер и цвет шрифта для стиля списка.

              7. Щелкните стрелку вниз, чтобы изменить стиль нумерованного или маркированного списка.

              8. Выберите символ для списка.

              9. Выберите изображение для списка.

              10. Сместите отступ влево или вправо.

              11. Укажите, нужно ли применить эти изменения Только в этом документе или же В новых документах, использующих этот шаблон.

              12. Чтобы настроить дополнительные параметры форматирования, щелкните Формат и выберите Шрифт, Нумерация, Текстовые эффекты или другие настройки.

              13. Нажмите кнопку ОК.

              1. Следуйте инструкциям для используемой версии Word

                Word 2016, Word 2013 или Word 2010

                • Выберите Файл, а затем в левой области выберите Параметры.

                Word 2007

                • Нажмите кнопку Microsoft Office и выберите Параметры Word.
              2. В диалоговом окне Параметры Word выберите Правописание.

              3. В правой области в разделе Параметры автозамены нажмите кнопку Параметры автозамены.

              4. Откройте вкладку Автоформат при вводе.

              5. В разделе Применять при вводе снимите флажок стили маркированных списков и нажмите кнопку ОК.

              Изменение отступа между маркером или номером и текстом в списке

              Изменение нумерации в нумерованном списке

              Источник: https://support.microsoft.com/ru-ru/office/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-%D0%BC%D0%B0%D1%80%D0%BA%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B8-%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D1%83%D1%80%D0%BE%D0%B2%D0%BD%D0%B5%D0%B2%D1%8B%D0%B5-%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B8-6c06ef65-27ad-4893-80c9-0b944cb81f5f

              Создание сложного списка элементов за 20 минут в Android на базе Groupie

              Сложный список

              Списки являются основным способом представления различного контента в мобильных приложениях.

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

              Самый наглядный пример, известный любому Android-разработчику — это приложение Google Play, начальный экран которого является сложным списком с множеством вложенных элементов:

              Естественно, чтобы поддержать такое разнообразие контента и при этом сохранить оптимальную производительность для такой задачи лучше всего использовать RecyclerView. Как создать список, поддерживающий разные виды ячеек, которые в свою очередь могут тоже содержать вложенные списки за 20 минут, я покажу на примере в этой статье.

              В конце у вас получится вот такой список:

              Итак, задача: создать список для отображения различного вида контента, при этом каждая категория, то есть ячейка списка может содержать неограниченное количество более мелких ячеек и иметь горизонтальный скрол. Звучит сложно? Если вы думаете что это сложная задача, над которой вам нужно будет работать всю неделю, то спешу вас обрадовать, мы сделаем такой список примерно на полчаса.

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

              Можно использовать как стандартный подход, в котором необходимо будет создать adapter для каждого из списков, ViewHolders для разного типа ячеек и так далее.

              А можно использовать более быстрый подход без множества похожего кода на базе библиотеки Groupie

              Groupie is a simple, flexible library for complex RecyclerView layouts.

              Это простая и в тоже время мощная библиотека для упрощения построения списков на базе RecyclerView, которая заметно ускорит разработку сложных списков как в примерах выше.

              Безусловно, все что мы видели можно сделать и без этой библиотеки, тем более совсем недавно в Android появился MergeAdapter (если будет интересно, то в следующей статье напишу и про него). Но так или иначе вы столкнётесь с недостатками стандартного подхода, описанного в той же статье.

              Поэтому, сегодня мы попробуем новый подход, ускоряющий разработку, избавляющий от написания бойлерплейт-кода и соответсвующий принципам SOLID.

              Если кратко, то алгоритм действий выглядит следующим:

              • Создаём проект. Добавляем нужные зависимости.
              • Определяем нужные ячейки. Создаём layouts для отображения UI
              • Соединяем ячейки с адаптером RecyclerView и наслаждаемся результатом.

              Создание проекта и добавление библиотек

              Для создания списка как в примере на картинке нам понадобится 4 библиотеки: RecyclerView, CardView, Picasso (для отображения картинок) и Groupie. Добавим всё это в build.gradle(app):

              implementation 'com.xwray:groupie:2.8.0'implementation 'com.xwray:groupie-kotlin-android-extensions:2.8.0'implementation “androidx.recyclerview:recyclerview:1.1.0″implementation 'com.squareup.picasso:picasso:2.71828'implementation 'androidx.cardview:cardview:1.0.0'

              Кроме этого, добавьте в build.gradle в блок android

              androidExtensions { experimental = true}

              Нажмите Sync Now для скачивания необходимых зависимостей.

              Создание ячеек для отображения контента

              Для отображения списка нам понадобится 3 типа ячеек:

              • Общая ячейка — контейнер для отображения вложенного списка. Обозначена красным прямоугольником.
              • Ячейка внутри основной ячейки для отображения информации о фильме. Такие ячейки выделены синим прямоугольником. Они находятся внутри основной ячейки в RecyclerView c горизонтальным скролом.
              • Квадратная ячейка для отображения обложек игр. Выделена зелёным цветом.

              Создание главной ячейки с вложенным RecyclerView

              Вначале создадим общую ячейку с вложенным RecyclerView для отображения более мелких ячеек.

              Вёрстка такой ячейки будет состоять из CardView с LinearLayout для отображения названия, описания и RecyclerView для отображения внутренних ячеек.

              Теперь создадим логику для отображения данных ячейки.

              class MainCardContainer( private val title: String? = “”, private val description: String? = “”, private val onClick: (url: String) -> Unit, private val items: List) : Item() { override fun getLayout() = R.layout.item_card override fun bind(viewHolder: GroupieViewHolder, position: Int) { viewHolder.title_text_view.text = title viewHolder.description_text_view.text = description viewHolder.items_container.adapter = GroupAdapter().apply { addAll(items) } }}

              Каждая ячейка при использовании Groupie должна быть наследником от абстрактного класса Item. Для этого необходимо переопределить всего 2 метода getLayout() и bind().

              То есть для создания ячейки вам нужно указать layout который будет использоваться для отображения UI и дописать логику формирования данных для этой ячейки и всё! Теперь не нужно писать однотипные адаптеры для разных ячеек или комбинировать множество разных типов ячеек в одном адаптере, нарушая принципы SOLID.

              Ну или выдумывать базовые классы для ячеек, только для того, чтобы можно было переиспользовать один и тот же адаптер. C Groupie для каждой ячейки вам необходимо создать свой класс, и описать в нем UI!

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

              viewHolder.items_container.adapter =GroupAdapter().apply { addAll(items) }
              То есть для RecyclerView который внутри этой ячейки, необходимо добавить общий GroupAdapter и наполнить его ячейками, которые являются наследниками Item.

              Общий контейнер готов, теперь осталось сверстать частные ячейки для каждого типа контента.
              Их будет 2:

              • Ячейка для фильма с названием фильма
              • Квадратная ячейка с обложкой игры

              Ячейка для фильма

              Ячейка для фильма, также должна быть наследником Item и должна реализовать 2 метода:

              class MovieItem(private val content: MovieContent) : Item() { override fun getLayout() = R.layout.item_with_text override fun bind(viewHolder: GroupieViewHolder, position: Int) { viewHolder.description.text = content.title Picasso.get() .load(content.url) .into(viewHolder.image_preview) }}

              Верстка достаточно простая и код можно посмотреть в проекте на GitHub.

              Квадратная ячейка для отображения обложки игры

              Эта ячейка тоже является достаточно простой, поэтому лучше посмотрите код проекта.

              Все вместе. Соединяем все ячейки вместе

              Для создания списка теперь нужно создать ячейки с контентом и передать их в адаптер RecyclerView. Для создания ячеек были созданы 2 метода getPopularMovies() и getPopularGames() которые возвращают ячейки типа Item.

              private fun getPopularMovies(): Item { return MainCardContainer( “Список фильмов”, “Лучшие фильмы”, ::onItemClick, listOf( MovieItem( MovieContent( “Джокер”, “https://upload.wikimedia…..jpg” ) ), MovieItem( MovieContent( “Бойцовский клуб”, “https://upload.wikimedia.org……jpg” ) ) ) )}

              Каждый из методов возвращает 1 ячейку MainCardContainer — которой передаётся в качестве аргумента список ячеек уже с контентом для вложенного RecyclerView. Например, для ячейки которая отображает список фильмов нужно указать список ячеек MovieItem. Для второй ячейки, которая отображает список игр — мы создадим также метод, который создаст основную общую ячейку и передаст ячейки с играми.

              В итоге создание списка теперь будет выглядеть так:

              override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val movies = listOf(getPopularMovies(), getPopularGames()) items_container.adapter = GroupAdapter().apply { addAll(movies) }}

              Последняя строка как раз использует GroupAdapter в который мы можем передать любые ячейки, которые являются наследниками Item.

              Ну вот и всё! Буквально за 20 минут мы создали сложный список для отображения различного типа контента с вложенным горизонтальным списком! Сравните такой подход с традиционным и сделайте выводы сами! Абсолютно точно, такой подход сэкономит вам время на разработку подобных UI — компонентов и избавит от кучи бесполезного кода. А в телеграм-канале @android_school_ru и на сайте вы сможете найти ещё больше современных туториалов на Kotlin и бесплатных мини-курсов для Android-разработчиков.
              Исходный код из статьи можно посмотреть на GitHub

              Источник: https://habr.com/ru/post/523768/

              Списки: ловушка для новичков и мэтров — CMS Magazine

              Сложный список

              Когда речь заходит о списках, я показываю курсантам вот такой слайд:

              Это прекрасное «крыло» – согласитесь, в нем есть какое-то очарование. Жаль, оригинал не сохранился – сайт переделали.

              Теперь закройте листком бумаги галочки слева. Что изменилось?

              Ни-че-го.

              Как всегда, во всем виновато SEO

              Как и многие другие корявости, искаженное представление о пользе списков пришло в копирайтинг из SEO. Фраза «использовать в тексте маркированные списки и подзаголовки» присутствует в 95% тех.заданий на текст.

              Да, верно, поисковики «любят» списки. Как и подзаголовки, для них это косвенный признак качества текста.

              Структурированный текст, разбитый на небольшие логические блоки, читать (просматривать) легче, чем «серебряное полотно» сплошного набора. И кто с этим поспорит?

              Разве что классики, имевшие привычку начинать предложение вверху страницы и заканчивать его где-то посередине листа.

              «Заставь дурака молиться, так он и лоб расшибет»

              Косвенный признак качества стал одним из основных.

              Если в тексте есть списки, он хорошо читается.

              Правда? Точно?

              Давайте смотреть.

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

              А какова, например, цель вот такого списка?

              Можно предположить, что здесь список играет роль скорее риторическую – интонацией подчеркнуть важные моменты. Но разнобой в пунктах лишает его убедительности. Представьте себе, как вы думаете: «Я буду делать это, потому что хочу впустую потратить время».

              Увидел перечисление – сделай список. Рефлекс, от которого чертовски трудно избавиться.

              О, этот копирайтинг прямого попадания…

              Но не будем вешать всех собак на SEO. Есть еще одна область, где список — вернее, число – является стержнем, основой, мощным приемом продаж. Я говорю о копирайтинге прямого отклика, или продающем копирайтинге.

              58 способов добиться успеха на первом свидании.

              298 советов начинающим копирайтерам.

              3 тополя на Плющихе. Ой, это мимо.

              7 способов зарабатывать, торгуя воздухом.

              10 вещей, которые вы не знали о кондиционерах.

              Ну вы поняли, о чем я.

              Когда в заголовке присутствует обещание перечислить сколько-то важных вещей, догадайтесь, что вы найдете в тексте? С вероятностью 90% – список.

              Хорошо ли это?

              В меру, с умом – конечно, хорошо.

              Но задумайтесь: 298 советов. Какова вероятность, что вы прочтете 172-й совет?

              Или: вы знаете 4 способа получить грин-карту на халяву. Но 4 – число «некрасивое». Надо срочно выдумать 5-й способ. Или умолчать о 4-м.

              • Список ради списка — ловушка даже для маститых авторов.

              Предназначение списков

              Можно понять юристов, которые нумеруют статьи договора, доходя до 5 уровней вложенности. Не станешь спорить, когда читаешь пошаговую инструкцию из 38 пунктов с подпунктами. Есть и другие виды текстов, где список — не просто отличный, но прямо-таки необходимый прием. Например, список ингредиентов в рецепте или оглавление в книге.

              Но в этих примерах сам контент требует организации.

              Еще один повод сделать список был упомянут выше: интонационный акцент. Зачастую список заменяет житейское загибание пальцев. Как это было в «Пигмалионе»:

              Дулиттл (меланхолическим речитативом). Дайте мне слово сказать, хозяин, и я вам все объясню. Я могу вам все объяснить. Я хочу вам все объяснить. Я должен вам все объяснить.

              Хиггинс. Пикеринг, у этого человека природные способности оратора. Обратите внимание на ритм и конструкцию: «Я могу вам все объяснить. Я хочу вам все объяснить. Я должен вам все объяснить». Сентиментальная риторика! Вот она, примесь уэльской крови. Попрошайничество и жульнические замашки отсюда же.

              Когда вам действительно нужно вдолбить в голову читателя ваше послание, нет ничего лучше списка. Короткого, ёмкого, точного списка. Три пункта, не более.

              Итак, списки: как правильно их готовить

              Список — это способ донести до читателя что-то по-настоящему важное. Впечатать сообщение в сознание. Оставить там четкую картинку: раз, два, три, пли!

              Все остальные банальные способы использования списков не заслуживают глубокого рассмотрения. Просто перечислим их:

              • нумерованные статьи в договоре или другом официальном документе;
              • инструкции и другие структурированные материалы;
              • ингредиенты в рецепте;
              • оглавление в книге;
              • перечень последовательных шагов;
              • перечень альтернатив;
              • перечень предметов или признаков…

              Как видите, я тоже стала заложницей списка и начала выдумывать новые виды перечней, просто чтобы продолжать множить эти точечки.

              Основная характеристика сущностей, составляющих список — однородность.

              Например, я видела список:

              1. 3 мастер-класса;
              2. 20 докладчиков;
              3. 1000 участников;
              4. единая цена на билет 2000 рублей.

              А сейчас вопрос из теста на IQ: какой пункт здесь лишний?

              Списки бывают:

              • нумерованные
              • и маркированные.

              Третьего пункта нет.

              Нумерованный список используется тогда (и только тогда), когда его элементы связаны последовательно. Когда никакие два пункта не могут поменяться местами.

              Маркированный список — или список с буллетами (пулями) – гораздо более гибкая конструкция. Здесь можно разнообразить маркировку – вместо банальных точек использовать ромбики, звездочки, тире и дефисы, любые символы. Можно сделать маркер цветным или наоборот элегантно-бледным, маркеры могут быть очень большими, могут смещаться относительно базовой линии, вообще вести себя странно.

              В сущности, маркированный список – отличный инструмент оформления текста.

              А еще в списке может быть один-единственный пункт. Просто потому что одинокий маркер – это уже акцент.

              А если он еще и нестандартный…

              Еще одна роль, которую легко сыграет список, это – подзаголовок.

              Представьте статью «7 способов заменить перегоревшую лампочку». Очевидно, что каждый способ придется описать, причем не одной фразой. А список сделать хочется. ОК, кто нам запретит?

              7 способов заменить перегоревшую лампочку

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

              2. Влезьте сами.
                У вас же есть стремянка? Отлично. Это повод получить массу удовольствия. Во-первых, вы целую неделю будете ходить в героинях, укоряя сильную половину одним лишь видом. Во-вторых… впрочем, хватит и во-первых.

              3. Вызовите 5 прапорщиков.
                Инсценируйте наконец этот тупой анекдот.

              4. И т.д.

              Как видите, список присутствует, но отягощен довольно большими порциями текста.

              А что делать, если у вас на самом деле накопилось 298 советов начинающим заводчикам французских бульдогов?

              Ответ прост: группируйте, разбивайте, объединяйте пункты.

              Во-первых, любой большой список может быть разбит на несколько более однородных списков.

              • Во-вторых, есть такая полезная штука, как уровни списка.
                • Всегда можно сделать список, состоящий из 3 основных пунктов,
                  • у каждого из которых есть 2-3 подпункта.

              В-третьих, кто вам сказал, что вы обязаны вообще делать список? Сделайте таблицу! Таблица – еще один инструмент, который делает информацию более доходчивой.

              Какова оптимальная длина списка?

              Список из 2 пунктов несколько вялый. Это «или/или», выполненное в самой унылой манере, никакого драматизма.

              3 пункта – на мой взгляд – идеальный вариант. Красивы также списки из 5 пунктов.

              7 и 9 – это уже предел. Найдите список из 9 пунктов и попробуйте вспомнить 4-ю позицию. Недаром в американских «желтых страницах» позиции в начале и конце списка стоят дороже, чем места внутри перечня.

              Говорят, больше 7 (плюс-минус 2) предметов не удерживает человеческая память. Это отличное оправдание для сокращения любых списков, которые попадаются вам под руку!

              Так все же: списки – зло или добро?

              Один хороший фотограф сказал: снимать может и коробка с дыркой, какая разница? Главное знать, чего хочешь.

              Вы можете использовать списки и можете пренебрегать ими.

              Если вы делаете этот выбор сознательно, то все в порядке.

              Открою небольшой секрет: этот совет можно применить к огромному списку (!) разных инструментов и приемов.

              Источник: https://CMSmagazine.ru/journal/items-lists-a-trap-for-beginners-and-masters/

    Поделиться:
    Нет комментариев

      Добавить комментарий

      Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.