paris

Paris

Paris memungkinkan Anda menentukan dan menerapkan gaya secara terprogram ke tampilan Android, termasuk atribut khusus.

• Terapkan gaya secara terprogram kapan saja.
• Gabungkan beberapa gaya menjadi satu.
• Buat gaya secara terprogram (bukan menggunakan XML).
• Gunakan anotasi untuk mendukung atribut khusus dengan mudah (terinspirasi oleh Barber).
• Deklarasikan gaya yang didukung secara eksplisit untuk tampilan kustom Anda.
• Dan masih banyak lagi...

Instalasi

Di build.gradle proyek Anda:

 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 '
}

Untuk menggunakan Paris dalam modul perpustakaan, lihat Modul Perpustakaan.

Mulai Cepat

Menerapkan Gaya yang Ditentukan XML

myView.style( R .style. MyStyle )

Klik untuk melihat contoh di Java.

 Paris . style ( myView ). apply ( R . style . MyStyle );

Dimana myView adalah contoh tampilan arbitrer, MyStyle adalah gaya yang ditentukan XML, dan style adalah fungsi ekstensi yang disediakan oleh Paris. Banyak namun tidak semua atribut didukung, untuk informasi selengkapnya lihat Jenis Tampilan dan Atribut yang Didukung.

Menggabungkan 2 Gaya atau Lebih

myView.style {
    add( R .style. StyleA )
    add( R .style. StyleB )
    …
}

Klik untuk melihat contoh di Java.

 Paris . styleBuilder ( myView )
        . add ( R . style . StyleA )
        . add ( R . style . StyleB )
        …
        . apply ();

Jika ada beberapa tumpang tindih, nilai atribut dari gaya terakhir yang ditambahkan akan berlaku. Untuk lebih lanjut lihat Menggabungkan Gaya.

Mendefinisikan Gaya Secara Terprogram

textView.style {
    // Using an actual value.
    textColor( Color . GREEN )
    // Or a resource.
    textSizeRes( R .dimen.my_text_size_small)
}

Klik untuk melihat contoh di Java.

 Paris . styleBuilder ( textView )
        // Using an actual value.
        . textColor ( Color . GREEN )
        // Or a resource.
        . textSizeRes ( R . dimen . my_text_size_small )
        . apply ();

Dapat dikombinasikan dengan sumber daya gaya juga:

textView.style {
    // Adds all the attributes defined in the MyGreenTextView style.
    add( R .style. MyGreenTextView )
    textSizeRes( R .dimen.my_text_size_small)
}

Klik untuk melihat contoh di Java.

 Paris . styleBuilder ( textView )
        // Adds all the attributes defined in the MyGreenTextView style.
        . add ( R . style . MyGreenTextView )
        . textSizeRes ( R . dimen . my_text_size_small )
        . apply ();

Untuk lebih lanjut lihat Mendefinisikan Gaya Secara Terprogram.

Atribut Tampilan Kustom

Atribut dideklarasikan sebagai berikut:

< declare-styleable name = " MyView " >
    < attr name = " title " format = " string " />
    < attr name = " image " format = " reference " />
    < attr name = " imageSize " format = " dimension " />
</ declare-styleable >

Tampilan kustom dianotasi dengan @Styleable dan @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.
    }
}

Klik untuk melihat contoh di Java.

 // 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.
    }
}

Metode @Attr - beranotasi akan dipanggil oleh Paris saat tampilan di-inflate dengan AttributeSet atau saat gaya diterapkan.

Untuk lebih lanjut lihat Atribut Tampilan Kustom.

Subview Penataan Gaya

Atribut dideklarasikan sebagai berikut untuk 2 subview yang ingin kita gaya:

< declare-styleable name = " MyHeader " >
    < attr name = " titleStyle " format = " reference " />
    < attr name = " subtitleStyle " format = " reference " />
    ...
</ declare-styleable >

Bidang subview dianotasi dengan @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)
    }
}

Klik untuk melihat contoh di Java.

 @ 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.
}

Gaya judul dan subjudul sekarang dapat menjadi bagian dari gaya 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)
    }
}

Klik untuk melihat contoh di Java.

 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 ();

Perhatian: Fungsi ekstensi seperti titleStyle dan subtitleStyle dihasilkan selama kompilasi oleh pemroses anotasi Paris. Ketika anotasi @StyleableChild baru ditambahkan, proyek harus dikompilasi (ulang) satu kali agar fungsi terkait tersedia.

Untuk lebih lanjut lihat Styling Subview.

Menghubungkan Gaya ke Tampilan

@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)
        }
    }
}

Klik untuk melihat contoh di Java.

 @ 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 );
    }
}

Metode pembantu dihasilkan untuk setiap gaya tertaut:

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)
    …
}

Klik untuk melihat contoh di Java.

 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 ();

Perhatian: Fungsi ekstensi seperti addRed dan addGreen dihasilkan selama kompilasi oleh pemroses anotasi Paris. Ketika anotasi @Style baru ditambahkan, proyek harus dikompilasi (ulang) satu kali agar fungsi terkait tersedia.

Untuk selengkapnya, lihat Menautkan Gaya ke Tampilan Kustom.

Dokumentasi

Lihat contoh dan telusuri dokumentasi lengkap di Paris Wiki.

Jika Anda masih memiliki pertanyaan, silakan membuat terbitan baru.

Berkontribusi

Kami menyukai kontribusi! Lihat pedoman kontribusi kami dan pastikan untuk mengikuti kode etik kami.

Lisensi

 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.