Paris le permite definir y aplicar estilos mediante programación a vistas de Android, incluidos atributos personalizados.
En build.gradle
de su proyecto:
dependencies {
implementation ' com.airbnb.android:paris:2.0.0 '
// Apply the Paris processor if you're using Paris annotations for code gen.
kapt ' com.airbnb.android:paris-processor:2.0.0 '
// or if you are using Kotlin Symbol Processing
ksp ' com.airbnb.android:paris-processor:2.0.0 '
}
Para utilizar París en un módulo de biblioteca, consulte Módulos de biblioteca.
myView.style( R .style. MyStyle )
Paris . style ( myView ). apply ( R . style . MyStyle );
Donde myView
es una instancia de vista arbitraria, MyStyle
es un estilo definido por XML y style
una función de extensión proporcionada por Paris. Se admiten muchos atributos, pero no todos; para obtener más información, consulte Tipos de vistas y atributos admitidos.
myView.style {
add( R .style. StyleA )
add( R .style. StyleB )
…
}
Paris . styleBuilder ( myView )
. add ( R . style . StyleA )
. add ( R . style . StyleB )
…
. apply ();
En los casos en los que hay cierta superposición, prevalece el valor del atributo del último estilo agregado. Para obtener más información, consulte Combinación de estilos.
textView.style {
// Using an actual value.
textColor( Color . GREEN )
// Or a resource.
textSizeRes( R .dimen.my_text_size_small)
}
Paris . styleBuilder ( textView )
// Using an actual value.
. textColor ( Color . GREEN )
// Or a resource.
. textSizeRes ( R . dimen . my_text_size_small )
. apply ();
También se puede combinar con recursos de estilo:
textView.style {
// Adds all the attributes defined in the MyGreenTextView style.
add( R .style. MyGreenTextView )
textSizeRes( R .dimen.my_text_size_small)
}
Paris . styleBuilder ( textView )
// Adds all the attributes defined in the MyGreenTextView style.
. add ( R . style . MyGreenTextView )
. textSizeRes ( R . dimen . my_text_size_small )
. apply ();
Para obtener más información, consulte Definición de estilos mediante programación.
Los atributos se declaran de la siguiente manera:
< declare-styleable name = " MyView " >
< attr name = " title " format = " string " />
< attr name = " image " format = " reference " />
< attr name = " imageSize " format = " dimension " />
</ declare-styleable >
La vista personalizada está anotada con @Styleable
y @Attr
:
// The value here corresponds to the name chosen in declare-styleable.
@Styleable( " MyView " )
class MyView (…) : ViewGroup(…) {
init {
// This call enables the custom attributes when used in XML layouts. It
// extracts styling information from AttributeSet like it would a StyleRes.
style(attrs)
}
@Attr( R .styleable. MyView_title )
fun setTitle ( title : String ) {
// Automatically called with the title value (if any) when an AttributeSet
// or StyleRes is applied to the MyView instance.
}
@Attr( R .styleable. MyView_image )
fun setImage ( image : Drawable ? ) {
// Automatically called with the image value (if any) when an AttributeSet
// or StyleRes is applied to the MyView instance.
}
@Attr( R .styleable. MyView_imageSize )
fun setImageSize (@Px imageSize : Int ) {
// Automatically called with the imageSize value (if any) when an
// AttributeSet or StyleRes is applied to the MyView instance.
}
}
// The value here corresponds to the name chosen in declare-styleable.
@ Styleable ( "MyView" )
public class MyView extends ViewGroup {
public MyView ( Context context ) {
super ( context );
}
public MyView ( Context context , AttributeSet attrs ) {
this ( context , attrs , 0 );
}
public MyView ( Context context , AttributeSet attrs , int defStyle ) {
this ( context , attrs , defStyle );
// This call enables the custom attributes when used in XML layouts. It
// extracts styling information from AttributeSet like it would a StyleRes.
Paris . style ( this ). apply ( attrs );
}
@ Attr ( R . styleable . MyView_title )
public void setTitle ( String title ) {
// Automatically called with the title value (if any) when an AttributeSet
// or StyleRes is applied to the MyView instance.
}
@ Attr ( R . styleable . MyView_image )
public void setImage ( Drawable image ) {
// Automatically called with the image value (if any) when an AttributeSet
// or StyleRes is applied to the MyView instance.
}
@ Attr ( R . styleable . MyView_imageSize )
public void setImageSize ( @ Px int imageSize ) {
// Automatically called with the imageSize value (if any) when an
// AttributeSet or StyleRes is applied to the MyView instance.
}
}
Paris llamará a los métodos anotados @Attr
cuando la vista se infle con un AttributeSet
o cuando se aplique un estilo.
Para obtener más información, consulte Atributos de vista personalizados.
Los atributos se declaran de la siguiente manera para las 2 subvistas a las que nos gustaría poder diseñar:
< declare-styleable name = " MyHeader " >
< attr name = " titleStyle " format = " reference " />
< attr name = " subtitleStyle " format = " reference " />
...
</ declare-styleable >
Los campos de la subvista están anotados con @StyleableChild
:
@Styleable( " MyHeader " )
class MyHeader (…) : ViewGroup(…) {
@StyleableChild( R .styleable. MyHeader_titleStyle )
internal val title : TextView …
@StyleableChild( R .styleable. MyHeader_subtitleStyle )
internal val subtitle : TextView …
init {
style(attrs)
}
}
@ Styleable ( "MyHeader" )
public class MyHeader extends ViewGroup {
@ StyleableChild ( R . styleable . MyHeader_titleStyle )
TextView title ;
@ StyleableChild ( R . styleable . MyHeader_subtitleStyle )
TextView subtitle ;
…
// Make sure to call Paris.style(this).apply(attrs) during initialization.
}
Los estilos de título y subtítulo ahora pueden formar parte de los estilos MyHeader
:
< MyHeader
...
app : titleStyle = " @style/Title2 "
app : subtitleStyle = " @style/Regular " />
myHeader.style {
// Defined in XML.
titleStyle( R .style. Title2 )
// Defined programmatically.
subtitleStyle {
textColorRes( R .color.text_color_regular)
textSizeRes( R .dimen.text_size_regular)
}
}
Paris . styleBuilder ( myHeader )
// Defined in XML.
. titleStyle ( R . style . Title2 )
// Defined programmatically.
. subtitleStyle (( builder ) -> builder
. textColorRes ( R . color . text_color_regular )
. textSizeRes ( R . dimen . text_size_regular ))
. apply ();
Atención: Las funciones de extensión como titleStyle
y subtitleStyle
se generan durante la compilación mediante el procesador de anotaciones de Paris. Cuando se agregan nuevas anotaciones @StyleableChild
, el proyecto debe (re)compilarse una vez para que las funciones relacionadas estén disponibles.
Para obtener más información, consulte Estilo de subvistas.
@Styleable
class MyView (…) : View(…) {
companion object {
// For styles defined in XML.
@Style
val RED_STYLE = R .style. MyView_Red
// For styles defined programmatically.
@Style
val GREEN_STYLE = myViewStyle {
background( R .color.green)
}
}
}
@ Styleable
public class MyView extends View {
// For styles defined in XML.
@ Style
static final int RED_STYLE = R . style . MyView_Red ;
// For styles defined programmatically.
@ Style
static void greenStyle ( MyViewStyleApplier . StyleBuilder builder ) {
builder . background ( R . color . green );
}
}
Se generan métodos auxiliares para cada estilo vinculado:
myView.style { addRed() } // Equivalent to style(R.style.MyView_Red)
myView.style { addGreen() } // Equivalent to add(MyView.GREEN_STYLE)
myView.style {
addRed() // Equivalent to add(R.style.MyView_Red)
addGreen() // Equivalent to add(MyView.GREEN_STYLE)
…
}
Paris . style ( myView ). applyRed (); // Equivalent to apply(R.style.MyView_Red)
Paris . style ( myView ). applyGreen (); // No equivalent.
Paris . styleBuilder ( myView )
. addRed () // Equivalent to add(R.style.MyView_Red)
. addGreen () // No equivalent.
…
. apply ();
Atención: Las funciones de extensión como addRed
y addGreen
se generan durante la compilación mediante el procesador de anotaciones de Paris. Cuando se agregan nuevas anotaciones @Style
, el proyecto debe (re)compilarse una vez para que las funciones relacionadas estén disponibles.
Para obtener más información, consulte Vincular estilos a vistas personalizadas.
Vea ejemplos y explore la documentación completa en Paris Wiki.
Si aún tiene preguntas, no dude en crear una nueva edición.
¡Nos encantan las contribuciones! Consulte nuestras pautas de contribución y asegúrese de seguir nuestro código de conducta.
Copyright 2018 Airbnb, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.