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 )

انقر لرؤية المثال في جافا.

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

حيث أن myView عبارة عن مثيل عرض عشوائي، و MyStyle هو نمط محدد بواسطة XML، style وظيفة ملحقة توفرها Paris. يتم دعم العديد من السمات، وليس كلها، لمزيد من المعلومات، راجع أنواع العرض والسمات المدعومة.

الجمع بين 2 أو أكثر من الأنماط

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

انقر لرؤية المثال في جافا.

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

انقر لرؤية المثال في جافا.

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

انقر لرؤية المثال في جافا.

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

انقر لرؤية المثال في جافا.

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

سيتم استدعاء الأساليب @Attr -annotated بواسطة Paris عندما يتم تضخيم العرض باستخدام AttributeSet أو عند تطبيق النمط.

لمزيد من المعلومات، راجع سمات العرض المخصصة.

العروض الفرعية للتصميم

يتم الإعلان عن السمات على النحو التالي للعرضين الفرعيين اللذين نود أن نكون قادرين على تصميمهما:

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

انقر لرؤية المثال في جافا.

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

انقر لرؤية المثال في جافا.

 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 أثناء التجميع بواسطة معالج التعليقات التوضيحية في باريس. عند إضافة تعليقات توضيحية @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)
        }
    }
}

انقر لرؤية المثال في جافا.

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

انقر لرؤية المثال في جافا.

 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 أثناء التجميع بواسطة معالج التعليقات التوضيحية في باريس. عند إضافة تعليقات توضيحية @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.