استبدال WebView بـChrome Custom Tabs

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

اذا وقع اختيارك على المتصفح :

  • صعوبة الانتقال الى المتصفح.
  • صعوبة عودة المستخدم الى التطبيق.
  • Cockies المستخدم .
  • لايوجد تخصيص لواجهة المتصفح من الوان وغيره بحكم انه تطبيق آخر.

اما اذا قمت باستخدام weView :

  • انتقال سهل .
  • تخصيص الواجهة .
  • لايوجد مشاركة لبيانات المستخدم .
  • لاتوجد مميزات المتصفح .

اما مع CCT فستسطيع دمج مميزات webView مع مميزات المتصفح :

  • انتقال سلس .
  • تغيير الواجهة .
  • استخدام مميزات المتصفح.
  • والمزيد ..

نبدأ في العمل ? :

  • انشئ مشروع جديد :

من خلال الاندرويد ستديو قم بانشاء مشروع جديد واضافة هذا depandenies الى gradel 

    compile 'com.android.support:customtabs:23.0.1'
  • اذهب الى MainActivity :

سنقوم الان ببناء CCT باضافة هذا السطر اولا :

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

سنقوم الان بتغيير لون ToolBar لـTTC وتفعيل العنوان وسنقوم باضافة هذا السطر :

builder.setToolbarColor(getResources().getColor(R.color.primary)).setShowTitle(true);

الان سنقوم بتخصيص Animation لعملية الانتقال وستكون من سطرين للذهاب والرجوع :

builder.setStartAnimations(this, R.anim.slide_in_right, R.anim.slide_out_left);
        builder.setExitAnimations(this, android.R.anim.slide_in_left, android.R.anim.slide_out_right);

سنقوم ايضا باضافة خيار رجوع وتخصيص ايقونة من TTC الى الشاشة السابقة :

builder.setCloseButtonIcon(
                BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back_white_24dp));

سنقوم الان CutsomTabIntent واضافة الـBuilder بداخلة :

CustomTabsIntent customTabsIntent = builder.build();

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

customTabsIntent.launchUrl(this, Uri.parse(url));

سنقوم بتشغيل التطبيق وستكون النتيجة بهذا الشكل :

device-2015-09-08-203235

 

نلاحظ وكأننا في متصفح كروم ولكن في الحقيقة نحن مازلنا في التطبيق وايضا وجود سهم للرجوع للخلف ايضا مع تخصيص الالوان .

 

اضافة ActionMenu :

لو اقترضنا انك تحتاج الى اضافة مشاركة داخل CCt قانت حتما ستحتاج الى اضافة Action Menu وستكون اضافتها بهذا الشكل :

سنحتاج الى Intent و PendingIntent لاضافة Intent داخلها وايضا الى Icon “ايقونة” فسيكون الكود بهذا الشكل :

 Intent actionIntent = new Intent(Intent.ACTION_SEND);
        actionIntent.setType("*/*");
        actionIntent.putExtra(Intent.EXTRA_EMAIL, "example@example.com");
        actionIntent.putExtra(Intent.EXTRA_SUBJECT, "example");
        PendingIntent pi = PendingIntent.getActivity(getApplicationContext(), 0, actionIntent, 0);
        Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_share_white_24dp);
        builder.setActionButton(icon, "send email", pi);

 

النتيجة :

device-2015-09-08-204323

نلاحظ ظهور ايقونة مشاركة في toolbar

 

اضافة Menu Item :

ماذا لو اردنا اضافة عنصر قائمة ولكن لا نريد منه الظهور في ToolBar سنقوم باضاة الكود بهذا الشكل :

 Intent menuIntent = new Intent();
        menuIntent.setClass(getApplicationContext(), this.getClass());
        // Optional animation configuration when the user clicks menu items.
        Bundle menuBundle = ActivityOptions.makeCustomAnimation(this, android.R.anim.slide_in_left,
                android.R.anim.slide_out_right).toBundle();
        PendingIntent pi = PendingIntent.getActivity(getApplicationContext(), 0, menuIntent, 0,
                menuBundle);
        builder.addMenuItem("عنصر قائمة", pi);

النتيجة :

device-2015-09-08-204952

 

 

نلاحظ ظهور عنصر قائمة داخل عناصر القائمة الافتراضية من TTC ،

 

انتهينا من هذا الدرس البسيط والذي يقدم خدمات كبيرة جدا وسهولة فائقة في الاستخدام .

تعليقين على “استبدال WebView بـChrome Custom Tabs”

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *