Toolbar (Lecture 16 – toolbar)

ToolbarAndroid

Денис Клещев

Toolbar

Toolbar — компонент системы, пришедший на смену ActionBar

Навигация

1. Navigation icon — навигация по приложению, открывает navigation drawer или кнопка up.Если экран не предполагает навигации, то можно от нее отказаться

2. Title — заголовок приложения, заголовок экрана или фильтр контента3. Action icons — функции, относящиеся непосредственно к приложению. Поиск, избранное,написать пост

4. Menu icon — все остальные функции, не попавшие в Action buttons

Back vs Up

Back:

Навигация в обратном хронологическом порядке через историю экрановМожет закрыть приложениеМожет вернуть пользователя в другое приложение

Up:

Навигация на основе иерархических отношений между экранамиОтсутствует на самом верхнем экранеДаёт гарантию, что пользователь останется внутри приложения

Навигация

Навигация

Как использовать1. Подключить зависимость compile 'com.android.support:appcompat-v7:23.4.0'2. Для использования некоторых компонентов может понадобиться

'com.android.support:design:23.4.0'

3. Activity должен наследоваться от AppCompatActivity4. Тема должна наследоваться от Theme.AppCompat5. Для внедрения компонентов используется контекст

getSupportActionBar().getThemedContext()

6. Для вызовов MenuItem связанных с действиями использовать MenuItemCompat

https://developer.android.com/reference/android/support/v7/app/AppCompatActivity.html

http://developer.android.com/reference/android/support/v4/view/MenuItemCompat.html

Реализация 1 <LinearLayout android:layout_width="match_parent" 2 android:layout_height="match_parent" 3 android:orientation="vertical"> 4 5 <android.support.v7.widget.Toolbar 6 android:id="@+id/toolbar" 7 android:layout_width="match_parent" 8 android:layout_height="wrap_content" 9 android:background="#009688" 10 app:theme="@style/AppTheme" 11 app:popupTheme="@style/AppTheme.Popup"/> 12 13 <EditText 14 android:layout_width="match_parent" 15 android:layout_height="wrap_content" 16 android:hint="Toolbar demo"/> 17 18 </LinearLayout>

Реализация

Реализация 1 <resources> 2 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 3 <item name="colorPrimary">#009688</item> 4 <item name="colorPrimaryDark">#00796B</item> 5 <item name="colorAccent">#B2DFDB</item> 6 <item name="android:textColorPrimary">#fff</item> 7 </style> 8 9 <style name="AppTheme.Popup" parent="Base.ThemeOverlay.AppCompat"> 10 <item name="android:textColorPrimary">#fff</item> 11 <item name="android:background">#00796B</item> 12 </style>13 </resources>

Реализация 1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 setContentView(R.layout.activity_main); 5 6 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 7 toolbar.setTitle("Toolbar example"); 8 9 setSupportActionBar(toolbar); 10 }

Реализация

Иерархическая навигация 1 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 2 package="com.noveogroup.internship" > 3 4 <application ...> 5 6 <activity 7 android:name=".ui.MainActivity" 8 android:label="@string/title_activity_main" 9 android:theme="@style/AppTheme"> 10 <intent-filter> 11 ... 12 </intent-filter> 13 </activity> 14 15 <activity android:name=".ui.ChildActivity" 16 android:label="@string/title_activity_main" 17 android:parentActivityName=".ui.MainActivity" 18 android:theme="@style/AppTheme"> 19 20 </activity> 21 </application> 22 </manifest>

Иерархическая навигация

ChildActivity:

1 @Override 2 public void onCreate(Bundle savedInstanceState) { 3 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 4 toolbar.setTitle("Activity title"); 5 setSupportActionBar(toolbar); 6 7 ActionBar actionBar = getSupportActionBar();8 actionBar.setDisplayHomeAsUpEnabled(true); 9 }

Иерархическая навигация

Меню

res/menu/toolbar_menu.xml

1 <menu xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto"> 3  4 <item 5 android:id="@+id/search" 6 android:icon="@drawable/abc_ic_search_api_mtrl_alpha" 7 android:title="Search" 8 app:showAsAction="ifRoom"/> 9 <item 10 android:id="@+id/settings" 11 android:title="Settings" 12 app:showAsAction="never"/> 13 </menu>

