Naučte sa vyvíjať aplikácie pre Android za 14 dní – zmena orientácie displeja

Ako na to

31.3.2020

Jedným z riešení na prispôsobenie aplikácie veľkosti a zmene displeja sú popri relatívnych layoutoch pre rozmiestnenie ovládacích prvkov aj fragmenty.

Typickým scenárom pre nasadenie fragmentov, ktorý sa dá veľmi dobre použiť na názorné vysvetlenie princípu sú aplikácie zobrazujúce informácie typu master – detail. Zoznam objektov sa vypíše v jednom fragmente a detailné informácie o objektoch v druhom. Pri orientácii smartfónu na výšku sa zobrazí každý fragment v samostatnej aktivite, takže vyplní celú plochu obrazovky.

Vľavo je obrazovka so zoznamom správ a po ťuknutí na niektorú z nich sa zobrazí jej obsah (vpravo)

Pri orientácii na šírku sa zobrazia obidva fragmenty v rámci jednej aktivity vedľa seba spravidla tak, že zoznam objektov sa zobrazí vľavo a podrobnosti o vybranom objekte vpravo. Typickým príkladom je aplikácia mailový klient.

Hlavnými výhodami fragmentov sú modularita aplikácie, opakovateľné použitie hotových blokov kódu aj návrhu častí používateľského rozhrania a predovšetkým adaptibilita aplikácie na rôzne veľkosti a rozlíšenia obrazoviek. Implementácia používateľského rozhrania je zapuzdrená vo fragmentoch. Aktivity fungujú iba ako kontajnery pre fragmenty, pričom fragmenty v aktivite sa dajú dynamicky meniť.

Príklad – aplikácia typu master- detail

Vytvorte v Android Studiu projekt aplikácie napríklad s názvom Fragmenty1. Ako typ hlavnej aktivity zvoľte Master/detail flow.

Po vytvorení projektu môžete aplikáciu spustiť. Obsahuje cvičný zoznam položiek a po výbere položky sa o nej zobrazia detailné informácie

Spustenie aplikácie na smartfóne na výšku

Spustenie aplikácie na tablete, alebo smartfóne na šírku. Nezabudnite na emulátore povoliť zmenu orientácie obrazovky

K príkladom tohoto typu sa ešte dostaneme, hĺbavejší čitatelia samozrejme preskúmajú jednotlivé súbory projektu

Príklad – zmena orientácie

Námetom tejto jednoduchej aplikácie, ktorú urobíme sami, takže jej budete rozumieť bude prepínanie fragmentov v závislosti od orientácie zariadenia. V príklade vytvoríme dva fragmenty, jeden pre orientáciu na výšku (portrait) a druhý pre orientáciu na šírku (landscape).

Vytvorte v Android Studiu projekt aplikácie napríklad s názvom Fragmenty3. Ako typ hlavnej aktivity zvoľte Empty Activity.

Riešenie úlohy rozdelíme do niekoľkých krokov:

1. Vytvorenie layoutu fragmentov

V zložke res/layout vytvorte dva XML súbory portrait_fragment.xml a landscape_fragment.xml. V obidvoch layoutoch bude textový reťazec vypísaný pomocou prvku TextView , pomocou ktorého fragmenty po spustení aplikácie identifikujeme

portrait_fragment.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:text="@string/portrait_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textSize="30dp"/>

</RelativeLayout>

landscape_fragment.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:text="@string/landscape_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textSize="30dp"/>

</RelativeLayout>

Pre úplnosť uvádzame aj súbor strings.xml s definíciou textových reťazcov

<resources>

<string name="app_name">Fragmenty1</string>

<string name="action_settings">Settings</string>

<string name="portrait_text">Portrait - orientácia na výšku</string>

<string name="landscape_text">Landscape - orientácia na šírku</string>

</resources>

2. Hlavná aktivita

Pokračujeme úpravou návrhového XML kódu hlavnej aktivity. Popisované úpravy budete robiť v súbore activity_main.xml. Využijeme vizuálny kontejner RelativeLayout. Nahradíte prvok typu TextView s textom Hello World kódom na zobrazenie fragmentov.

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

<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=".MainActivity">

<fragment

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/landscape_fragment" />

<fragment

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/portrait_fragment" />

</RelativeLayout>

3. Vytvorenie tried fragmentov

Na vytvorenie fragmentu potrebujete

Triedu odvodenú od Fragment
Prázdny konštruktor triedy
Rozšírenie metódy CreateView()

V zložke Java, podzložke projektu aplikácie vytvorte dve triedy FragmentLandscape a FragmentPortrait.

LayoutInflator vloží XML definíciu do vnútra kontejnera. SavedInstanceState zaručí pripojenie, ak je fragment obnovený z uloženého stavu.

FragmentLandscape.java

package com.example.fragmenty2;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.app.Fragment;

public class FragmentLandscape extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.landscape_fragment, container, false);

}

FragmentPortrait.java (importy sú rovnaké ako v predchádzajúcom zdrojovom kóde)

public class FragmentPortrait extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.portrait_fragment, container, false);

}

4. Úprava triedy hlavnej aktivity

Otvorte v zložke java súbor MainActivity.java. V metóde onCreate dajte do komentára riadok priraďujúci hlavnej aktivite statický layout

//setContentView(R.layout.activity_main);

a nahraďte ho kódom využívajúcim FragmentManager

package com.example.fragmenty2;

import androidx.appcompat.app.AppCompatActivity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.content.res.Configuration;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//setContentView(R.layout.activity_main);

// Objekt na interakciu fragmentov v rámci akticity

FragmentManager fragmentManager = getFragmentManager();

// beginTransaction() povoli operácie s fragmentmi

FragmentTransaction fragmentTransaction =

fragmentManager.beginTransaction();

//zistenie orientacie zariadenai

Configuration configInfo = getResources().getConfiguration();

//podľa orientácie vlož správny fragment

if(configInfo.orientation == Configuration.ORIENTATION_LANDSCAPE){

FragmentLandscape fragmentLandscape = new FragmentLandscape();

fragmentTransaction.replace(android.R.id.content,

fragmentLandscape);

} else {

FragmentPortrait fragmentPortrait = new FragmentPortrait();

fragmentTransaction.replace(android.R.id.content,

fragmentPortrait);

}

// nahraď fragment tak rýchlo ako je to možné

fragmentTransaction.commit();

}

5. Test aplikácie

Teraz môžete aplikáciu vyskúšať, najlepšie na reálnom zariadení a sledovať či sa zmení fragment pri zmene orientácie zariadenia. Zmenu orientácie zariadenia veľmi ľahko nasimulujete aj na emulátore.