paris

ปารีส

Paris ให้คุณกำหนดและใช้สไตล์โดยทางโปรแกรมกับมุมมอง Android รวมถึงแอตทริบิวต์ที่กำหนดเอง

• ใช้สไตล์โดยทางโปรแกรมได้ตลอดเวลา
• ผสมผสานหลายสไตล์เข้าด้วยกัน
• สร้างสไตล์โดยทางโปรแกรม (ตรงข้ามกับการใช้ XML)
• ใช้คำอธิบายประกอบเพื่อรองรับแอตทริบิวต์ที่กำหนดเองได้อย่างง่ายดาย (ได้รับแรงบันดาลใจจาก Barber)
• ประกาศสไตล์ที่ได้รับการสนับสนุนอย่างชัดเจนสำหรับมุมมองที่คุณกำหนดเอง
• และอีกมากมาย...

การติดตั้ง

ใน build.gradle ของโครงการของคุณ :

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

หากต้องการใช้ปารีสในโมดูลห้องสมุด โปรดดูที่โมดูลห้องสมุด

เริ่มต้นอย่างรวดเร็ว

การใช้สไตล์ที่กำหนดโดย XML

myView.style( R .style. MyStyle )

คลิกเพื่อดูตัวอย่างในภาษา Java

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

โดยที่ myView เป็นอินสแตนซ์มุมมองที่กำหนดเอง MyStyle เป็นรูปแบบที่กำหนดโดย XML และ style แบบฟังก์ชันส่วนขยายที่ Paris มอบให้ รองรับแอตทริบิวต์หลายรายการแต่ไม่ใช่ทั้งหมด โปรดดูเพิ่มเติมที่ประเภทมุมมองและแอตทริบิวต์ที่รองรับ

การรวม 2 สไตล์ขึ้นไป

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

คลิกเพื่อดูตัวอย่างในภาษา Java

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

ในกรณีที่มีการทับซ้อนกันค่าแอตทริบิวต์จากสไตล์ที่เพิ่มล่าสุดจะมีผลเหนือกว่า สำหรับข้อมูลเพิ่มเติม โปรดดูที่ การรวมสไตล์

การกำหนดสไตล์โดยทางโปรแกรม

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

คลิกเพื่อดูตัวอย่างในภาษา Java

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

สามารถใช้ร่วมกับทรัพยากรสไตล์ได้เช่นกัน:

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

คลิกเพื่อดูตัวอย่างในภาษา 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 ();

สำหรับข้อมูลเพิ่มเติม โปรดดูการกำหนดสไตล์โดยทางโปรแกรม

แอตทริบิวต์มุมมองที่กำหนดเอง

มีการประกาศแอตทริบิวต์ดังต่อไปนี้:

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

มุมมองที่กำหนดเองมีคำอธิบายประกอบด้วย @Styleable และ @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.
    }
}

คลิกเพื่อดูตัวอย่างในภาษา 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.
    }
}

Paris วิธีการ @Attr -annotated จะถูกเรียกเมื่อมุมมองถูกขยายด้วย AttributeSet หรือเมื่อมีการใช้สไตล์

สำหรับข้อมูลเพิ่มเติม โปรดดูแอตทริบิวต์มุมมองที่กำหนดเอง

การดูย่อยสไตล์

มีการประกาศแอตทริบิวต์ดังต่อไปนี้สำหรับมุมมองย่อย 2 รายการที่เราต้องการให้จัดรูปแบบได้:

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

ฟิลด์มุมมองย่อยมีคำอธิบายประกอบด้วย @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)
    }
}

คลิกเพื่อดูตัวอย่างในภาษา 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.
}

รูปแบบชื่อเรื่องและคำบรรยายสามารถเป็นส่วนหนึ่งของสไตล์ 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)
    }
}

คลิกเพื่อดูตัวอย่างในภาษา 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 ();

ข้อควรสนใจ: ฟังก์ชันส่วนขยาย เช่น titleStyle และ subtitleStyle ถูกสร้างขึ้นในระหว่างการคอมไพล์โดยตัวประมวลผลคำอธิบายประกอบของ Paris เมื่อมีการเพิ่มคำอธิบายประกอบ @StyleableChild ใหม่ โปรเจ็กต์จะต้องถูกคอมไพล์ (ใหม่) หนึ่งครั้งเพื่อให้ฟังก์ชันที่เกี่ยวข้องพร้อมใช้งาน

สำหรับข้อมูลเพิ่มเติม โปรดดูที่ มุมมองย่อยการจัดสไตล์

การเชื่อมโยงสไตล์กับมุมมอง

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

คลิกเพื่อดูตัวอย่างในภาษา 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 );
    }
}

วิธีการช่วยเหลือจะถูกสร้างขึ้นสำหรับแต่ละสไตล์ที่เชื่อมโยง:

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

คลิกเพื่อดูตัวอย่างในภาษา 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 ();

ข้อควรสนใจ: ฟังก์ชันส่วนขยาย เช่น addRed และ addGreen ถูกสร้างขึ้นระหว่างการคอมไพล์โดยตัวประมวลผลคำอธิบายประกอบของ Paris เมื่อมีการเพิ่มคำอธิบายประกอบ @Style ใหม่ โปรเจ็กต์จะต้องถูกคอมไพล์ (ใหม่) หนึ่งครั้งเพื่อให้ฟังก์ชันที่เกี่ยวข้องใช้งานได้

สำหรับข้อมูลเพิ่มเติม โปรดดูที่การเชื่อมโยงสไตล์กับมุมมองที่กำหนดเอง

เอกสารประกอบ

ดูตัวอย่างและเรียกดูเอกสารฉบับสมบูรณ์ได้ที่ Paris Wiki

หากคุณยังคงมีคำถาม อย่าลังเลที่จะสร้างปัญหาใหม่

มีส่วนร่วม

เรารักการมีส่วนร่วม! ตรวจสอบแนวทางการมีส่วนร่วมของเราและอย่าลืมปฏิบัติตามหลักจรรยาบรรณของเรา

ใบอนุญาต

 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.