Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

Layouty v Java Swing

Java Swing Swing bez grafického návrháře Layouty v Java Swing

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V dnešním tutoriálu si popíšeme práci s tzv. layouty. Java má pro lepší práci s komponentami k dispozici 8 layoutů. Každý má svůj vlastní účel a hodí se na něco jiného. Jejich seznam je následující:

  • FlowLayout
  • BoxLayout
  • BorderLayout
  • CardLayout
  • GridBagLayout
  • GridLayout
  • GroupLayout
  • SpringLayout

Všechny výše zmiňované layouty si postupně popíšeme a pokusím se zmínit hlavně jejich výhody.

FlowLayout

FlowLayout v Javě

Tento layout staví komponenty vedle sebe na řádek. Pokud šířka komponentů přesáhne šířku okna, řádek se zalomí a komponenty se začnou řadit na dalším řádku.

Konstruktor:

FlowLayout fl = new FlowLayout();   // základní nastavení komponenty centruje na střed
FlowLayout fl = new FlowLayout(argument); //druhá verze konstruktoru

Argument může nabývat následujících hodnot:

  • FlowLayout.LEFT = komponenty se řadí od levé strany.
  • FlowLayout.RIGHT = komponenty se řadí na pravou stranu.
  • FlowLayout.CENTER = komponenty se řadí na střed. (základní nastavení)

Existují ještě argumenty (FlowLayout.LEADING - řazení od horní strany a FlowLayout.TRAILING - řazení od dolní strany).

FlowLayout fl = new FlowLayout(argument, int horizontal, int vertical); // tretí verze konstruktoru.
  • horizontal = vodorovná mezera mezi jednotlivými komponentami a mezera mezi komponentami a postranním rámem kontejneru.
  • vertical = svislá mezera mezi komponentami a horním rámem kontejneru.

BoxLayout

BoxLayout v Javě

Tento layout rovná komponenty vedle sebe, nebo za sebou podle nastavení.

Konstruktor:

Container pane = this.getContentPane();
pane.setLayout(new BoxLayout(pane, args));

args = rozložení komponentů. Může nabývat následujících hodnot:

  • BoxLayout.PAGE_AXIS - seřadí komponenty od shora dolů.
  • BoxLayout.LINE_AXIS - seřadí komponenty vedle sebe.

Vlastnosti:

rigid area = pevná plocha - použijeme, pokud chceme zaplnit velikost mezi dvěma komponentami. Slouží k tomu příkaz: Box.createRigi­dArea(new Dimension(x,y)); Zkusme si následující příklad:

Container pane = this.getContentPane();
pane.setLayout(new BoxLayout(pane, BoxLayout.PAGE_AXIS));
JButton  prvni = new JButton("prvni");
JButton druhy = new JButton("druhy");
pane.add(prvni);
pane.add(Box.createRigidArea(new Dimension(5,10)));
pane.add(druhy);

glue - Použijeme, když chceme komponenty od sebe roztáhnout. Každou komponentu na jinou stranu. Slouží k tomu dva příkazy:

  • Box.createHori­zontalGlue(); // vodorovné odsazení
  • Box.createVer­ticalGlue(); // svislé odsazení

Opět uvedu příklad:

Container pane = this.getContentPane();
pane.setLayout(new BoxLayout(pane, BoxLayout.PAGE_AXIS));
JButton prvni = new JButton("prvni");
JButton druhy = new JButton("druhy");
pane.add(prvni);
pane.add(Box.createVerticalGlue());
pane.add(druhy);

custom Box.Filler - nastavuje se zde minimální, preferovaná a maximální velikost. Např:

Container pane = this.getContentPane();
pane.setLayout(new BoxLayout(pane, BoxLayout.PAGE_AXIS));
pane.add(prvni);
Dimension min = new Dimension(5, 5O);
Dimension pref = new Dimension(5, 100);
Dimension max = new Dimension(20, 100);
pane.add(new Box.Filler(min, pref, max));
pane.add(druhy);

BorderLayout

BorderLayout je rozdělen na 5 částí (tzv. oblasti), do kterých můžeme přidávat komponenty a to následující:

  • PAGE_START
  • LINE_START
  • CENTRUM
  • LINE_END
  • PAGE_END

Pro lepší představu vám přikládám obrázek, který vystihuje rozložení všech pěti částí BorderLayoutu.

BorderLayout v Javě

