Пример использования стилей

Интерфейс, диалоги, темы, стили, меню
icamys
Сообщения: 22
Зарегистрирован: 07 май 2012, 00:32

Пример использования стилей

Сообщение icamys » 15 май 2012, 23:21

Сегодня решил в целях обучения написать свое приложение для работы с базой данных на примере уроков 34 и 35. Основное внимение я уделю примененным стилям.

Во время написания оболочки программы стало очевидно, что очень многие элементы описания повторяются, и зачастую, я создаю абсолютно одинаковые элементы многократно повторяя их стиль. Стало интересно, можно ли создать отдельный файл со стилями для оболочки, как используются CSS для стилизации HTML страниц. Как оказалось - можно, и даже нужно. Подробнее об этом можно почитать здесь и здесь.

Вот файл оболочки программы - main.xml:

Код: Выделить всё

<?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:orientation="vertical" 
    android:background="@drawable/bg">
	
	
	<LinearLayout style="@style/main_LL_rows">
	    <TextView 
		    style="@style/labels"
		    android:text="@string/ID"/>
	    
	    <EditText 
	        style="@style/EditText_Number"
	        android:layout_width="60dp"
	        android:id="@+id/etID"/>
	    
	    <Button style="@style/btn_120dp"
	        android:text="@string/Edit"
	        android:id="@+id/btnEdit"/>
	    <Button style="@style/btn_120dp"
	        android:text="@string/Delete"
	        android:id="@+id/btnDelete"/>
	</LinearLayout>
	
	
	<LinearLayout style="@style/main_LL_rows">
	    <TextView 
		    style="@style/labels"
		    android:text="@string/Name"/>
	    <EditText 
	        style="@style/EditText_Text"
	        android:layout_width="match_parent"
	        android:id="@+id/etName"/>
	</LinearLayout>
	
	
	<LinearLayout style="@style/main_LL_rows">
	    <TextView 
		    style="@style/labels"
		    android:text="@string/Age"/>
	    <EditText 
	        style="@style/EditText_Number"
	        android:layout_width="60dp"
	        android:id="@+id/etAge"/>
	</LinearLayout>

	
	<LinearLayout style="@style/main_LL_rows">
		<TextView 
		    style="@style/labels"
		    android:text="@string/Sex"/>
		<RadioGroup 
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:orientation="horizontal"
		    android:id="@+id/rgSex">
		    <RadioButton style="@style/Text"
		        android:text="@string/Male"
		        android:id="@+id/rbMale"
		        android:checked="true"
		        android:layout_marginLeft="15dp"/>
		    <RadioButton style="@style/Text"
		        android:text="@string/Female"
		        android:id="@+id/rbFemale"
		        android:layout_marginLeft="15dp"/>
		</RadioGroup>
	</LinearLayout>
	
	
	<LinearLayout style="@style/main_LL_rows">
		<Button style="@style/Button"
	        android:text="@string/Add"
	        android:id="@+id/btnAdd"
	        android:layout_weight="1"/>
	    <Button style="@style/Button"
	        android:text="@string/View"
	        android:id="@+id/btnView"
	        android:layout_weight="1"/>
	    <Button style="@style/Button"
	        android:text="@string/Clear"
	        android:id="@+id/btnClear"
	        android:layout_weight="1"/>
	</LinearLayout>

</LinearLayout>
Сами стили хранятся в файле styles.xml в директории values:

