Хобрук: Ваш путь к мастерству в программировании

Материальный дизайн для леденцов на палочке

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

  1. Здесь мы можем прочитать о тенях и возвышениях в Material Design.

https://developer.android.com/training/material/shadows-clipping.html#Shadows

Но мы можем использовать эти возможности только в Lollipop и выше. А как насчет устройств pre-lollipop? Если я хочу создать приложение, которое можно было бы использовать на устройствах pre-lollipop, я не могу использовать, например

android: elevation = "2dp"

Я прав?

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

Например, дизайнер дает мне psd с каким-то дизайном. Представьте, что это выглядит так

введите описание изображения здесь

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

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

введите описание изображения здесь

Это верхнее поле в 448 пикселей не учитывает тень.

Очевидно, я не могу просто поместить panel.png в свой some_layout.xml и установить верхнюю границу поля как 448px (298.67dp), потому что этот чертеж включает тень. Кажется, я должен учитывать длину тени и вычесть ее из верхнего поля (448-10 = 438px = 292dp).

Правильно ли это рассуждение? Я просто не могу в это поверить. Этот способ кажется слишком сложным. Может, есть более эффективная практика?

android material-design elevation
11.12.2015

Ответы:


1

Согласно shadow в устройствах Pre Lollipop

Для Android 5.0 и выше: AppBarLayout автоматически добавляет / дает тень в макете. Вы также можете увеличить высоту AppBarLayout с помощью android: elevation = "4dp"

Для Pre-Lollipop: вы можете использовать следующую ссылку: http://blog.grafixartist.com/add-a-toolbar-elevation-on-pre-lollipop/

Примечание. Панель инструментов также поддерживает повышение уровня с помощью android: elevation = "4dp".

Подробнее: Добавить высоту / тень на панели инструментов для устройств с предварительным леденцом на палочке

Согласно elevation в устройствах Pre Lollipop

Вы не можете имитировать высоту до Lollipop официальным методом.

Вы можете использовать некоторые чертежи для создания тени в вашем компоненте. Google использует этот способ, например, в CardView.

ViewCompat.setElevation(View, int) в настоящее время создает тень только на API21 +. Если вы проверите код позади, этот метод вызовет:

API 21+:

  @Override
    public void setElevation(View view, float elevation) {
        ViewCompatLollipop.setElevation(view, elevation);
    }

API ‹21

@Override
public void setElevation(View view, float elevation) {

}

Подробнее: Как реализовать повышение уровня материального дизайна для Предварительный леденец

РЕДАКТИРОВАТЬ: Поскольку @ geek90 предлагает посетить также это репо: http://github.com/navasmdc/MaterialDesignLibrary

11.12.2015
  • Большое спасибо за полезные ссылки! Я обязательно буду использовать их в своей работе. Но я все еще не понимаю одного момента. Представьте, как в примере выше, у меня есть какой-то разработанный элемент, и мне нужно правильно разместить его на экране. Как я понимаю из ваших ссылок, все эти методы подразумевают использование чертежей, которые включают тени. Например, как этот android: background = @ android: drawable / dialog_holo_light_frame Каким способом правильно определить правильное место этого элемента в моем макете, учитывая, что drawable включает в себя тень? 11.12.2015
  • Что ж, если вы действительно хотите связать любое представление с его местом назначения, хорошо изучите RelativeLayout и его атрибуты. Это лучший макет для установки определенных позиций для элементов макета. В xml файле, я думаю, не имеет значения, в какой запрос вы помещаете атрибуты - это зависит только от вас, я имею в виду сделать его максимально читаемым, если позже найдете атрибут, который нужно изменить 11.12.2015
  • Спасибо, но я почти всегда использую RelativeLayout в своих проектах. Для меня ясно, что я могу, например, установить что-то вроде этого ‹ImageView android: layout_alignParentTop = true android: layout_centerHorizontal = true android: layout_marginTop = 298dp /› Проблема в том, что если я установил drawable с тенью - он займет неправильное место , он не соответствует заданному макету psd. Тень сдвигает элемент вниз, ниже, чем он должен быть. Стоит ли каждый раз учитывать длину тени и пересчитывать атрибут layout_marginTop? Этого не может быть, это слишком сложно. 11.12.2015
  • Что ж, вам нужно рассчитать много вещей, если вы хотите иметь макет в качестве вашего .psd файла :-) Есть отступы, поля, тени ... и, наконец, устройства экрана. Попробуйте открыть свое приложение на эмуляторах или устройствах с разным размером экрана и плотностью экрана. Ага, иногда это действительно больно. Вот почему сегодня Google: делайте свое приложение максимально простым. У нас есть Material Design, не создавайте свои собственные и т. Д. 11.12.2015
  • Да вы правы. Но до Material Design все было более ясно. Эти тени убивают меня ... 12.12.2015

    • 2

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

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

    https://github.com/ZieIony/Carbon

    Подробнее о методе читайте здесь: Как для реализации Material-design Elevation для Pre-lollipop

    13.12.2015
  • Вау! Я не особо углублялся в эту библиотеку, но на первый взгляд она действительно впечатляет. Большое спасибо, Zielony! Я скоро попробую. 14.12.2015
    • Новые материалы
    5 проектов на Python, которые нужно создать прямо сейчас!
    Добро пожаловать! Python — один из моих любимых языков программирования. Если вы новичок в этом языке, перейдите по ссылке ниже, чтобы узнать о нем больше:
    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..
    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..
    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..