برمجة تطبيق متعدد الاستايلات – تغيير ثيم تطبيق الاندرويد برمجياً بواسطة زر

بسم الله الرحمن الرحيم

سوف نتعلم في هذه التدوينة, كيفية تغيير استايل التطبيق بواسطة الزر, وسوف إستخدم نموذج بسيط وسهل. ومن ثم لك اضافة العناصر

حسب ما يناسبك.

# في البداية شاهد هذه المعاينة السريعة لتطبيق هذه التدوينة :

الخصائص التي استخدمتها بتدوينة اليوم هي : لون النص \ لون الخلفية \ لون العنوان على الاكشن بار . ولك حرية إضافة العناصر الاخرى من احجام وقياسات إلخ.

في البداية نقوم بفتح اللياوت xml رئيسية التطبيق أو صفحة الاعدادات او الصفحة التي تريد وضع بداخلها الازرار التي تقوم بعملية تغيير الثيم, وليس شرط أن يكون زر .. تستطيع عن طريق الضغط على صورة او نص او زر او حتى قائمة إلخ, وتقوم بإضافة الزر .

الكود الذي استخدمته activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#000"
                android:gravity="center"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:layout_weight="1"
                    android:background="null"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="5dp">

                    <Button
                        android:id="@+id/coloor1"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:background="@color/backGColor1"
                        android:onClick="onClick" />

                    <Button
                        android:id="@+id/coloor2"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:background="@color/backGColor2"
                        android:onClick="onClick" />

                    <Button
                        android:id="@+id/coloor3"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:background="@color/backGColor3"
                        android:onClick="onClick" />

                    <Button
                        android:id="@+id/coloor4"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:background="@color/backGColor4"
                        android:onClick="onClick" />

                </LinearLayout>

                <TextView
                    android:id="@+id/textt1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right|center"
                    android:layout_marginRight="15dp"
                    android:layout_weight="1"
                    android:background="null"
                    android:text="تغيير اللون :"
                    android:textColor="#fff"
                    android:textSize="17sp" />

            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:text="Abboudi Aliwi"
                android:textStyle="bold"
                android:padding="10dp"
                android:textSize="20sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:text="www.AndRody.com"
                android:textStyle="bold"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

ثم نذهب الى ملف الجافا المرتبط به ونضيف بداخل دالة الاون كريت السطر التالي قبل استدعاء اللياوت :

themeUtils.onActivityCreateSetTheme(this);

هذا الكلاس والدالة بداخله لم نقم بإنشائها بعد , ليتم استدعاء الثيم واستخدامه .. إي في حالة قمت باغلاق التطبيق والرجوع اليه تجد لديك اخر ثيم تم استخدامه.

والآن في نفس ملف الجافا , ولكن خارج دالة الاون كريت وداخل الكلاس نضع التالي :

public void onClick(View v) {
        // TODO Auto-generated method stub
        int id = v.getId();
        if (id == R.id.coloor1) {
            themeUtils.changeToTheme(MainActivity.this, themeUtils.F11);

        } else if (id == R.id.coloor2) {
            themeUtils.changeToTheme(MainActivity.this, themeUtils.F22);


        } else if (id == R.id.coloor3) {
            themeUtils.changeToTheme(MainActivity.this, themeUtils.F33);

        } else if (id == R.id.coloor4) {
            themeUtils.changeToTheme(MainActivity.this, themeUtils.F44);

        }
    }

وهي الدالة التي تعمل بعد الضغط على الازرار .. في حال تم الضغط على زر 1 مثلاً يتم الانتقال الى الكلاس الجديد واستخدام الانتجر المحدد, وهناك بذاك الكلاس عند استخدام انتجر ما يتم مثلاً تطبيق الثيم الذي اسمه كذا وكذا وهكذا.

والآن نقوم بإنشاء الكلاس الجديد الذي يتم استخدامه ونضع اسمه : themeUtils
ونضع بداخله الكود التالي :

public class themeUtils {
    private static int cTheme;


    public final static int F11 = 1;

    public final static int F22 = 2;

