Градиенты и тени на кнопках

Question

Возможно ли программно или через конфигурацию xml (а не через 9patch png) добиться эффекта, как видно на виджете Springpad:

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

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

Спасибо.

Answer 1

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

android.graphics

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

Я сделал простой пример:

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

    Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint);

Answer 2

Начну с того, что, по моему мнению, наиболее эффективный метод воспроизведения чего-то вроде скриншота iPhone, который вы связали, заключается в создании изображения, подобного тому, которое они делали, вместо того, чтобы рисовать весь код (не обязательно9-патч, потому что я не вижу, где он должен был бы растягиваться, если вы создаете весь кусок).

Я не уверен в том, чтобы делать все тени, что, вероятно, потребовало бы манипулирования некоторым Paintобъекты с серией BlurMaskFilters.Но резкий градиент может быть сделан в XML с использованием списка слоев.Основная концепция заключалась бы в том, чтобы поместить основной фон для рисования и частично прозрачный оверлей, который можно рисовать вместе, наслоив их друг на друга.Если вы можете определить точную высоту всего изображения, наложение может быть установлено на 50% от этой высоты.Если все это растягивать, вы можете создать оверлей в виде Clip Drawable с «верхней» гравитацией и уровнем 5000 (50% от шкалы 0-10000).Это всегда будет рисовать наложение в верхней половине независимо от размера.

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

Вот ссылка на различные описываемые мной элементы, которые вы, вероятно, уже видели: http://developer.android.com/guide/topics/resources/drawable-resource.html

Надеюсь, это поможет!