ColumnsLayout
ColumnsLayout-komponentti järjestää kohteet responsiiviseen sarakepohjaiseen asetteluun, joka mukautuu käytettävissä olevan leveyden mukaan. Katkaisupisteet ja kohdistukset hallitaan automaattisesti, joten monisarakkeisten lomakkeiden ja sisällön ruudukkojen rakentamiseen ei tarvita erikoista responsiivista logiikkaa.
Oletuskäyttäytyminen
Oletuksena ColumnsLayout vie koko vanhemman leveydestä ja järjestää kohteet yhteen sarakkeeseen, vaihtaen kahteen sarakkeeseen leveyksillä 40em ja enemmän.
Tätä voidaan käyttää FlexLayout-komponentin kanssa tai sen sijaan - yhtä voimakas työkalu vaakasuuntaisille asetteluille.
Katkaisupisteet
ColumnsLayout on suunniteltu tarjoamaan nesteen kaltaista, ruudukon kaltaista järjestelmää, joka mukautuu sen vanhemman säilön leveyteen. Toisin kuin perinteiset kiinteät ruudukot, tämä asettelu sallii kehittäjien määrittää tietyn määrän sarakkeita tietyllä leveydellä ja laskee dynaamisesti näytettävien sarakkeiden määrän asetettujen Breakpoint-objektien perusteella.
Tämä mahdollistaa ColumnsLayout:in sujuvan sopeutumisen kapeista tiloista pienillä näytöillä laajemmalle alueelle suuremmilla näytöillä, tarjoten responsiivisen suunnittelun kehittäjälle ilman tarvetta erikoiselle toteutukselle.
Ymmärtäminen Breakpoint
Breakpoint voidaan määrittää käyttäen Breakpoint-luokkaa, joka ottaa kolme parametria:
-
Nimi (valinnainen): Katkaisupisteen nimeäminen sallii sen viittaamisen tulevissa määrityksissä.
-
Minimi leveys: Jokaisella katkaisupisteellä on erityinen alue, joka määrittää, milloin sen asettelu otetaan käyttöön. Minimi leveys määritellään nimenomaisesti, ja seuraava katkaisupiste määrittää maksimileveyden, jos se on olemassa. Voit käyttää kokonaislukua määrittämään minimi leveyden pikseleinä tai käyttää
String:iä määrittämään muita yksiköitä, kutenvw,%taiem. -
Sarakkeiden määrä: Määrittele, kuinka monta saraketta katkaisupisteellä tulisi olla tällä kokonaisluvulla.
Breakpoint arviointiKatkaisupisteet arvioidaan nousevassa järjestyksessä leveyden mukaan, mikä tarkoittaa, että asettelu käyttää ensimmäistä vastaavaa katkaisupistettä.
Katkaisupisteiden soveltaminen
Katkaisupisteitä sovelletaan ColumnsLayout:iin yhdellä kahdesta tavalla: rakentamisen aikana tai Listan avulla käyttäen setBreakpoints()-metodia:
ColumnsLayout layout = new ColumnsLayout();
List<Breakpoint> breakpoints = List.of(
// Yksi sarake leveyksillä >= 0px
new Breakpoint(0, 1),
// Kaksi saraketta leveyksillä >= 600px
new Breakpoint(600, 2),
// Neljä saraketta leveyksillä >= 1200px
new Breakpoint(1200, 4));
layout.setBreakpoints(breakpoints);
Alla oleva esimerkki näyttää, kuinka useita katkaisupisteitä asetetaan rakentamisen aikana, käyttäen katkaisupisteitä komponentin Span määrittämiseen ja havainnollistaa ColumnsLayout:in koon muutosmahdollisuuksia, kun sovellusta pienennetään:
Sarake Span ja spans per Breakpoint
ColumnsLayout:issa sarake-sillat antavat sinun hallita, kuinka monta saraketta kohde vie, antaen enemmän kontrollia asettelusi ulkoasuun eri leveyksillä. Tämä on erityisen hyödyllistä, kun haluat joidenkin elementtien vievän enemmän tai vähemmän tilaa näytön koon tai suunnittelutarpeiden mukaan.
Sarake-siltojen hallinta
Oletuksena jokainen kohde ColumnsLayout:issa vie täsmälleen yhden sarakkeen. Voit kuitenkin mukauttaa tätä käyttäytymistä asettamalla sarake-sillan yksittäisille kohteille. Silta määrittää, kuinka monta saraketta kohteen tulisi viedä.
Button button = new Button("Napsauta minua");
layout.add(button);
// Kohde vie kaksi saraketta
layout.setSpan(button, 2);
Yllä olevassa esimerkissä nappi vie kaksi saraketta sen sijaan, että se olisi oletusarvoisesti yksi. setSpan()-metodi mahdollistaa sen määrittämisen, kuinka monta saraketta komponentti tulisi kattaa asettelussa.
Sarake-siltojen säätäminen katkaisupisteiden mukaan
Voit myös säätää sarake-siltoja dynaamisesti katkaisupisteiden mukaan. Tämä ominaisuus on hyödyllinen, kun haluat, että kohde kattaa erikokoisia sarakkeita näytön koosta riippuen. Esimerkiksi haluat, että elementti vie yhden sarakkeen mobiililaitteissa, mutta kattaa useita sarakkeita suuremmilla näytöillä.
TextField email = new TextField("Sähköposti");
//...
List.of(
new ColumnsLayout.Breakpoint("oletus", 0 , 1),
new ColumnsLayout.Breakpoint("pieni", "20em", 1),
new ColumnsLayout.Breakpoint("keskikokoinen", "40em", 2),
new ColumnsLayout.Breakpoint("suuri", "60em", 3)
)
//...
//sähköpostikenttä kattaa kaksi saraketta, kun keskikokoinen katkaisupiste on aktiivinen
columnsLayout.setSpan(email, "keskikokoinen", 2);
//...
Tämä mukautusvarmuus varmistaa, että asettelusi pysyy responsiivisena ja asianmukaisesti rakenteellisena eri laitteilla.
Kohteiden sijoittaminen sarakkeisiin
ColumnsLayout tarjoaa mahdollisuuden sijoittaa kohteita tiettyihin sarakkeisiin, mikä antaa enemmän kontrollia elementtien järjestämisestä. Voit manuaalisesti määrittää, mihin kohteet tulisi sijoittaa asettelussa, varmistaen, että tärkeät komponentit näkyvät halutulla tavalla.
Perussarakkeen sijoittaminen
Oletuksena kohteet sijoitetaan seuraavaan saatavilla olevaan sarakkeeseen, täyttäen vasemmalta oikealle. Voit kuitenkin ohittaa tämän käyttäytymisen ja määrittää tarkan sarakkeen, johon kohde tulisi sijoittaa. Sijoittaaksesi kohteen tiettyyn sarakkeeseen, käytä setColumn()-metodia. Tässä esimerkissä nappi sijoitetaan asettelun toiseen sarakkeeseen riippumatta siitä, missä järjestyksessä se on lisätty suhteessa muihin komponenteihin:
Button button = new Button("Lähetä");
layout.add(button);
// Sijoita kohde toiseen sarakkeeseen
layout.setColumn(button, 2);
Sijoituksen säätäminen katkaisupisteittäin
Aivan kuten sarake-siltojen kanssa, voit käyttää katkaisupisteitä säätääksesi kohteiden sijoittamista näytön koon mukaan. Tämä on hyödyllistä, kun on tarpeen järjestää tai siirtää elementtejä asettelussa, kun näyttö muuttuu.
TextField email = new TextField("Sähköposti");
//...
List.of(
new ColumnsLayout.Breakpoint("oletus", 0 , 1),
new ColumnsLayout.Breakpoint("pieni", "20em", 1),
new ColumnsLayout.Breakpoint("keskikokoinen", "40em", 2),
new ColumnsLayout.Breakpoint("suuri", "60em", 3)
)
//...
//sähköpostikenttä näkyy toisessa sarakkeessa, kun keskikokoinen katkaisupiste on aktiivinen
columnsLayout.setColumn(email, "keskikokoinen", 2);
//...
Seuraavassa demonstraatiossa huomaa, että kun "keskikokoinen" katkaisupiste aktivoituu, email-kenttä kattaa molemmat sarakkeet:
Kun useita kohteita sijoitetaan asetteluun eri siltamäärillä ja/tai sarake-asetuksilla, varmista, että kohteiden yhdistetyt sillat ja sijoitukset yhdessä rivissä eivät mene päällekkäin. Asettelu pyrkii hallitsemaan välistystä automaattisesti, mutta siltamäärien ja katkaisupisteiden huolellinen suunnittelu estää kohteiden ei-toivottuja näyttöjä.
Vertikaalinen ja horisontaalinen kohde-allokointi
Jokainen ColumnsLayout:in kohde voidaan kohdistaa sekä horisontaalisesti että vertikaalisesti sen sarakkeessa, mikä antaa kontrollin siitä, miten sisältö sijoitetaan asettelun sisään.
Horisontaalista kohdistusta ohjataan käyttämällä setHorizontalAlignment()-metodia. Tämä ominaisuus määrittää, kuinka kohde kohdistuu sen sarakkeessa horisontaalisella akselilla.
Vertikaalinen kohdistus määrittää, miten kohde sijoitetaan sen sarakkeessa vertikaalisella akselilla. Tämä on hyödyllistä, kun sarakkeilla on vaihtelevaa korkeutta ja haluat hallita, miten kohteet jakautuvat vertikaalisesti.
Saatavilla olevat Alignment-vaihtoehdot sisältävät:
START: Kohdistaa kohteen sarakkeen vasemmalle puolelle.CENTER: Keskittää kohteen horisontaalisesti sarakkeeseen.END: Kohdistaa kohteen sarakkeen oikealle puolelle.STRETCH: Venyttää komponentin täyttämään asettelun.BASELINE: Kohdistaa kohteet sarakkeen tekstin tai sisällön mukaan, kohdistamalla kohteet tekstin perustason mukaan, ei muihin kohdistusvaihtoehtoihin.AUTO: Automaattinen kohdistus (oletus).
Yllä olevassa demossa Submit-nappiin on annettu ColumnsLayout.Alignment.END, jotta se näkyy sarakkeen lopussa, tai tässä tapauksessa oikealla.
Kohteiden väli
ColumnsLayout:issa sarakkeiden (horisontaalinen väli) ja rivien (vertikaalinen väli) välin hallitseminen auttaa kehittäjiä hienosäätämään asettelua.
Asettaaksesi asettelun horisontaalisen välin, käytä setHorizontalSpacing()-metodia:
// Aseta 20px väli sarakkeiden väliin
layout.setHorizontalSpacing(20);
Vastaavasti käytä setVerticalSpacing()-metodia määrittämään riviin jäävä väli asettelussa:
// Aseta 15px väli rivien väliin
layout.setVerticalSpacing(15);
Väli hyväksyy kokonaisluvun pikseleinä tai String:in muissa yksiköissä, kuten vw tai %.
Vaakasuuntaiset ja pystyasuettud asettelut
Responsiivisten ja houkuttelevien asettelujen rakentaminen on mahdollista sekä FlexLayout-komponentin että ColumnsLayout-komponentin avulla sekä niiden yhdistelmällä. Alla on esimerkki FlexLayoutin artikkelissa luodusta lomakkeesta, mutta käyttämällä ColumnLayout-kaavaa sen sijaan:
