Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

06 - Llistes, menús i barres d'eines

No description
by

Alex Rios

on 4 December 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 06 - Llistes, menús i barres d'eines

Disseny d'interfícies
Grau en Continguts Digitals Interactius
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Llistes, menús i barres d'eines
Índex
Menú a la Action Bar
Action Bar per defecte
Acion Bar personalitzable
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menu
Cal fer 2 coses:

1. Crear el recurs del menú
2. Programar el codi de cada opció
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Menu
1. Crear el recurs del menú

botó dret sobre app/res -> Android Resource File
Seleccionar Resource Type: Menu




Es genera un XML a res/menu
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Menu
1. Crear el recurs del menú
Omplir el layout amb les opcions de menu. Cada opció tindrà un identificador

Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Menu
2. Programar el codi de cada opció
A la classe Principal afegir 2 funcions: una per a activar el menú i l'altra per a programar cada opció escollida

@Override public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.mainmenu, menu);
return true; /** true -> el menú ya está visible */
}

@Override public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.idAbout) {
//Codi per l'About
return true;
}
if (id == R.id.idPreferencies) {
//Codi per les preferencies
return true;
}
return super.onOptionsItemSelected(item);
}
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Moltes aplicacions la fan servir
Es poden incorporar diferents elements: icona, accions freqüents, llistes desplegables...
Les accions menys freqüents es posen al menú (Menu Overflow)
S'adapta a la mida de la pantalla
És semblant a la barra on es troba el menú però més personalitzable
S'afegeix a l'aplicació mitjançant codi

Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Navigation Drawer
És un menú lateral que apareix en una activitat arrossegant cap a la dreta
Es pot crear una activitat de tipus Navigation Drawer Activity.
Aquesta activitat genera un esquelet que es pot modificar.
Es generen diversos XML, el que conté el menú és el que es troba a res/menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>

<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>

</menu>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Navigation Drawer
Per a tenir un layout amb elements a més del Navigation Drawer cal afegir un Framelayout i posar-hi els elements
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Navigation Drawer
Si ja tenim una activitat creada i volem afegir un Navigation Drawer cal fer 2 coses

1. Crear el menu amb botó dret
res/menu -> New -> Menu Resource File
Crear el menú (navigationmenu)







2. Assignar-li a l'activitat el layout següent
<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="showNav"
android:text="Button" />

<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</FrameLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/navigationmenu" />
</android.support.v4.widget.DrawerLayout>
El contingut de
la plana principal
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single" >
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
</group>
</menu>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Al layout de l'activitat cal afegir l'element Toolbar:

Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Menu
1. Crear el recurs del menú
El fitxer XML que es genera conté la definició del menú i els seus item

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/about"
android:title="About"
android:icon="@mipmap/ic_launcher"
app:showAsAction="always"/>
....
</menu>
showAsAction pot ser:
always: es mostra el text a la barra acció com un botó
never: es mostra dins del menú
ifRoom: es mostra a la barra si hi ha espai, si no, al menú
withText: es mostra la icona amb el text a la barra

Es poden combinar amb |, p.exe: always | witText (en landscape es veu)
Llistes, menús i barres d'eines
Action Bar o App Bar
El primer que cal tenir en compte és el tema que s'assigna a tota l'aplicació. Es pot trobar a res/values/styles.xml






La Action Bar està associada al tema i és la que Android posa automàticament.
Per a poder posar una Action Bar personalitzada cal desactivar la que ve per defecte
<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

o bé

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp" // posa una ombra a sota de la barra
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" //color del text
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" > // color del menu
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



A l'onCreate de l'activitat activar la Toolbar:





Si tenim un menu ja creat, ens el posa automàticament
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.appbar);
setSupportActionBar(toolbar);
}
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Si volem que l'Action Bar es vegi a totes les activitats llavors cal incloure-la a tots els layouts i activar-la a tots els onCreate.
Podem crear un XML amb la definició de la Toolbar i fer un "include" des dels layouts de les activitats.
Botó dret sobre res/layout
Fitxer toolbardefinition.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
Layout de l'Activity

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.interficies.enti.toolbarexample.Principal">

<include android:id="@+id/appbar"
layout="@layout/toolbardefinition" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



El resultat és el mateix però es pot personalitzar la Toolbar modificant el seu XML i a l'onCreate de l'activitat

Eliminar el títol de l'aplicació
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);

Toolbar toolbar = (Toolbar) findViewById(R.id.appbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Personalitzar la Toolbar

Posar un títol i un subtítol propis
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="16dp" >

<TextView android:id="@+id/txtAbTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Titol de App"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" />

<TextView android:id="@+id/txtAbSubTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitol de App"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle" />

</LinearLayout>

</android.support.v7.widget.Toolbar>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Personalitzar la Toolbar

Aliniar a la part inferior de la pantalla
Cal canviar el layout de l'activitat principal i posar que sigui Relative.
Modificar el layout de la Toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:layout_alignParentBottom="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="16dp" >

<TextView android:id="@+id/txtAbTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Titol de App"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" />

<TextView android:id="@+id/txtAbSubTitulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitol de App"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle" />

</LinearLayout>

</android.support.v7.widget.Toolbar>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Action Bar o App Bar



Personalitzar la Toolbar

Posar imatges a la Toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"

android:orientation="horizontal"
android:paddingBottom="16dp"
android:textAlignment="center">

<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:backgroundTint="@color/colorPrimary"
android:clickable="true"
android:scaleType="fitCenter"
android:src="@android:drawable/ic_btn_speak_now" />

<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:backgroundTint="@color/colorPrimary"
android:clickable="true"
android:scaleType="fitCenter"
android:src="@android:drawable/ic_menu_camera" />

<ImageButton
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:backgroundTint="@color/colorPrimary"
android:clickable="true"
android:scaleType="fitCenter"
android:src="@android:drawable/ic_menu_gallery" />

</LinearLayout>

</android.support.v7.widget.Toolbar>
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Tabs
Són pestanyes que es col·loquen sota la Toolbar.
Permeten passar d'una pantalla a una altra prement la pestanya o lliscant el dit.
Cada pestanya està associada a un Fragment !!!!!
Per a definir un grup de pestanyes calen diversos pasos
1. Definir la toolbar.
2. Crear els fragments.
3. Afegir el layout TabLayout al layout de l'activitat que contindrà les pestanyes
4. Crear una classe que manegui les pestanyes
5. Activar les pestanyes.
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Tabs
3. Afegir el layout TabLayout al layout de l'activitat que contindrà les pestanyes
Cal utilitzar el AppBarLayout i el ViewPager.
AppBarLayout contindrà la toolbar i el TabLayout
El ViewPager serveix per alternar entre els fragments assignats a les pestanyes.
<?xml version="1.0" encoding="utf-8"?>
<android.widget.RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.interficies.enti.toolbarexample.Principal">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

<include android:id="@+id/appbar"
layout="@layout/toolbardefinition"
tools:layout_editor_absoluteX="0dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp" />

<android.support.design.widget.TabLayout
android:id="@+id/appbartabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" />

</FrameLayout>

</android.widget.RelativeLayout>

Nom del layout que conté la Toolbar
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Tabs
4. Crear una classe que manegui les pestanyes

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
* Created by Alejandro on 08/11/2017.
*/

public class MiFragmentPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 2;
private String tabTitles[] =
new String[] { "Llista Pistes", "Mostrar pista"};

public MiFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}

@Override
public int getCount() {
return PAGE_COUNT;
}

@Override
public Fragment getItem(int position) {

Fragment f = null;

switch(position) {
case 0:
f = new Fragment1();
break;
case 1:
f = new Fragment2();
break;
}

return f;
}

@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
}
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Tabs
5. Activar les pestanyes.
public class Principal extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);

Toolbar toolbar = (Toolbar) findViewById(R.id.appbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
MiFragmentPagerAdapter s=new MiFragmentPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(s);

TabLayout tabLayout = (TabLayout) findViewById(R.id.appbartabs);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setupWithViewPager(viewPager);
}

Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Menú
Action Bar
Navigation Drawer
Tabs
Llistes, menús i barres d'eines
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Navigation Drawer
Per a fer que els items del menú executin codi cal especificar que l'activitat implementi la interficie NavigationView.OnNavigationItemSelectedListener i que escolti els events amb

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);

i implementar la funció

public boolean onNavigationItemSelected(MenuItem item)
Menú
Action Bar
Navigation Drawer
Tabs
Full transcript