Статьи

Создавайте яркие приложения: использование цвета в Android

Март 12, 2019

Один из наиболее эффективных способов выделить приложение для Android — добавить цвет. В этом уроке я покажу вам, как быстро и легко применить цвет к ряду элементов пользовательского интерфейса: фонам, тексту и кнопкам, и продемонстрирую, как упростить работу с цветами, определив их в назначенном файле XML. В последнем разделе урока мы перейдем к чему-то более сложному: использование списка состояний цвета для изменения цвета кнопки при ее нажатии.

Начиная

Самый быстрый способ начать работу с цветом — использовать один из предопределенных цветов Android: черный или белый. Создайте новый проект Android и удалите любой пользовательский интерфейс по умолчанию

элементы и макеты, которые генерирует Eclipse. Для начала мы изменим фон этого проекта на черный:

  • Откройте ваш XML-файл в res / layout.
  • Добавьте следующее, обращая особое внимание на атрибут «android: background»:
    1
    2
    3
    4
    5
    6
    7
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com.tools"
            android:background="@color/black"
            android:layout_width="match_parent"
            android:layout_height="match_parent"   >
     
           </RelativeLayout>

Переключитесь на графический редактор макетов Eclipse, и вы увидите, что фон изменился на черный.

Цветовые константы

Если вы хотите изменить цвет фона на что-нибудь более авантюрное, чем черный или белый, вам нужно будет использовать цветовые константы. Список этих констант доступен в официальных документах по Android . На самом базовом уровне изменение цвета фона — это просто замена «@ color / black» одним из этих кодов. Например, значение для «синий»:

1
Constant Value: -16776961 ff0000ff

Введите следующее, чтобы изменить фон на синий:

1
android:background="#ff0000ff"

Или, чтобы изменить цвет фона на зеленый, введите:

1
android:background="#ff00ff00"

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

Создание файла Color.xml

Существует несколько возможных способов определения цветовых ресурсов, но рекомендуется хранить их вместе в отдельном файле color.xml в папке res / values. Eclipse не генерирует этот файл по умолчанию, поэтому вам нужно сначала добавить его в свой проект.

  1. Щелкните правой кнопкой мыши папку «значения» и выберите «Создать» в контекстном меню. Если вы не видите опцию «Android XML File», вы можете выбрать «Other…», чтобы открыть более полный список опций.
  2. В следующем диалоговом окне назовите новый XML-файл «color» и выберите «Finish».
  3. Успех! Файл color.xml был добавлен в папку «Значения».

Определение цветовых констант

Теперь мы создали файл colour.xml для хранения наших значений цвета, и мы определим синий цвет, чтобы мы могли ссылаться на него, как если бы он был предопределенным цветом.

  1. Откройте файл color.xml и переключитесь на вкладку «color.xml», если он не открывается автоматически.
  2. Введите следующее:
    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?>
     
    <resources>
     
    <color name="blue">#ff0000ff</color>
     
    </resources>
  3. Вернитесь в XML-файл res / layout и установите цвет фона, точно так же, как и предопределенный «черный», который мы использовали ранее:
    1
    android:background="@color/blue"
  4. Переключитесь на редактор графического макета. Фон теперь должен быть синим.

Определение новых цветов теперь просто вопрос возврата в файл ‘color.xml’ и добавления еще одной строки XML. Попробуйте изменить цвет фона в последний раз, определив новый цвет:

1
<color name="LightPink">#FFE4E1</color>

Вернитесь в файл макета и замените «@ color / blue» на «@ color / LightPink». Это так просто!

Применение цвета к элементам интерфейса

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<TextView
 
android:id="@+id/textView1"
 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
android:layout_alignParentLeft="true"
 
android:layout_alignParentTop="true"
 
android:textColor="@color/blue"
 
android:text="This is blue text" />

Вы также можете изменить цвет фона кнопки:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<Button
 
android:id="@+id/button1"
 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
android:layout_alignParentLeft="true"
 
android:layout_alignParentTop="true"
 
android:background="@color/blue"
 
android:text="Button" />

Или объедините их, чтобы создать кнопку с синим фоном и светло-розовым текстом:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<Button
 
android:id="@+id/button1"
 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
android:layout_alignParentLeft="true"
 
android:layout_alignParentTop="true"
android:background="@color/blue"
 
android:textColor="@color/LightPink"
 
android:text="Button" />

Использование списка состояний цвета Android

Существует несколько способов сообщить пользователю, что вы зарегистрировали его активность в приложении, но один из самых простых — использовать «список состояний цвета» для изменения цвета элемента пользовательского интерфейса. «Список состояний цвета» — это, по сути, объект, который меняет цвет в соответствии с изменяющимся состоянием связанного объекта View. В этой заключительной части урока я покажу вам, как использовать список состояний цвета в вашем проекте, на примере кнопки, которая меняет цвет при нажатии.

1. Определите некоторые цвета

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

1
2
<color name="red">#ff00</color>
<color name="green">#f0f0</color>

2. Определите ресурс списка состояний цвета

Создайте файл ‘color_list.xml’ в папке res / drawable.

Пустой список состояний цвета использует следующий открывающий и закрывающий XML:

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
</selector>

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

  • андроид: state_pressed =»истина / ложь»
  • андроид: state_focused =»истина / ложь»
  • андроид: state_selected =»истина / ложь»
  • андроид: state_checkable =»истина / ложь»
  • андроид: state_checked =»истина / ложь»
  • андроид: State_Enabled =»истина / ложь»
  • андроид: state_window_focused =»истина / ложь»

Мы создадим два состояния, состояние по умолчанию и android: state_pressed. Обратите внимание, что значение элемента по умолчанию всегда должно располагаться внизу списка, так как ваша установка Eclipse займет первый элемент в списке, который соответствует текущему состоянию. Если первое состояние по умолчанию, Eclipse никогда даже не будет смотреть на остальные ваши состояния.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
<item
 
android:state_pressed="true"
 
android:drawable="@color/green" />
 
<item
 
android:drawable="@color/red" />
 
</selector>

3. Создайте свой интерфейс

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
android:layout_width="match_parent"
 
android:layout_height="match_parent"  >
 
<Button
 
android:id="@+id/button1"
 
style="?android:attr/buttonStyleSmall"
 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
android:layout_alignParentLeft="true"
 
android:layout_alignParentTop="true"
 
android:layout_marginTop="18dp"
 
android:text="@string/click"  />
 
</RelativeLayout>

Наконечник

, Не забудьте создать строковый ресурс для @ string / click. Откройте файл strings.xml и добавьте следующее:

1
<string name="click">Click Me</string>

4. Соедините все это!

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<Button
 
android:id="@+id/button1"
 
style="?android:attr/buttonStyleSmall"
 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
android:layout_alignParentLeft="true"
 
android:layout_alignParentTop="true"
 
android:layout_marginTop="18dp"
 
android:text=“@string/click"
 
android:background=“@drawable/color_list" />

5. Проверьте свою работу

Загрузите эмулятор Android и посмотрите, как это отображается.

Теперь нажмите кнопку и посмотрите, что произойдет.

Попробуйте определить дополнительные состояния и цвета в своем проекте и поэкспериментировать с различными элементами пользовательского интерфейса, такими как флажки, чтобы действительно выделить свое Android-приложение среди конкурентов!

53
Share: