Освой программирование играючи
/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000
Как заполнить фон повторяющимся изображением (черепицей)
3D-панель
У многих элементов есть атрибут android:background, задать значение которому можно различными способами, в том числе указанием XML-ресурса, в котором описан способ заполнения заднего фона. Нам понадобятся само изображение, которым будет заполняться фон и XML-описание с указанием, как использовать это изображение при заполнении фона.
Исходное изображение pyramid.png (@drawable/pyramid)
XML-описание (@drawable/pyramidbitmap (pyramidbitmap.xml))
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/pyramid"
android:tileMode="repeat" />
Атрибут android:tileMode задает тип заполнения, в данном случае повторение исходного изображения по двум направлениям X- и Y- координат (repeat), указанного в атрибуте android:src. Кроме repeat возможны варианты clamp и mirror. Помните, что данный приём применим только к bitmap, к фигурам, созданным при помощи XML, применить данную операцию нельзя.
Далее задается в качестве заднего фона (атрибут android:background) этот XML-файл. Для демонстрации выбран LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/pyramidbitmap"
android:orientation="vertical" >
В режиме Graphical Layout у меня редактор заругался, что не может отпарсить строку. Но это не мешает запустить программу и получить следующий результат.
Образцы для фона можно поискать на специальных сайтах, например, на сайте http://subtlepatterns.com. Например, симпатичный узор вязанного свитера или вот еще красивый узор.
Пример программной установки подобного фона для ActionBar в Android 3, в которой наблюдаются некоторые проблемы с отображением (в Android 4 починили):
@Override
protected void onResume()
{
super.onResume();
final ActionBar actionBar = getActionBar();
background.setTileModeX( android.graphics.Shader.TileMode.REPEAT );
actionBar.setBackgroundDrawable( background );
}
На фоне созданной черепицы можно создать красивую объёмную панель с стильным текстом.
Создадим файл panel.xml в папке res/drawable.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke
android:width="@dimen/border"
android:color="@color/borderLow" />
<gradient
android:centerY="0.0"
android:endColor="@color/gradientEnd"
android:gradientRadius="@integer/gradient_radius"
android:startColor="@color/gradientStart"
android:type="radial"></gradient>
</shape>
</item>
<item>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="@dimen/negborder"
android:insetLeft="0dp"
android:insetRight="@dimen/negborder"
android:insetTop="0dp">
<shape>
<stroke
android:width="@dimen/border"
android:color="@color/borderHigh" />
<solid android:color="@android:color/transparent" />
</shape>
</inset>
</item>
</layer-list>
В файлах colors.xml и dimens.xml разместим ресурсы цветов и размеров.
<dimen name="margin">50dp</dimen>
<dimen name="text">64sp</dimen>
<dimen name="border">2dp</dimen>
<dimen name="negborder">-3dp</dimen>
<item name="gradient_radius" type="integer">500</item>
<item name="shadowDx" type="integer">2</item>
<item name="shadowDy" type="integer">2</item>
<item name="shadowRadius" type="integer">4</item>
<color name="borderLow">#999</color>
<color name="borderHigh">#DDD</color>
<color name="gradientStart">#DDD</color>
<color name="gradientEnd">#BBB</color>
<color name="text">#999</color>
<color name="shadow">#FFFFFF</color>
Для черепицы (см. первый пример) ресурс в файле backgroundpattern.xml. Образец плитки используйте по вкусу:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/knittednetting"
android:tileMode="repeat" >
</bitmap>
Собираем всё вместе в разметке активности.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/backgroundpattern"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="@dimen/margin"
android:background="@drawable/panel"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:shadowColor="@color/shadow"
android:shadowDx="@integer/shadowDx"
android:shadowDy="@integer/shadowDy"
android:shadowRadius="@integer/shadowRadius"
android:text="Styling Android"
android:textColor="@color/text"
android:textSize="@dimen/text" />
</LinearLayout>
</LinearLayout>
Создадим закруглённый ободок вокруг какого-нибудь компонента, например, для TexView. В файле res/drawable/rounded.xml пишем:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFF" />
<corners android:radius="20dp" />
<stroke
android:width="5dip"
android:color="#A5D" />
</shape>
Осталось прописать в атрибуте android:background данный ресурс и получим красивую рамку:
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="@drawable/gradinetrow"
android:padding="30dp"
android:text="Кошка, которая гуляла сама по себе" />
Вы можете проявить фантазию. Например, изобразить что-то в виде красивого блока, часто используемого на веб-страницах.
textview_up.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="#ff2a2a" >
</solid>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" >
</corners>
</shape>
textview_down.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid
android:color="@android:color/darker_gray" >
</solid>
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp" >
</corners>
</shape>
Разметка.
<TextView
android:id="@+id/TextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/textview_up"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Карточка"
android:textSize="28sp" />
<TextView
android:id="@+id/TextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:hint="midbuttonshape"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Кот"
android:textSize="28sp" />
<TextView
android:id="@+id/TextView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/textview_down"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="Мурзик"
android:textSize="28sp" />