Код: Выделить всё

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<!-- ************************************************************ -->
	<!-- Основные классы стилей -->
	
	<style name="Text">
		<item name="android:textColor">#404040</item>
	</style>
	
	<style name="Button">
		<item name="android:layout_width">wrap_content</item>
    	        <item name="android:layout_height">wrap_content</item>
	</style>
	
	<style name="EditText">
	        <item name="android:layout_width">wrap_content</item>
		<item name="android:layout_height">wrap_content</item>
	</style>
	
	
	<!-- ************************************************************ -->


	<style name="EditText_Number" parent="EditText">
		<item name="android:inputType">number</item>
	</style>
	
	<style name="EditText_Text" parent="EditText">
		<item name="android:inputType">text</item>
	</style>
	
	<!-- ************************************************************ -->
	
	
	<style name="main_LL_rows">
		<item name="android:layout_width">match_parent</item>
                <item name="android:layout_height">wrap_content</item>
                <item name="android:orientation">horizontal</item>
    	        <item name="android:gravity">center_vertical</item>
    	        <item name="android:layout_marginTop">15dp</item>
	</style>
	
	<style name="labels" parent="@style/Text">
                <item name="android:textSize">20dp</item>
                <item name="android:layout_width">60dp</item>
                <item name="android:layout_height">wrap_content</item>
                <item name="android:gravity">center</item>
    </style>

    
    <style name="btn_120dp" parent="@style/Button">
    	<item name="android:layout_width">95dp</item>
    </style>
    
</resources>
Теперь давайте разберемся, что же происходит в этих стилях.

Сначала я создал несколько основных классов стилей, свойства которых будут наследоваться остальными классами. По умолчанию я установил ширину и высоту для кнопок(Button) и полей ввода(EditText) равными wrap_content. Это совсем не значит, что это значение будет постоянно для всех элементов перечисленных типов, а лишь то, что если эти свойства не будут изменены, они останутся равными wrap_content. Всему тексту по умолчанию я установил цвет #404040.

Затем, так как у нас поля ввода будут двух типов - цифровые и текстовые, я создал два подкласса - EditText_Number и EditText_Text, которые наследуют свойства класса EditText (строка parent="EditText" означает, что класс this наследует свойство класса EditText). Теперь, если поле ввода будет иметь стиль класса EditText_Number, то этому элементу будут добавлены сразу 3 свойства:

Код: Выделить всё

<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:inputType">number</item>
В коде main.xml можно увидеть, что весь интерфейс разбит на строки по LinearLayout'aм. Каждому такому LL(LinearLayout) я присвоил стиль, названный main_LL_rows. Теперь мне не приходится каждый раз прописывать эти 5 свойств каждому из LL:

Код: Выделить всё

android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal"
android:gravity = "center_vertical"
android:layout_marginTop = "15dp"
Достаточно написать:

Код: Выделить всё

<LinearLayout style="@style/main_LL_rows">
...
</LinearLayout>
и теперь к каждому LL будет применен стиль класса main_LL_rows, т.е. автоматически каждому LL прописываются эти 5 свойств.

Содержимое файла strings.xml:

Код: Выделить всё

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">UsingDatabase2</string>
    <string name="Name">Name</string>
    <string name="ID">ID</string>
    
    <string name="Sex">Sex</string>
    <string name="Male">Male</string>
    <string name="Female">Female</string>
    <string name="Age">Age</string>
    
    
    <string name="Edit">Edit</string>
    <string name="Delete">Delete</string>
    <string name="Add">Add</string>
    <string name="View">View</string>
    <string name="Clear">Clear</string>

</resources>
А вот сам результат:

Изображение
Последний раз редактировалось icamys 16 май 2012, 18:49, всего редактировалось 2 раза.

Аватара пользователя
damager82
Администратор
Сообщения: 1383
Зарегистрирован: 07 янв 2012, 11:32
Контактная информация:

Re: Пример использования стилей

Сообщение damager82 » 16 май 2012, 09:44

Отлично! Только непонятно, зачем здесь весь БД-шный код. На мой взгляд, тут вообще java код не нужен, т.к. работаем только с layout-ами и основная цель - объяснить применение стилей. Но материал ваш и решать вам, разумеется.

Вообще надо мне подумать над тем, чтобы параллельно со своими уроками публиковать материалы желающих. Этот материал вполне тянет на полноценный урок.
Добро пожаловать на форум сайта StartAndroid
ИзображениеИзображение

icamys
Сообщения: 22
Зарегистрирован: 07 май 2012, 00:32

Re: Пример использования стилей

Сообщение icamys » 16 май 2012, 13:34

Пожалуй, Вы правы насчет БД-шного кода. Если не сегодня, то на днях уберу.

icamys
Сообщения: 22
Зарегистрирован: 07 май 2012, 00:32

Re: Пример использования стилей

Сообщение icamys » 16 май 2012, 18:50

Все, подправил, и еще кое-что добавил =)

Аватара пользователя
damager82
Администратор
Сообщения: 1383
Зарегистрирован: 07 янв 2012, 11:32
Контактная информация:

Re: Пример использования стилей

Сообщение damager82 » 17 май 2012, 14:04

icamys писал(а):Все, подправил, и еще кое-что добавил =)
Гут, спасибо! Я написал об этом на главной.
http://startandroid.ru/novosti/o-sajte/ ... tilej.html
Добро пожаловать на форум сайта StartAndroid
ИзображениеИзображение

2k7demon
Сообщения: 1
Зарегистрирован: 07 июн 2012, 22:52

Re: Пример использования стилей

Сообщение 2k7demon » 09 июн 2012, 10:08

странно, когда я добавляю в стили
<item name="android:orientation">vertical</item>
она не отрабатывает, только если я непосредственно добавлю ее в main.xml

Аватара пользователя
damager82
Администратор
Сообщения: 1383
Зарегистрирован: 07 янв 2012, 11:32
Контактная информация:

Re: Пример использования стилей

Сообщение damager82 » 13 июн 2012, 09:34

2k7demon писал(а):странно, когда я добавляю в стили
<item name="android:orientation">vertical</item>
она не отрабатывает, только если я непосредственно добавлю ее в main.xml
У меня почему-то с корневым Layout-ом не работает. А с детишками его все ок.
Добро пожаловать на форум сайта StartAndroid
ИзображениеИзображение

kogrenich
Сообщения: 4
Зарегистрирован: 08 янв 2013, 22:54

Программное применение стилей

Сообщение kogrenich » 09 янв 2013, 03:12

А как можно программно применить стиль? К динамически создаваемым View?

Аватара пользователя
rezak90
Сообщения: 3422
Зарегистрирован: 26 июн 2012, 13:22
Откуда: UA
Контактная информация:

Re: Программное применение стилей

Сообщение rezak90 » 09 янв 2013, 09:05

kogrenich писал(а):А как можно программно применить стиль? К динамически создаваемым View?
public View (Context context, AttributeSet attrs, int defStyle)
R.id.team
Политика на форуме запрещена

kogrenich
Сообщения: 4
Зарегистрирован: 08 янв 2013, 22:54

Re: Программное применение стилей

Сообщение kogrenich » 10 янв 2013, 00:07

rezak90 писал(а):
kogrenich писал(а):А как можно программно применить стиль? К динамически создаваемым View?
public View (Context context, AttributeSet attrs, int defStyle)
Спасибо за подсказку. Почему-то не применяется. Не подскажете в чем может быть причина?

Код: Выделить всё

<?xml version="1.0" encoding="UTF-8"?>
<resources>
	<!-- ************************************************************ -->
	<!-- Форматирование таблиц -->
	<!-- Строки:Основная -->
	<style name="TableRow">
		<item name="android:textColor">#132721</item>
		<item name="android:textSize">12dp</item>
		<item name="android:typeface">serif</item>
		<item name="android:textStyle">normal</item>
		<item name="android:background">#F7EB9D</item>
	</style>
	<!-- Строки:Альтернативная -->
	<style name="TableRow.Alt">
		<item name="android:background">#B5F8E4</item>
	</style>
	<!-- Строки:Заголовок -->
	<style name="TableRow.Top">
		<item name="android:textColor">#F5F5DC</item>
		<item name="android:gravity">center_horizontal</item>
		<item name="android:textSize">14dp</item>
		<item name="android:textStyle">bold</item>
		<item name="android:background">#b89300</item>
	</style>
</resources>

Код: Выделить всё

TextView tv = new TextView (context, null, Resource.Style.TableRow);

Аватара пользователя
rezak90
Сообщения: 3422
Зарегистрирован: 26 июн 2012, 13:22
Откуда: UA
Контактная информация:

Re: Пример использования стилей

Сообщение rezak90 » 10 янв 2013, 00:37

