Освой программирование играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

UI-дизайн

Как заполнить фон повторяющимся изображением (черепицей)
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, применить данную операцию нельзя.

TileMode

Далее задается в качестве заднего фона (атрибут 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 у меня редактор заругался, что не может отпарсить строку. Но это не мешает запустить программу и получить следующий результат.

tileMode

Образцы для фона можно поискать на специальных сайтах, например, на сайте 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 );
}

3D-панель

На фоне созданной черепицы можно создать красивую объёмную панель с стильным текстом.

3D-панель

Образец кода на Гитхабе.

Создадим файл 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" />

Реклама