    public final static int F33 = 3;

    public final static int F44 = 4;


    public static void changeToTheme(Activity activity, int theme) {

        cTheme = theme;

        activity.finish();


        activity.startActivity(new Intent(activity, activity.getClass()));


    }

    public static void onActivityCreateSetTheme(Activity activity) {

        switch (cTheme)

        {

            default:

            case F11:

                activity.setTheme(R.style.AppTheme1);

                break;

            case F22:

                activity.setTheme(R.style.AppTheme2);

                break;
            case F33:

                activity.setTheme(R.style.AppTheme3);

                break;

            case F44:

                activity.setTheme(R.style.AppTheme4);

                break;

        }

    }

}

وهو فقط يتم تفعيل او استخدام انتجر بعد الدخول إليه وتغيير هذا الثيم حسب الرقم اغلاق الاكتفتي واعادة فتحها بالثيم الجديد.

و الآن نذهب لوضع هذه الثيمات, بداخل ملف styles.xml

<resources>

    <!-- // theme 1 -->
    <style name="AppTheme1" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:background">@color/backGColor1</item>
        <item name="android:textColor">@color/textColor1</item>
        <item name="actionBarStyle">@style/MyActionBar1</item>
    </style>

    <style name="MyActionBar1" parent="@style/Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/MyTitleTextStyle1</item>
    </style>

    <style name="MyTitleTextStyle1" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/textColorActionBar1</item>
    </style>

    <!-- // theme 2 -->
    <style name="AppTheme2">
        <item name="android:background">@color/backGColor2</item>
        <item name="android:textColor">@color/textColor2</item>
        <item name="actionBarStyle">@style/MyActionBar2</item>
    </style>

    <style name="MyActionBar2" parent="@style/Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/MyTitleTextStyle2</item>
    </style>

    <style name="MyTitleTextStyle2" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/textColorActionBar2</item>
    </style>

    <!-- // theme 3 -->
    <style name="AppTheme3">
        <item name="android:background">@color/backGColor3</item>
        <item name="android:textColor">@color/textColor3</item>
        <item name="actionBarStyle">@style/MyActionBar3</item>
    </style>

    <style name="MyActionBar3" parent="@style/Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/MyTitleTextStyle3</item>
    </style>

    <style name="MyTitleTextStyle3" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/textColorActionBar3</item>
    </style>

    <!-- // theme 4 -->
    <style name="AppTheme4">
        <item name="android:background">@color/backGColor4</item>
        <item name="android:textColor">@color/textColor4</item>
        <item name="actionBarStyle">@style/MyActionBar4</item>
    </style>

    <style name="MyActionBar4" parent="@style/Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/MyTitleTextStyle4</item>
    </style>

    <style name="MyTitleTextStyle4" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/textColorActionBar4</item>
    </style>

</resources>

ونذهب الان الى ملف color.xml إن لكن موجوداً قم بإنشائه, ونضع داخله الالوان المستخدمة وهي :

<resources>
    <color name="textColor1">#000000</color>
    <color name="backGColor1">#075e54</color>
    <color name="textColorActionBar1">#000000</color>

    <color name="textColor2">#ff450029</color>
    <color name="backGColor2">#ffb9aca8</color>
    <color name="textColorActionBar2">#ff450029</color>

    <color name="textColor3">#ff01003c</color>
    <color name="backGColor3">#ff845bff</color>
    <color name="textColorActionBar3">#ff01003c</color>

    <color name="textColor4">#f3f2ff</color>
    <color name="backGColor4">#86030a</color>
    <color name="textColorActionBar4">#f3f2ff</color>
</resources>

ومن هنا قم بتغيير الالوان فقط إذا كنت مبدئ, ومن لديه الخبرة ولو قليلاً يستطيع إضافة المزيد من الالوان والخصائص والثيمات كما الموجود.

بالتوفيق لكم جميعاً .. وانتظرونا في المزيد من الدروس, لا تنسوا مشاركة الدرس للاخرين .. وتعليقاتكم تهمنا لتطوير موقعنا وموقعكم اندرودي عربي.