MotionLayout
è un tipo di layout che ti aiuta a gestire il movimento e l'animazione dei widget nella tua app.
MotionLayout
è una sottoclasse di
ConstraintLayout
e si basa sulle sue
funzionalità di layout. Nell'ambito della raccolta ConstraintLayout
, MotionLayout
è disponibile come libreria di supporto.
MotionLayout
colma il divario tra le transizioni di layout e i movimenti complessi.
e la gestione dell'ambiente, che offre una combinazione di funzionalità tra l'animazione della proprietà
Google Cloud,
TransitionManager
e
CoordinatorLayout
Oltre a descrivere le transizioni tra i layout, MotionLayout
ti consente di
anima tutte le proprietà del layout. Inoltre, supporta intrinsecamente
transizioni. Ciò significa che puoi mostrare immediatamente qualsiasi punto della transizione
in base ad alcune condizioni, ad esempio l'input tocco. MotionLayout
supporta anche
fotogrammi chiave, consentendo transizioni completamente personalizzate in base alle tue esigenze.
MotionLayout
è un valore completamente dichiarativo, il che significa che puoi descrivere qualsiasi transizione in
XML, indipendentemente dalla complessità.
Considerazioni sulla progettazione
L'elemento MotionLayout
è destinato a spostare, ridimensionare e animare elementi UI con cui
come i pulsanti e le barre dei titoli. Non usare i movimenti nella tua app come
un effetto speciale senza costi. Utilizzalo per aiutare gli utenti a capire cos'è la tua app
facendo. Per ulteriori informazioni sulla progettazione della tua app con il movimento, consulta le
Sezione di Material Design Informazioni
movimento.
Inizia
Segui questi passaggi per iniziare a utilizzare MotionLayout
nel tuo progetto.
-
Aggiungi la dipendenza
ConstraintLayout
: da utilizzareMotionLayout
nel tuo progetto, aggiungiConstraintLayout
Dipendenza di 2.0 dalla tua appbuild.gradle
. Se utilizzi AndroidX, aggiungi il la seguente dipendenza:Alla moda
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
-
Crea un file
MotionLayout
:MotionLayout
è una sottoclasse diConstraintLayout
, quindi puoi trasformare qualsiasiConstraintLayout
esistente in unMotionLayout
di sostituendo il nome della classe nel file di risorse di layout, come mostrato nell' i seguenti esempi:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
Libreria di supporto
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
Ecco un esempio completo di file
MotionLayout
, che definisce il layout mostrato nella figura 1:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout 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:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
Libreria di supporto
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.MotionLayout 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:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
Creare una scena MotionScene: nell'evento
MotionLayout
precedente Ad esempio, l'attributoapp:layoutDescription
fa riferimento a un scena di movimento. Una scena di movimento è un file di risorse XML. All'interno del<MotionScene>
dell'elemento principale, una scena in movimento contiene tutte le descrizioni del movimento layout corrispondente. Per mantenere le informazioni sul layout separate dal movimento descrizioni, ogniMotionLayout
fa riferimento a un movimento separato scena. Le definizioni della scena in movimento hanno la precedenza su qualsiasi definizione definizioni nelMotionLayout
.Ecco un esempio di file di scena di movimento che descrive la base orizzontale movimento nella figura 1:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
Nota:
-
<Transition>
contiene la definizione base del movimento.-
motion:constraintSetStart
emotion:constraintSetEnd
sono riferimenti alla le estremità del movimento. Questi endpoint sono definiti<ConstraintSet>
elementi più avanti nella scena in movimento. -
motion:duration
specifica il numero di millisecondi necessario per il completamento del movimento.
-
-
<OnSwipe>
consente di creare un controllo touch per il movimento.-
motion:touchAnchorId
si riferisce alla visualizzazione che l'utente può scorri e trascina. -
motion:touchAnchorSide
indica viene trascinata dal lato destro. -
motion:dragDirection
si riferisce all'avanzamento direzione del trascinamento. Ad esempio:motion:dragDirection="dragRight"
indica i progressi aumenta man mano che la visualizzazione viene trascinata verso destra.
-
-
<ConstraintSet>
è il punto in cui definisci i vari vincoli che descrivono il tuo movimento. In questo esempio, viene definito un<ConstraintSet>
per ogni punto finale del movimento. Questi endpoint sono centrati verticalmente utilizzandoapp:layout_constraintTop_toTopOf="parent"
eapp:layout_constraintBottom_toBottomOf="parent"
. Orizzontalmente, i punti finali si trovano ai lati più a sinistra e a destra della schermo.
Per una visione più dettagliata dei vari elementi di una scena in movimento supporta, consulta Esempi di layout di animazione.
-
Attributi interpolati
All'interno di un file di scena di movimento, ConstraintSet
elementi possono contenere elementi aggiuntivi
che vengono interpolati durante la transizione. Oltre alla posizione e alla
limiti, i seguenti attributi vengono interpolati da MotionLayout
:
alpha
visibility
elevation
rotation
,rotationX
erotationY
translationX
,translationY
etranslationZ
scaleX
,scaleY
Attributi personalizzati
All'interno di un elemento <Constraint>
, puoi utilizzare l'elemento <CustomAttribute>
per specificare
una transizione per gli attributi che non sono semplicemente correlati alla posizione o a View
attributi.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
Un <CustomAttribute>
contiene due attributi propri:
motion:attributeName
è obbligatorio e deve corrispondere a un oggetto con getter e metodi di impostazione. Il getter e il setter devono corrispondere a un pattern specifico. Per ad esempiobackgroundColor
è supportato, poiché la vista presenta elementi MetodigetBackgroundColor()
esetBackgroundColor()
.- L'altro attributo che devi fornire si basa sul tipo di valore. Scegli da
supportati i seguenti tipi:
motion:customColorValue
per i colorimotion:customIntegerValue
per i numeri interimotion:customFloatValue
per i dati in virgola mobilemotion:customStringValue
per le stringhemotion:customDimension
per le dimensionimotion:customBoolean
per i valori booleani
Quando specifichi un attributo personalizzato, definisci i valori endpoint sia nel percorso iniziale
gli elementi <ConstraintSet>
finali.
Cambia il colore dello sfondo
Basandoti sull'esempio precedente, supponi di voler cambiare i colori della visualizzazione come parte del suo moto, come mostrato nella Figura 2.
Aggiungi un elemento <CustomAttribute>
a ogni elemento ConstraintSet
, come mostrato in
il seguente snippet di codice:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
Attributi aggiuntivi di MotionLayout
Oltre agli attributi dell'esempio precedente, MotionLayout
ha altri
che potresti voler specificare:
app:applyMotionScene="boolean"
indica se applicare la scena in movimento. Il valore predefinito di questo attributo ètrue
.app:showPaths="boolean"
indica se mostrare i percorsi di animazione come il movimento è in esecuzione. Il valore predefinito di questo attributo èfalse
.app:progress="float"
ti consente di specificare esplicitamente l'avanzamento della transizione. Tu puoi utilizzare qualsiasi valore in virgola mobile da0
(l'inizio della transizione) a1
(la fine della transizione).app:currentState="reference"
consente di specificare un valoreConstraintSet
specifico.app:motionDebug
consente di visualizzare ulteriori informazioni di debug sull'argomento movimento. I valori possibili sono"SHOW_PROGRESS"
,"SHOW_PATH"
o"SHOW_ALL"
.
Risorse aggiuntive
Per saperne di più su MotionLayout
, consulta le seguenti risorse:
- Funzionalità avanzate di Android in Kotlin 03.2: animazione con MotionLayout
- Esempi di layout di animazione
- Esempi di MotionLayout/ConstraintLayout su GitHub
- Introduzione a MotionLayout (parte I)
- Introduzione a MotionLayout (parte II)
- Introduzione a MotionLayout (parte III)
- Introduzione a MotionLayout (parte IV)