Tento layout funguje tak, že oblast CENTRUM se roztáhne tolik, kolik je jí dovoleno a ostatní oblasti se roztáhnou jen natolik, kolik je potřeba. Ukážeme si jak to vypadá v praxi.

Container pane = this.getContentPane();
pane.setLayout(new BorderLayout());
JButton prvni = new JButton("prvni");
JButton druhy = new JButton("druhy");
JButton treti = new JButton("treti");
pane.add(prvni, BorderLayout.PAGE_START);
pane.add(druhy, BorderLayout.CENTER);
pane.add(treti, BorderLayout.LINE_END);

Tenhto layout je hodně používaný, protože do jednotlivých částí můžeme přidat jiné layouty. Např do části LINE_END můžeme přidat BoxLayout. Do části PAGE_START můžeme přidat CardLayout atd.

CardLayout

CardLayout v Javě

Tento layout slouží k přepínání komponent, které sdílí v jednom programu stejný prostor. Vidět je pouze jeden panel. Pokud si do panelu s cardLayoutem uložíme třeba 10 panelů, které budou obsahovat rozdílné komponenty, můžeme přepínat, ale viditelný bude vždy jen jeden.

Tentokrát uvedu trochu rozsáhlejší příklad. Doufám, že to z něj pochopíte. Nejdříve si napíšeme třídu MyFrame, ve které si nadefinujeme náš formulář.

import javax.swing.*;
import javax.swing.border.*;  // importotváno kvůli rámu
import java.awt.*;
import java.awt.event.*;     // importováno kvůli nastavení událostí
public class MyFrame extends JFrame
{
   JPanel card;
   JPanel hlavniPanel;
   JPanel panel1, panel3;
   JPanel panel2;
   CardLayout cards;
   JButton dalsi,predchozi;
   JLabel a;
   JButton o, but;
   public MyFrame()
   {
      this.setTitle("cardLayout");
      this.setSize(500, 300);
      this.setKomponents();
      this.setListeners();
   }

   public void setKomponents(){
      Container pane = this.getContentPane();
      pane.setLayout(new BorderLayout());
      Border outline = BorderFactory.createLineBorder(Color.black); // nastavení borderu
      this.hlavniPanel = new JPanel();
      this.hlavniPanel.setBorder(outline);
      this.dalsi = new JButton(">>");
      this.predchozi = new JButton("<<");
      this.hlavniPanel.add(this.predchozi);
      this.hlavniPanel.add(this.dalsi);
      pane.add(this.hlavniPanel, BorderLayout.PAGE_START);

      cards = new CardLayout();
      card = new JPanel();
      card.setLayout(cards);
      cards.show(card, "Vybíráme");

      /**
       * definice panelů a komponentů uvnitř CardLayoutu
       */
      panel1 = new JPanel();
      panel1.setBackground(Color.YELLOW);
      this.a = new JLabel("blablabla");
      this.a.setBackground(Color.GREEN);
      panel1.add(this.a);
      panel2 = new JPanel();
      panel2.setBackground(Color.RED);
      this.o = new JButton("pokus");
      panel2.add(this.o);
      panel3 = new JPanel();
      panel3.setBackground(Color.BLUE);
      this.but = new JButton("pokusU2");
      panel3.add(this.but);
      /**
       * přidání panelů
       */
      card.add(panel1, "první");
      card.add(panel2, "druhý");
      card.add(panel3, "třetí");
      pane.add(card, BorderLayout.CENTER);
   }

   public void setListeners(){
      this.dalsi.addActionListener(
      new ActionListener() {
          public void actionPerformed(ActionEvent e){
            cards.next(card);
          }
      });
      this.predchozi.addActionListener(
      new ActionListener(){
          public void actionPerformed(ActionEvent e){
           cards.previous(card);
        }
      });
   }

   public static Frame nastav(){
      MyFrame i = new MyFrame();
      i.setLocationRelativeTo(null);
      i.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      i.setVisible(true);
      return i;
   }
}

Poté spustíme program přes třídu Start, kterou si teď nastavíme:

public class Start
{
   public static void main(String args[]){
       MyFrame.nastav();
    }
}

Můžeme si samozřejmě nastavit více druhů ovládání. Přepínat panely po jednom, nebo dokonce na začátek a na konec. To se může hodit, pokud by náš Cardlayout obsahoval větší množství panelů. Pro přehlednost vypíšu všechny funkce:

  • first() - přepne na první panel
  • previous() - přepne na předchozí panel
  • next() - přepne na následující panel
  • last() - přepne na poslední panel
  • show () - můžeme volat konkrétní panel pomocí příkazů show(param); param = název panelu, který se má zobrazit.

Všechny obrázky které jsem použil(kromě obrázku BorderLayoutu), pochází ze stránky http://docs.oracle.com/…/visual.html

Ostatní layouty si ukážeme v dalším díle. pro úplnost přikládám zdrojový kód k poslední ukázce práce s CardLayoutem.


 

Stáhnout

Staženo 278x (5.13 kB)
Aplikace je včetně zdrojových kódů v jazyce java

 

  Aktivity (1)

Článek pro vás napsal Milan Gallas
Avatar
Autor se věnuje programování, hardwaru a počítačovým sítím.

Jak se ti líbí článek?
Celkem (4 hlasů) :
3.53.53.53.5 3.5


 


Miniatura
Předchozí článek
Java GUI
Miniatura
Všechny články v sekci
Java Swing bez grafického návrháře
Miniatura
Následující článek
Layouty v Javě (podruhé)

 

 

Komentáře
Zobrazit starší komentáře (18)

Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

Promiň to tam nemá co dělat. Omlouvám se psal jsem to už dříve a zapoměl jsem to smazat :[

 
Odpovědět 9.8.2013 16:24
Avatar
Odpovídá na Milan Gallas
Michal Žůrek (misaz):

a jen tak ze srandy co to vůbec mělo dělat?

Odpovědět 9.8.2013 16:28
Nesnáším {}, proto se jim vyhýbám.
Avatar
Milan Gallas
Redaktor
Avatar
Milan Gallas:

Tento příkaz nastavuje název akce daného tlačítka, ale to jsem nepatří. Pro více informací můžeš navštívit stránku
http://docs.oracle.com/…/button.html
kde je to dost dobře popsaný.

 
Odpovědět 9.8.2013 16:33
Avatar
BLADE
Člen
Avatar
BLADE:

ok, ďakujem za odpoveď no hlavne za vysvetlenie cardlayoutu ,zrovna nedávno som rozmýšľal ako v programe spraviť aby mal viac "pozadí" teda aby sa mi napríklad po kliknutí na tlačítko úplne zmenil vzhľad programu.

 
Odpovědět 9.8.2013 17:26
Avatar
Kit
Redaktor
Avatar
Odpovídá na Milan Gallas
Kit:

Na http://docs.oracle.com jsem už našel dost bludů hlavně kolem OOP, ale jako on-line i off-line dokumentace je perfektní.

Je dobré se naučit programovat v Javě tak, abys používal co nejméně teček při volání metod. Program je pak přehlednější a čistější.

Odpovědět 10.8.2013 10:29
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
BLADE
Člen
Avatar
BLADE:

Prosím vás mám jeden problém keď robím cez ten cardlayout tak mám tam 3 tie karty no v nich chcem tlačítka a label no nejde mi tam nadstaviť ich umiestnenie teda predstavoval som si to tak že napr Label by som mal v ľavo hore a tlačítka v strede ale nie pri sebe no stále to mám na defaultnej pozícií nedá sa to dať napr cez setbounds a ručne si to nadstaviť ? :(

 
Odpovědět 13.8.2013 18:54
Avatar
Milan Gallas
Redaktor
Avatar
Odpovídá na BLADE
Milan Gallas:

Každému panelu který do CardLayoutu přídáš můžeš nastavit layout pomocí příkazu

.setLayout();

a můžeš si nastavit co chceš. třeba místo přednastaveného panelu1, který je v článku si zkus dát následující kód:
http://www.itnetwork.cz/dev-lighter/174
a tak si můžeš hrát a dělat si co chceš :)

 
Odpovědět 14.8.2013 15:24
Avatar
mnauik
Člen
Avatar
mnauik:

Ahoj, rad bych se zeptal, jaky layout pouzit na nepravidelnou mrizku - prvni sloupec rozdelim na 2 radky a druhy sloupec jen na jeden radek (2 radky ve druhem sloupci jakoby spojim).

Nebo to zkusim formulovat lepsim jazykem:

<table border=2>
<tr><td>1</td><td rowspan=2>3</tr>
<tr><td>2</td></tr>
</table>

Dekuji za odpoved

Odpovědět 6.4.2014 11:35
minusuj mě, ale zdůvodni to ;)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 28. Zobrazit vše