قد تحتاج في بعض تطبيقاتك الى استخدام رابط لموقع او تسجيل او خدمة معينة وكنت في السابق امام احد الخيارين اما فتح الرابط في 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));

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

 

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

 

اضافة 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);

 

النتيجة :

نلاحظ ظهور ايقونة مشاركة في 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);

النتيجة :

 

 

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

 

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