بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)
السلام عليكم ورحمة الله وبركاته
باذن الله سنتحدث في هذا الدرس عن دعم الاصدارات القديمة بالنسبة لـMaterial Theme عن طريق استخدام AppCompat.
AppCompat: مكتبة من Google لدعم الاصدارات الاقدم من اصدارات Android حيث تقوم شركة Google باضافة ميزات في الاصدرات الحديثة ولذلك عند استخدامك لمكتة AppCompat ستتمكن من استخدام هذه الميزات لتدعم الاصدارات القديمة ايضا ( أقل من API 21 ).
كما ذكرنا في درس سابق (Material Theme) عن كيفية استخدام Material Design في تطبيق الاندرويد و وضحنا بأنه يدعم الاصدارات الاحدث بدءاً من اصدار Android Lollipop API 21 الى الاصدارات الحديثة وآخرها Android Oreo.
الخطوة الاولى:
طيب لدعم الاصدارات الأقدم من Android Lollipop نحتاج الى اضافة مكتبة AppComapt من NuGet Package بالشكل التالي:
Solution Explorer-->TestAndroidApp-->RightClick--> Manage NuGet Packages-->Browse
ثم اكتب في خانة البحث: Xamarin.Android.Support.v7.AppCompat
وقم باضافتها الى المشروع.
الخطوة الثانية:
افتح ملف Styles من مجلد values وقم باستبدال الكود السابق الموجود بالكود أدناه وأكتشف الفرق بنفسك:
PHP كود :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!-- Inherit from the light Material Theme
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Customizations go here -->
<!-- Override the status bar color -->
<item name="colorPrimaryDark">#FF006885</item>
<!-- Override the app bar color -->
<item name="colorPrimary">#FF176F87</item>
<!-- Override the color of UI controls -->
<item name="colorAccent">#FF176F87</item>
< item name="android:textColor">#FAFAFA</item>
</style>
</resources>
ولا تنسى أن تغير Minimum Android version الى Android 4.2 API Level 17.
الان انتقل الى Main.axml وقم بتطبيق الخطوات التالية:
قم باضافة هذا السطر داخل LinearLayout:
ثم قم باضافة Toolbar بعد LinearLayout مباشرة :
PHP كود :
xmlns:app="http://schemas.android.com/apk/res-auto"
ثم قم باضافة Toolbar بعد LinearLayout مباشرة :
PHP كود :
<android.support.v7.widget.Toolbar
android:id="@+id/mainToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
الخطوة الثالثة: انتقل الى MainActivity.cs وقم بتطبيق الخطوات التالي:
استبدل Activity في هذا السطر :
PHP كود :
public class MainActivity : Activity
بــ AppCompatActivity بهذا الشكل: (استخدم هذه المكتبة using Android.Support.V7.App;
)
)
PHP كود :
public class MainActivity : AppCompatActivity
قم بتعريف متغير بهذا الشكل:
PHP كود :
V7Toolbar _mainToolbar;
ولإظهار الألوان في الـstatus bar والـ navigation bar نستخدم الكود التالي قبل سطر الـ SetContentView:
PHP كود :
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
Window.SetNavigationBarColor(Color.ParseColor("#FF006885"));
}
حيث ستكون الدالة OnCreate في MainActivity.cs كالتالي:
PHP كود :
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
Window.SetNavigationBarColor(Color.ParseColor("#FF006885"));
}
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
//
_username = FindViewById<EditText>(Resource.Id.userName);
_password = FindViewById<EditText>(Resource.Id.password);
_mainToolbar = FindViewById<V7Toolbar>(Resource.Id.mainToolbar);
SetSupportActionBar(_mainToolbar);
SupportActionBar.Title = "AppCompat";
_ok = FindViewById<Button>(Resource.Id.okButton);
_cancel = FindViewById<Button>(Resource.Id.cancelButton);
_ok.Click += _ok_Click;
_cancel.Click += delegate
{
Finish();
};
}
والمكتبات المستخدمة ستكون كالتالي:
PHP كود :
using Android.App;
using Android.Widget;
using Android.OS;
using Android.Content;
using Android.Views;
using Android.Support.V7.App;
using V7Toolbar = Android.Support.V7.Widget.Toolbar;
using Android.Graphics;
وعند تنفيذ التطبيق ستكون الواجهة بهذا الشكل:
والحمد لله رب العالمين