Меню 1 @Override 2 public boolean onCreateOptionsMenu(Menu menu) { 3 getMenuInflater().inflate(R.menu.toolbar_menu, menu); 4 return super.onCreateOptionsMenu(menu); 5 } 6 7 @Override 8 public boolean onOptionsItemSelected(MenuItem item) { 9 switch (item.getItemId()) { 10 case R.id.search: 11 return true; 12 case R.id.settings: 13 return true; 14 default: 15 return super.onOptionsItemSelected(item); 16 } 17 }

Меню

Отдельное использование 1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 setContentView(R.layout.activity_main); 5 6 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 7 toolbar.setTitle("Toolbar example"); 8 9 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { 10 @Override11 public boolean onMenuItemClick(MenuItem item) { 12 return false; 13 } 14 }); 15 16 toolbar.inflateMenu(R.menu.toolbar_menu); 17 }

Отдельное использование

Виджеты: поиск

res/menu/menu.xml:

1 <menu xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto"> 3 4  5 <item 6 android:id="@+id/action_search" 7 android:icon="..." 8 android:title="..." 9 app:actionViewClass="android.support.v7.widget.SearchView" 10 app:showAsAction="always|collapseActionView"/> 11 12 ...13 14 </menu>


res/styles/values.xml

1 <resources> 2 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 3 ... 4 <item name="searchViewStyle">@style/SearchViewStyle</item> 5 </style> 6 7 <style name="SearchViewStyle" parent="Widget.AppCompat.SearchView"> 8 <item name="queryBackground">@android:color/white</item> 9 </style>10 </resources>


При использовании как AppBar

1 @Override 2 public boolean onCreateOptionsMenu(Menu menu) { 3 getMenuInflater().inflate(R.menu.toolbar_menu, menu); 4 MenuItem searchItem = menu.findItem(R.id.action_search); 5 SearchView searchView = 6 (SearchView) MenuItemCompat.getActionView(searchItem); 7 8 searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { 9 @Override10 public boolean onQueryTextSubmit(String query) {...} 11 12 @Override13 public boolean onQueryTextChange(String newText) {...} 14 }); 15 16 return super.onCreateOptionsMenu(menu); 17 }


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

1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 4 toolbar.inflateMenu(R.menu.toolbar_menu); 5 MenuItem searchItem = toolbar.getMenu().findItem(R.id.action_search); 6 SearchView searchView = 7 (SearchView) MenuItemCompat.getActionView(searchItem); 8 9 searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { 10 @Override11 public boolean onQueryTextSubmit(String query) {...} 12 13 @Override14 public boolean onQueryTextChange(String newText) {...} 15 }); 16 }


Виджеты: табы 1 <LinearLayout 2 android:id="@+id/appbar" 3 android:layout_width="match_parent" 4 android:layout_height="wrap_content" 5 android:orientation="vertical" 6 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 7 <android.support.v7.widget.Toolbar 8 android:id="@+id/toolbar" 9 android:layout_width="match_parent" 10 android:layout_height="wrap_content" 11 android:background="?attr/colorPrimary" 12 app:popupTheme="@style/AppTheme.Popup" 13 app:theme="@style/AppTheme"/> 14  15 <android.support.design.widget.TabLayout 16 android:id="@+id/tabs" 17 android:layout_width="match_parent" 18 android:layout_height="wrap_content" 19 android:background="?attr/colorPrimary" 20 app:tabGravity="center" 21 app:tabMode="scrollable"/> 22 </LinearLayout>

Виджеты: табы 1 // Setup toolbar 2 3 TabLayout tabs = (TabLayout) findViewById(R.id.tabs); 4 tabs.addTab(tabs.newTab().setText("Tab 1")); 5 tabs.addTab(tabs.newTab().setText("Tab 2")); 6 // ... 7 8 tabs.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 9 @Override 10 public void onTabSelected(TabLayout.Tab tab) {...} 11 12 @Override 13 public void onTabUnselected(TabLayout.Tab tab) {...} 14 15 @Override 16 public void onTabReselected(TabLayout.Tab tab) {...} 17 });

Виджеты: табы

