SAMSUNG_06202 M SAMSUNG_06202 M SAMSUNG_06202 M Advertisement

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

0

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.

po zmene orientácie

Rekapitulácia seriálu

1 deň – Prvá aplikácia 

2 deň – Možnosti emulátorov 

3 deň - Zorientujte sa v projekte aplikácie

4 deň – Princípy dizajnu a škálovania

5 deň – Uporiadanie prvkov používateľského rozhrania

6 deň – Obsluha udalostí

7 deň – Aplikácia s dvomi aktivitami  

8 deň – Spustenie na reálnom zariadení

9 deň – Intenty, alebo kto to urobí

10 deň – Dotyky a gestá

11 deň - Dotyky a gestá II  

Luboslav Lacko

Všetky autorove články
Vývoj Android Android aplikácia Android Studio

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať