Страница 1 из 2

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

Добавлено: 15 май 2012, 23:21
icamys
Сегодня решил в целях обучения написать свое приложение для работы с базой данных на примере уроков 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>
А вот сам результат:

Изображение

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

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

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

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

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

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

Добавлено: 16 май 2012, 18:50
icamys
Все, подправил, и еще кое-что добавил =)

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

Добавлено: 17 май 2012, 14:04
damager82
icamys писал(а):Все, подправил, и еще кое-что добавил =)
Гут, спасибо! Я написал об этом на главной.
http://startandroid.ru/novosti/o-sajte/ ... tilej.html

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

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

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

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

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

Добавлено: 09 янв 2013, 03:12
kogrenich
А как можно программно применить стиль? К динамически создаваемым View?

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

Добавлено: 09 янв 2013, 09:05
rezak90
kogrenich писал(а):А как можно программно применить стиль? К динамически создаваемым View?
public View (Context context, AttributeSet attrs, int defStyle)

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

Добавлено: 10 янв 2013, 00:07
kogrenich
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);

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

Добавлено: 10 янв 2013, 00:37
rezak90
паррента нужно указывать:

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

<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>
по идеи так должно работать

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

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

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

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

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

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

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

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

Добавлено: 13 мар 2013, 13:27
rezak90
а вы бросайте код и мы посмотрим, может не так стиль пишете

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

Добавлено: 13 мар 2013, 18:57
Dangreon
Нашел в чем дело, название атрибута было написано не точно.

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

Добавлено: 23 июл 2013, 08:00
дух
Здравствуйте! прошу не пинать)))
Не могу найти, как выровнять текст внутри textView?
типа как в HTML - text-align.

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

Добавлено: 23 июл 2013, 08:45
xr0m
android:gravity

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

Добавлено: 23 июл 2013, 08:51
дух
да, уже кое-как нашел. спасибо!!

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

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

Добавлено: 14 июн 2014, 15:15
Igor-vrn
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

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

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

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