Navigation drawer 1 <android.support.v4.widget.DrawerLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 ...> 5 6 <LinearLayout 7 ...> 8 9 <android.support.v7.widget.Toolbar 10 ... /> 11 </LinearLayout> 12 13 <android.support.design.widget.NavigationView 14 android:id="@+id/navigation" 15 android:layout_width="wrap_content" 16 android:layout_height="match_parent" 17 android:layout_gravity="start" 18 app:headerLayout="@layout/drawer_header" 19 app:menu="@menu/drawer_items" 20 app:itemTextColor="#333" 21 app:itemIconTint="#333"/> 22 </android.support.v4.widget.DrawerLayout>

Navigation drawer

res/menu/drawer_items.xml

1 <menu xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:app="http://schemas.android.com/apk/res-auto" 3 xmlns:tools="http://schemas.android.com/tools" 4 tools:context="com.hmkcode.mongoz.MainActivity" > 5 <group android:checkableBehavior="all"> 6 <item 7 android:id="@+id/navigation_item_1" 8 android:icon="@drawable/ic_attach" 9 android:title="Toolbar"/> 10 11 ... 12 </group>13 <item android:title="Sub items"> 14 <menu> 15 <item 16 android:id="@+id/navigation_item_3" 17 android:icon="@drawable/ic_attach" 18 android:title="NavigationView"/> 19 </menu> 20 </item> 21 </menu>

Navigation drawer 1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 // Setup toolbar 4 5 drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); 6 getSupportActionBar().setDisplayHomeAsUpEnabled(true); 7 getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu); 8 } 9 10 @Override 11 public boolean onOptionsItemSelected(final MenuItem item) { 12 switch (item.getItemId()) { 13 case android.R.id.home: 14 drawerLayout.openDrawer(GravityCompat.START); 15 return true; 16 17 ... 18 19 default: 20 return super.onOptionsItemSelected(item); 21 } 22 }

Navigation drawer

CoordinatorLayout

Целью этой ViewGroup является координация view элементов, которые находятся внутри него.

CoordinatorLayout 1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.design.widget.CoordinatorLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 android:background="@android:color/background_light" 8 android:fitsSystemWindows="true"> 9 10 <android.support.design.widget.AppBarLayout 11 android:id="@+id/main_appbar" 12 android:layout_width="match_parent" 13 android:layout_height="300dp" 14 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 15 android:fitsSystemWindows="true"> 16 17 <android.support.design.widget.CollapsingToolbarLayout 18 android:id="@+id/main_collapsing" 19 android:layout_width="match_parent" 20 android:layout_height="match_parent" 21 app:layout_scrollFlags="scroll|exitUntilCollapsed" 22 android:fitsSystemWindows="true" 23 app:contentScrim="?attr/colorPrimary"

CoordinatorLayout

CoordinatorLayout 1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.design.widget.CoordinatorLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent"> 7 8 <android.support.design.widget.AppBarLayout 9 android:id="@+id/materialup.appbar" 10 android:layout_width="match_parent" 11 android:layout_height="wrap_content" 12 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 13 14 <android.support.design.widget.CollapsingToolbarLayout 15 android:id="@+id/main.collapsing" 16 android:layout_width="match_parent" 17 android:layout_height="200dp" 18 app:contentScrim="?attr/colorPrimary" 19 app:expandedTitleMarginStart="48dp" 20 app:expandedTitleMarginEnd="64dp" 21 app:layout_scrollFlags="scroll|snap"> 22 23 <ImageView

CoordinatorLayout

Custom Behavior

CoordinatorLayout

Dependency - управляющий элементChild - элемент, который движется, когда движется dependency

CoordinatorLayout 1 public static class AvatarImageBehavior 2 extends CoordinatorLayout.Behavior<CircleImageView> { 3 4 @Override 5 public boolean layoutDependsOn( 6 CoordinatorLayout parent, 7 CircleImageView, child, 8 View dependency) { 9 10 return dependency instanceof Toolbar; 11 } 12 13 public boolean onDependentViewChanged( 14 CoordinatorLayout parent, 15 CircleImageView avatar, 16 View dependency) {17 modifyAvatarDependingDependencyState(avatar, dependency); 18 } 19 20 private void modifyAvatarDependingDependencyState( 21 CircleImageView avatar, View dependency) { 22 // avatar.setY(dependency.getY()); 23 // avatar.setBlahBlah(dependency.blah / blah);

Полезные ссылки

Навигация: Back vs UpToobarDesign library

http://developer.android.com/design/patterns/navigation.html

http://android-developers.blogspot.ru/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.ru/2015/05/android-design-support-library.html

Education

Toolbar (Lecture 16 – toolbar)