Введение в разработку мобильных приложений Новосибирский национальный исследовательский государственный университет (НГУ) Лекция 3 Чиркунов Кирилл cyril. chirkunov@computer. org vk. com/chirkunov Skype: che-lliryc
Лекция 3, слайд 1 На прошлой лекции • Составляющие приложения • Манифест проекта и ресурсы • Жизненный цикл приложения и активности • Специальные классы Activity Новосибирский государственный университет, 2012
Лекция 3, слайд 2 Сегодня • • Представления (Views) Разметка (Layout) Ресурсы Drawable Меню Новосибирский государственный университет, 2012
Лекция 3, слайд 3 View (представление, виджет, элемент управления) View. Group Text. View List. View … … Новосибирский государственный университет, 2012
Лекция 3, слайд 4 Android Views Text. View Edit. Text List. View Spinner Button Check. Box Radio. Button View. Flipper Quick. Contact. Badge Новосибирский государственный университет, 2012
Лекция 3, слайд 5 Менеджеры компоновки Frame. Layout Linear. Layout Table. Layout Relative. Layout Gallery
Лекция 3, слайд 6 Linear Layout vs Relative Layout Linear Layout Relative Layout Новосибирский государственный университет, 2012
Лекция 3, слайд 7 Linear Layout vs Relative Layout <Linear. Layout <Relative. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="? android: attr/list. Preferred. Item. Height" android: padding="6 dip"> <Image. View android: id="@+id/icon" android: layout_width="wrap_content" android: layout_width="wrap_content“" android: layout_height="fill_parent" android: layout_align. Parent. Top="true" android: layout_height="fill_parent“" android: layout_align. Parent. Bottom="true" android: layout_margin. Right="6 dip“" android: src="@drawable/icon" /> <Linear. Layout android: orientation="vertical“" <Text. View android: id="@+id/second. Line" android: layout_width="fill_parent" android: layout_width="0 dip“" android: layout_weight="1“" android: layout_height="26 dip" android: layout_to. Right. Of="@id/icon" android: layout_height="fill_parent"> android: layout_align. Parent. Bottom="true" android: layout_align. Parent. Right="true" <Text. View android: layout_width="fill_parent“" android: single. Line="true" android: ellipsize="marquee" android: text="Simple android: layout_height="0 dip“" android: layout_weight="1“" application that shows how to use Relative. Layout" /> android: gravity="center_vertical“" android: text="My Application" /> <Text. View android: layout_width="fill_parent" <Text. View android: layout_width="fill_parent“" android: layout_height="wrap_content" android: layout_to. Right. Of="@id/icon" android: layout_height="0 dip“" android: layout_weight="1“" android: layout_align. Parent. Right="true" android: layout_align. Parent. Top="true" android: single. Line="true“" android: ellipsize="marquee" android: layout_above="@id/second. Line" android: text="Simple application that shows how to use android: layout_align. With. Parent. If. Missing="true" Relative. Layout" /> android: gravity="center_vertical" android: text="My Application" /> </Linear. Layout> </Relative. Layout> </Linear. Layout> Новосибирский государственный университет, 2012
Лекция 3, слайд 8 Linear Layout VS Relative Layout Новосибирский государственный университет, 2012
Лекция 3, слайд 9 Оптимизация разметки Избегайте излишней вложенности Старайтесь не использовать слишком много Представлений Избегайте глубокой вложенности Новосибирский государственный университет, 2012
Лекция 3, слайд 11 Составные элементы <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="vertical" android: layout_width="fill_parent" android: layout_height="fill_parent"> <Edit. Text android: id="@+id/edit. Text" android: layout_width="fill_parent" android: layout_height="wrap_content" /> <Button android: id="@+id/clear. Button" android: layout_width="fill_parent" android: layout_height="wrap_content" android: text="Clear" /> </Linear. Layout> Новосибирский государственный университет, 2012
Лекция 3, слайд 12 Составные элементы (с использованием ресурсов) <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout public class Clearable. Edit. Text extends Linear. Layout { xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="vertical" Edit. Text edit. Text; android: layout_width="fill_parent" Button clear. Button; android: layout_height="fill_parent"> public Clearable. Edit. Text(Context context) { <Edit. Text super(context); android: id="@+id/edit. Text" android: layout_width="fill_parent" // Inflate the view from the layout resource. Stringandroid: layout_height="wrap_content" inf. Service = Context. LAYOUT_INFLATER_SERVICE; /> Layout. Inflater li; li = <Button (Layout. Inflater)get. Context(). get. System. Service(inf. Service); li. inflate(R. layout. clearable_edit_text, this, true); android: id="@+id/clear. Button" android: layout_width="fill_parent" // Get references to the child controls. android: layout_height="wrap_content" edit. Text = (Edit. Text)find. View. By. Id(R. id. edit. Text); android: text="Clear" clear. Button = (Button)find. View. By. Id(R. id. clear. Button); /> } } </Linear. Layout> Новосибирский государственный университет, 2012
Лекция 3, слайд 13 Составные элементы (на базе кода) public Clearable. Edit. Text(Context context) { super(context); // Set orientation of layout to vertical set. Orientation(Linear. Layout. VERTICAL); // Create the child controls. edit. Text = new Edit. Text(get. Context()); clear. Button = new Button(get. Context()); clear. Button. set. Text("Clear"); // Lay them out in the compound control. int l. Height = Layout. Params. WRAP_CONTENT; int l. Width = Layout. Params. FILL_PARENT; add. View(edit. Text, new Linear. Layout. Params(l. Width, l. Height)); add. View(clear. Button, new Linear. Layout. Params(l. Width, l. Height)); } Новосибирский государственный университет, 2012
Лекция 3, слайд 14 Ресурсы Drawable Color. Drawable Gradient. Drawable Shape. Drawable Scale. Drawable Rotate. Drawable Layer. Drawable State. List. Drawable Level. List. Drawable Новосибирский государственный университет, 2012
Лекция 3, слайд 15 Color. Drawable <color xmlns: android="http: //schemas. android. com/apk/res/android" android: color="#FF 0000" /> Новосибирский государственный университет, 2012
Лекция 3, слайд 16 Shape. Drawable <? xml version="1. 0" encoding="utf-8"? > <shape xmlns: android="http: //schemas. android. com/apk/res/android" android: shape="rectangle"> <solid android: color="#f 0600000"/> <stroke android: width="10 dp" android: color="#00 FF 00"/> <corners android: radius="15 dp" /> <padding android: left="10 dp" android: top="10 dp" android: right="10 dp" android: bottom="10 dp" /> </shape> Новосибирский государственный университет, 2012
Лекция 3, слайд 17 Gradient. Drawable <!-- Rectangle with Linear Gradient --> <? xml version="1. 0" encoding="utf-8"? > <shape xmlns: android="http: //schemas. android. com/apk/res/android" android: shape="rectangle“ android: use. Level="false"> <gradient android: start. Color="#ffffff“ android: end. Color="#ffffff“ android: center. Color="#000000“ android: use. Level="false" android: type="linear" android: angle="45" /> </shape> <!-- Oval with Radial Gradient --> <? xml version="1. 0" encoding="utf-8"? > <shape xmlns: android=“http: //schemas. android. com/apk/res/android” android: shape="oval" android: use. Level="false"> <gradient android: type="radial“ android: start. Color="#ffffff“ android: end. Color="#ffffff" android: center. Color="#000000“ android: use. Level="false" android: gradient. Radius="300" /> </shape> Новосибирский государственный университет, 2012
Лекция 3, слайд 18 Scale. Drawable <? xml version="1. 0" encoding="utf-8"? > <rotate xmlns: android="http: //schemas. android. com/apk/res/android" android: drawable="@drawable/icon" android: scale. Height="100%" android: scale. Width="100%" /> Новосибирский государственный университет, 2012
Лекция 3, слайд 19 Rotate. Drawable <? xml version="1. 0" encoding="utf-8"? > <rotate xmlns: android="http: //schemas. android. com/apk/res/android" android: drawable="@drawable/icon" android: from. Degrees="0" android: to. Degrees="90" android: pivot. X="50%" android: pivot. Y="50%" /> Новосибирский государственный университет, 2012
Лекция 3, слайд 20 Layer. Drawable <layer-list xmlns: android="http: //schemas. android. com/apk/res/android"> <item android: drawable="@drawable/bottomimage"/> <item android: drawable="@drawable/image 2"/> <item android: drawable="@drawable/image 3"/> <item android: drawable="@drawable/topimage"/> </layer-list> Новосибирский государственный университет, 2012
Лекция 3, слайд 21 State. List. Drawable <selector xmlns: android="http: //schemas. android. com/apk/res/android"> <item android: state_window_focused="false" android: drawable="@drawable/widget_bg_normal"/> <item android: state_pressed="true" android: drawable="@drawable/widget_bg_pressed"/> <item android: state_focused="true" android: drawable="@drawable/widget_bg_selected"/> <item android: drawable="@drawable/widget_bg_normal"/> </selector> Новосибирский государственный университет, 2012
Лекция 3, слайд 22 Level. List. Drawable <level-list xmlns: android="http: //schemas. android. com/apk/res/android"> <item android: max. Level="0" android: drawable="@drawable/earthquake_0"/> <item android: max. Level="1" android: drawable="@drawable/earthquake_1"/> <item android: max. Level="2" android: drawable="@drawable/earthquake_2"/> <item android: max. Level="4" android: drawable="@drawable/earthquake_4"/> <item android: max. Level="6" android: drawable="@drawable/earthquake_6"/> <item android: max. Level="8" android: drawable="@drawable/earthquake_8"/> <item android: max. Level="10" android: drawable="@drawable/earthquake_10"/> </level-list> Новосибирский государственный университет, 2012
Лекция 3, слайд 23 Рекомендации по разработке интерфейсов, не зависящих от разрешения • Старайтесь отдавать предпочтение Relative. Layout, а не Absolute. Layout • При необходимости пользуйтесь аппаратно-независимыми пикселами (а лучше обходиться вообще без них) • Используйте ресурсы Drawable • Nine. Patch • Shape. Drawable • Gradient. Drawable • Rotate. Drawable, Scale. Drawable • Level. List. Drawable • State. List. Drawable Новосибирский государственный университет, 2012
Лекция 3, слайд 24 Использование меню Новосибирский государственный университет, 2012
Лекция 3, слайд 25 Использование меню Новосибирский государственный университет, 2012
Лекция 3, слайд 26 Использование меню Новосибирский государственный университет, 2012
Лекция 3, слайд 27 Создание меню <? xml version="1. 0" encoding="utf-8"? > <menu xmlns: android="http: //schemas. android. com/apk/res/android" android: name="Context Menu"> <item android: id="@+id/item 01" android: icon="@drawable/menu_item" android: title="Item 1"> </item> <item android: id="@+id/item 02" android: checkable="true" android: title="Item 2"> </item> <item android: id="@+id/item 03" android: numeric. Shortcut="3" android: alphabetic. Shortcut="3" android: title="Item 3"> </item> <item android: id="@+id/item 04" android: title="Submenu"> <menu> <item android: id="@+id/item 05" android: title="Submenu Item"> </item> <group android: checkable. Behavior="single"> <item android: id="@+id/red" android: title="@string/red" /> <item android: id="@+id/blue" android: title="@string/blue" /> </group> </menu> </item> </menu> Новосибирский государственный университет, 2012
Лекция 3, слайд 28 Создание меню public void on. Create. Context. Menu(Context. Menu menu, View v, Context. Menu. Info menu. Info) { super. on. Create. Context. Menu(menu, v, menu. Info); Menu. Inflater inflater = get. Menu. Inflater(); inflater. inflate(R. menu. my_menu, menu); menu. set. Header. Title("Context Menu"); } Новосибирский государственный университет, 2012
Лекция 3, слайд 29 Создание меню (без xml) @Override public void on. Create(Bundle icicle) { super. on. Create(icicle); Edit. Text view = new Edit. Text(this); set. Content. View(view); register. For. Context. Menu(view); } @Override public void on. Create. Context. Menu(Context. Menu menu, View v, Context. Menu. Info menu. Info) { super. on. Create. Context. Menu(menu, v, menu. Info); menu. set. Header. Title("Context Menu"); menu. add(0, menu. FIRST, Menu. NONE, "Item 1"). set. Icon(R. drawable. menu_item); menu. add(0, menu. FIRST+1, Menu. NONE, "Item 2"). set. Checkable(true); menu. add(0, menu. FIRST+2, Menu. NONE, "Item 3"). set. Shortcut('3', '3'); Sub. Menu sub = menu. add. Sub. Menu("Submenu"); sub. add("Submenu Item"); } Новосибирский государственный университет, 2012
Лекция 3, слайд 30 Меню (демонстрация) Новосибирский государственный университет, 2012
Лекция 3, слайд 31 На следующей лекции Intents & Receivers Data. Adapter & Inet Files & Settings Новосибирский государственный университет, 2012
Лекция 3, слайд 32 Новосибирский государственный университет, 2012
Скачать презентацию Введение в разработку мобильных приложений Новосибирский национальный исследовательский
Lecture3_2014.pptx