паррента нужно указывать:

Код: Выделить всё

<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textColor">#F5F5DC</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textSize">14dp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#b89300</item>
</style>
по идеи так должно работать
R.id.team
Политика на форуме запрещена

kogrenich
Сообщения: 4
Зарегистрирован: 08 янв 2013, 22:54

Re: Пример использования стилей

Сообщение kogrenich » 10 янв 2013, 17:59

Странное что-то. SetTextAppearance работает и задает параметры отображения текста. а вот указание в конструкторе бесполезно - не применяется ни background, ни настройки текста:

Код: Выделить всё

TextView tv = new TextView (context, null, Resource.Style.TableRow);
tv.SetTextAppearance(context, Resource.Style.TableRow);

Dangreon
Сообщения: 41
Зарегистрирован: 01 янв 2013, 15:52

Re: Пример использования стилей

Сообщение Dangreon » 13 мар 2013, 13:24

Может кто знает, почему не отрабатывает атрибут стиля такой как layout_marginLeft
а также layout_marginRight ?

Т.е. допустим создаю стиль с этими атрибутами, и потом его назначаю TextView.
И эти атрибуты игнорятся. Почему?

Аватара пользователя
rezak90
Сообщения: 3422
Зарегистрирован: 26 июн 2012, 13:22
Откуда: UA
Контактная информация:

Re: Пример использования стилей

Сообщение rezak90 » 13 мар 2013, 13:27

а вы бросайте код и мы посмотрим, может не так стиль пишете
R.id.team
Политика на форуме запрещена

Dangreon
Сообщения: 41
Зарегистрирован: 01 янв 2013, 15:52

Re: Пример использования стилей

Сообщение Dangreon » 13 мар 2013, 18:57

Нашел в чем дело, название атрибута было написано не точно.

дух
Сообщения: 17
Зарегистрирован: 10 апр 2013, 07:56

Re: Пример использования стилей

Сообщение дух » 23 июл 2013, 08:00

Здравствуйте! прошу не пинать)))
Не могу найти, как выровнять текст внутри textView?
типа как в HTML - text-align.

xr0m
Сообщения: 131
Зарегистрирован: 06 апр 2013, 14:01

Re: Пример использования стилей

Сообщение xr0m » 23 июл 2013, 08:45

android:gravity

дух
Сообщения: 17
Зарегистрирован: 10 апр 2013, 07:56

Re: Пример использования стилей

Сообщение дух » 23 июл 2013, 08:51

да, уже кое-как нашел. спасибо!!

ЗЫ вот так всегда. три дня будешь искать ответ на свой вопрос, и не найдешь. но стоит только задать его на форуме.... как сразу же гугл сдается.

Igor-vrn
Сообщения: 3
Зарегистрирован: 15 май 2014, 15:10

Re: Пример использования стилей

Сообщение Igor-vrn » 14 июн 2014, 15:15

kogrenich писал(а):Странное что-то. SetTextAppearance работает и задает параметры отображения текста. а вот указание в конструкторе бесполезно - не применяется ни background, ни настройки текста:

Код: Выделить всё

TextView tv = new TextView (context, null, Resource.Style.TableRow);
tv.SetTextAppearance(context, Resource.Style.TableRow);
Вопрос все еще актуален. Столкнулся с такой же проблемой. Как применить стили к динамически создаваемым элементам? Через конструктор не получается.
Может побьете за ссылку, но этот вопрос я уже задавал на киберфоруме. Там же и код. Ссылка на тему текстом:
http://www.cyberforum.ru/android-dev/thread1207474.html

Есть варианты?

Viewer
Сообщения: 180
Зарегистрирован: 30 апр 2014, 11:42

Re: Пример использования стилей

Сообщение Viewer » 14 июн 2014, 17:12

Ну так, если вы расширяете TextView, то вполне логичным было бы также унаследовать и стиль из итого же виджета, переопределив только некоторые аттрибуты, собственно в этой теме есть ответ viewtopic.php?f=25&t=912&view=unread&si ... f7ec#p8184

Ответить