Fullscreen apps for Android Wear Google Developers Arabic English (auto-generated)

Fullscreen apps for Android WearYouTube↗ IA↗(long shot)
Science & Technology 19.5K views 129 likes 4 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

مرحباً، أنا (ويل هالدين براون)

hi I'm will Hall Dean Brown and I'm a

وأنا مهندس برمجيات في فريق Android Wear

software engineer on the Android wear

اليوم سأتحدث عن كتابة تطبيقات

team today I'm going to talk about

بكامل الشاشة وغامرة Android Wear من أجل

writing full screen immersive apps for

العديد من الجوانب الفنية في تصميم التطبيقات من أجل Wear

Android wear many technical aspects of

سوف تكون مألوفة للغاية لديك لأنها تعمل بنفس الطريقة

designing apps for wear will be very familiar to you as they work the same

التي تعمل بها تطبيقات Android العادية

way that normal Android apps work

ومع ذلك، هناك اختلافان رئيسيان سأقوم بمناقشتهما

however there are two big differences I'm going to discuss how users leave

كيف يترك المستخدمين تطبيقك

your app and how to design and implement

وكيف تصمم وتنفذ تطبيقك ليبدو بشكل ممتاز على شاشة دائرية

your app to look great on around the

فلنبدأ بالحديث عن كيف يترك Android Wearالمستخدمين التطبيقات في

screen let's start by talking about how users leave apps on Android wear on a

على الهاتف أو الجهاز اللوحي يستخدم المستخدمين زر الرجوع

phone or a tablet users would use the

أو زر home للخروج من أي تطبيق

back button our home button tags in an

ولكن هذين الزرين لا يتواجدا Android Wearفي أجهزة

app but those buttons are not present on Android wear devices instead there are

بدلاً من ذلك، هناك طريقتان يترك بهما المستخدمين تطبيقك

two ways users can leave your app by

عن طريق التمرير السريع من الحافة اليسرى وعن طريق الضغط المطول على التطبيق

swiping from the left edge and by long-pressing on the app with Android

نقدم سمة جديدة للنافذةr Android Wea مع وهي التمرير السريع للنافذة لاستبعادها

wear we're introducing a new window attribute window swipe to dismiss this

هذه السمة للنافذة يمكن تحديدها في نسق أو theme نشاطك

window attribute can be specified in the theme of your activity when the window

حين يتم تمرير النافذة لاستبعادها يتم تحديد السمة لتكون true

swipe dismiss attribute is set to true

نشاطك سيكون قابل للاستبعاد

your activity will be dismissible with

عند التمرير السريع من اليسار لليمين

swiping from left to right the swipe

حركة التمرير للاستبعاد تعمل بشكل مماثل لviewpager طريقة عمل

dismissal works similarly to how a view

لو كان المحتوى داخل النشاط scrolling قادر بنفسه على التمرير

pager works the content inside the activity is itself capable of scrolling

فإن النافذة لن يتم استبعادها حتى يقوم المستخدم بالتمرير

the window will not be dismissed until

إلى حافة ذلك المحتوى ثم يقوم بالتمرير السريع مرة أخرى

the user Scrolls to the edge of that content and then swipes again this

هذا يتيح لك صنع تجارب رائعة تشبه الدفق

allows you to create awesome stream like

والتي تظل قابلة للاستبعاد عن طريق التمرير السريع

experiences that are still dismissible by swiping all Android wear apps should

Android Wearكل تطبيقات ينبغي إما أن تستخدم نسق الجهاز الافتراضي أو نسق يرث منه

either use the device default theme or a

هذا سوف يضمن أن عدد من الأنماط

theme that inherits from it this will

معدة بشكل صحيح في تطبيقك ليظهر بشكل رائع على Wear

ensure a number of styles are set correctly on your app to make it look

كما أنه يسمح للتمرير السريع بالاستبعاد

great on wear it also enables swipe to

نحن ندرك أن بعض التطبيقات لن تكون قادرة على استخدام الاستبعاد بالتمرير السريع

dismiss we recognize that some apps are not going to be able to use swipe

على سبيل المثال تطبيق خرائط به مساحة للرسم لا متناهية

dismissal for example a Maps app with an

لن يصل أبداً إلى حافة

infinite canvas will never reach an edge

إن لم تكن تريد استخدام إيماءة التمرير السريع

if you don't want to use the swipe

يمكنك إيقافها في النسق الخاص بك بإعداد سمة false التمرير للاستبعاد في النافذة لتصبح

gesture you can disable it in your theme by setting the windows swipe to dismiss attribute to false for apps that aren't

للتطبيقات التي لا تدعم التمرير السريع للاستبعاد

swiped dismissible we recommend that you

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

use a long press in your app as a gesture to bring up an exit button to

لتخبر المستخدمين أن تطبيقك يدعم الضغط المطول للاستبعاد

inform users that your app supports long

ينبغي أن تظهر للمستخدمين تلميح للضغط المطول حين يبدأ تطبيقك للمرة الأولى

press to dismiss you should show users a long press hint when your app is started for the first time as you can see here a

كما ترى هنا الضغط المطول في أي مكان على الشاشة يظهر زر الخروج فوق التطبيق

long press anywhere on the screen brings up an exit button overlaid upon the app

النقر على ذلك الزر ينهي النشاط ما يعيد المستخدم إلى الشاشة الرئيسية

tapping that button finishes the activity which brings the user back home

لجعل الأمر سهل قدر الإمكان لإضافة الضغط المطول للاستبعاد لتطبيقك

to make it as easy as possible to add long press to dismiss to your app we've

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

made a view that implements much of the

dismiss overlay view تسمى

UI logic for you called dismiss overlay

لدمجها في تطبيقك، ابدأ بإضافتها إلى XML مخطط نشاطاتك

view to integrate it into your app start by adding it to your activities layout

تأكد من إنه مضاف في مكان سيسمح له بالرسم فوق كل طرق العرض الأخرى في المخطط

XML make sure it's added in a place that will cause it to be drawn over all the

ينبغي أيضاً أن تتأكد أن طريقة العرض حجمها مناسب لتغطي كامل الشاشة

other views in the layout you should also ensure that the view is sized to cover the full screen here I added as

هنا وضعته كتابع أخير child لمخطط الإطار frame layout

the last child of a frame layout and set

وضبطت الارتفاع والعرض ليماثل الأصل

its height and width to match parent

هذا سيضمن أنه سيرسم على كامل الشاشة وفوق كل شيء

this will ensure that it draws fullscreen and over everything now let's

الآن لنلق نظرة على فئة نشاطك

look at your activity class and inseong

بداخل onCreate الخاصة به ‫اجذب dismiss overlay view

create pull the dismiss overlay view out

خارج مخططك واضبط نص مقدمته

of your layout and set its intro text

هذا هو النص الذي سوف يظهر أول مرة يتم فيها تشغيل نشاطك كتراكب على باقي محتواك

this is text that will display the first time your activity runs as an overlay on

وينبغي أن يخبر المستخدم أنه يستطيع الضغط مطولاً للعودة إلى الشاشة الرئيسية

the rest of your content and should tell the user that they can long press to go

showIntroIfNecessary ثم استدعي والذي سوف يعرض تراكب المقدمة

back to home then call show intro if necessary that will display the intro

فقط لو كانت هذه هي المرة الأولى التي يتم تشغيل التطبيق فيها

overlay only if this is the first time the app is run next you need to wire it

بعد هذا، نحتاج لتوصيل هذا للعرض

up to display when your activity is long

حين يتم الضغط مطولاً على نشاطك

pressed using a gesture detector and a

GestureDetector باستخدام SimpleOnGestureListener و

simple on gesture listener using these

framework استخدام فئات

framework classes will ensure that the

سيضمن أن التوقيت حول الإيماءة يظل ثابتاً عبر كل التطبيقات

timing around the gesture feels consistent across all apps when you get

long press callback حين تحصل على

the long press callback call show on

استدعي Show في مخطط dismiss overlay

your dismiss overlay that will display

والذي سيعرض زر الخروج

the exit button if the user clicks the

لو نقر المستخدم على الزر فإن نشاطك سوف ينتهي

button your activity will be finished

ولكن لو لم يضغط على الزر

but if they don't click the button that

فإن مخطط الاستبعاد سيخفي نفسه وينتظر استدعاء الظهور القادم

is miss over they will hide itself and wait for the next show call finally

وأخيراً، مازلنا في نشاطك onTouchEvent تخطى طريقة

still in your activity override the on

receiveTouchEvents وتعدى GestureDetector إلى

touch event method and pass receive touch events into the gesture detector

GestureDetector لو أعاد true القيمة

if the gesture detector returns true you

ينبغي عليك أن تعيد القيمة true لا أن تتعدى الحدث

should return true and not pass the

إلى طريقة النشاط العادي onTouchEvent ‫لو أعاد GestureDetector القيمة false

event to the normal activity on touch event method if the gesture detector

استخدم النشاط العادي touch handling

returns false use the normal activity touch handling now let's talk about

الآن فلنتحدث عن شيء مختلف كيف تجعل تطبيقاتك تبدو جميلة

something different how to make your

على الشاشة المستديرة لجهاز Moto 360

apps look beautiful on the round screen of the Moto 360 first let's take a look

أولاً، لنلق نظرة على أبعاد شاشة جهاز الـ 360

at the screen dimensions of the 360 it's

إنها دائرة بقطر 320 بكسل بذقن سفلية توازي 30 بكسل

a circle with a diameter of 320 pixels with a 30 pixel chin at the bottom the

وبالتالي يبلغ النظام أن حجمها 320 في 290 بكسل

system therefore reports it's size is 320 by 2 90 pixels as we learned during

كما تعلمنا أثناء عملية تطويرنا فإن الذقن يمكن أن تسبب نتائج غير مقصودة

our own development process the chain can cause some unintended results when

في استيراد تراكيب موجودة

porting existing layouts looking at the

بالنظر إلى بطاقات الإجراءات في الدفق على سبيل المثال

action cards in the stream for example

نريد وضع أيقونة الإجراء في وسط الشاشة

we wanted to place the action icon in

ولكن حين نضبط layout gravity ‫في وضع التوسيط الرأسي

the center of the screen but when we set the layout gravity to center vertical

فإن الدائرة الزرقاء ستزاح ‫بمقدار 15 بكسل

the blue circle is offset by 15 pixels

فقررنا أن من الأفضل الحفاظ على توقع وسط التخطيط

we decided that it would be best to preserve the expectation of the center

ليكون في منتصف دائرة الشاشة في نسق جهازنا الافتراضي الذي ذكرناه سابقاً

of a layout be in the center of the screen circle and our device the faulty

سمة windowOverscan معدة ‫view hierarchy الآن جذر

mentioned earlier the window overscan attribute is set and the root of the

بالتالي يتم قياسه بـ 320 في 320 pixel

view hierarchy is there for a measured at 320 by 320 pixels

هذا يتسبب في أن يكون عرض تطبيقاتك في المستوى العلوي

this causes your apps topple view to be

يقاس بنفس الطريقة 320 في 320 ‫بدلاً من 320 في 290

measured at the same 320 by 320 instead of 320 by 2 90 and centering in your

والتوسيط في مخططك يعمل كما هو متوقع

layout works as expected

كيف يمكنك معرفة أن نشاطك يعمل على الشاشة المستديرة؟

how can you detect that your activity is running on a round screen your views can

تستطيع طرق عرضك ‫أن تطلب تطبيق window insets

request to apply window in sets and get

وتحصل على call back ‫مع window insets object

a callback with a window in sets object

هذا يخبرك بشكل الشاشة وعلى جهاز Moto 360 ‫يخبرك أن الـ inset السفلى بقياس 30 بكسل

that tells you the shape of the screen and on the Moto 360 it tells you that the bottom inside is 30 pixels you

ينبغي أن تستخدم هذه القيمة أينما احتجت للتخطيط حول الذقن

should use this value wherever you need to layout around the chin using the in

باستخدام تاريخ insets هنا سوف يضمن

sets passed in here will ensure that

تطبيقك رائعاً علىأن يبدو ‫أي جهاز في المستقبل

your app looks great on any future device to save you from writing all this

لإنقاذك من كتابة كل هذا الكود ‫أضفنا طريقة عرض اسمها WatchViewStub

boilerplate code we added a view called

مما يسمح بتضخيم أحد مخططين

watch view stub which allows you to inflate one of two different layouts

بناءً على إذا ما كان تطبيقك يعمل على شاشات أجهزة مستطيلة أو دائرية

depending on whether your app is running on a rectangular or round device you can

تستطيع استخدام WatchViewStub ‫كجذر لأي view hierarchy

use a watch view stub as the root of any

تريده أن يبدو مختلفاً على الشاشات المستديرة

view hierarchy you want to look different on round screens to use it

لاستخدامها، أنشئ stub جديد في نشاطك ‫أو fragments onCreate

create a new stub in your activity or fragments on create once you've done

بمجرد أن تفعل ذلك ‫ستحتاج أن تعطي الـ stub خاصتك مخططين

that you'll need to give your stub two

أحدهما يقوم بالتضخيم للأجهزة المستديرة والآخر يقوم بالتضخيم على الأجهزة المستطيلة هناك شيء واحد مزعج مع ذلك لأن هذه المخططات ليست مضخمة

layouts 1 to inflate for round devices and one to inflate on rectangular devices there's one snag though because these layouts aren't inflated until the

قبل أن يتم إرفاق العرض مع الـ hierarchy لا تستطيع الدخول لطرق العرض التابعة بعد

view is attached to the hierarchy you can't access the child's views yet

بدلاً من هذا، ‫قم بإرفاق OnLayoutInflatedListener

instead attach an on layout inflated

والذي سيتم استدعاؤه ‫حين يتم تضخيم المخطط الداخلي المناسب

listener which will be called when the appropriate inner layout has been

كلا dismiss overlay view ‫وهذا الـ WatchViewStub

inflated both dismiss overlay view and

يمكن أن تجدهما في مكتبة دعم الأجهزة القابلة للارتداء

this watch viewstub can be found in the wearable support library which also

والتي تقدم أيضاً مدير تخطيط جديد ‫يسمى box inset layout

provides a new layout manager called box

إنه يوسع تخطيط الإطار ويسمح للمطورين

inset layout it extends frame layout and

باستخدام نفس المخطط على الشاشات المستطيلة والدائرية

allows developers to use the same layout on both rectangular around screens in

في هذا المثال لدينا عرض نصي في الركن العلوي الأيسر

this example we have a textview at the

وزر الإلغاء في الركن السفلي الأيسر ‫وزر OK في الركن السفلي الأيمن

top left a cancel button at the bottom left and an OK button at the bottom

حين يتم استخدام نفس المخطط على شاشة دائرية

right when the same layout is used on a

نريد أن توضع عناصر العرض على حافة الدائرة وليس المربع

round screen we want the view elements to be placed on the edge of the circle not the square this is achieved by

يتم هذا بإضافة السمة القابلة للارتداء ‫وهي layout_box إلى مخططك

adding the wearable layout box attribute

إنها تحدد مجموعة الحواف الأيسر والأعلى والأيمن والأسفل

to your layout it defines the set of edges left top right and bottom to be

ليتم تراصفها مع الصندوق الداخلي للدائرة

aligned with the inside box of the

هذا يجعل من السهل جعل الخلفيات تناسب الدائرة الكاملة

circle this makes it easy to have backgrounds bleed into the full circle

ولكنها تحتوي على عناصر أخرى في الأماكن غير المقطوعة

but contain other elements - non clipped

هنا يمكنك أن ترى عرض نصي موضوع في صندوق في مربع المنتصف للشاشة الدائرية

areas here you can see a textview boxed into the center square of the round

في الشاشة المربعة ‫يتم تجاهل سمة layout box

screen on a square screen the layout box parameter is ignored I'm really excited

أنا متحمس حقاً لهذه المنصة الجديدة

about the new platform and I hope you

وأتمنى أن تكونوا كلكم كذلك لا أستطيع الانتظار لأرى التطبيقات التي ستصنعوها

all are - I can't wait to see what apps you build

Similar videos:

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201480% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201476% match

Under the Hood of Android Auto
Google for Developers
17.5K views 114 likes 10 dislikes 25 Jun 201471% match

Designing for Android Wear
Google for Developers
26K views 115 likes 5 dislikes 25 Jun 201465% match

Building Apps For Android TV
Google for Developers
18K views 85 likes 6 dislikes 25 Jun 201461% match

Android Wear: Always-On Apps
Google for Developers
28.1K views 191 likes 3 dislikes 21 May 201560% match

DevBytes - Android Wear: Developer Preview
Android Developers
79.3K views 447 likes 17 dislikes 18 Mar 201458% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201458% match

DevBytes - Android Wear: Receiving Voice Replies
Android Developers
46K views 255 likes 10 dislikes 18 Mar 201458% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201450% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201445% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201442% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201441% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201441% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201438% match

DevBytes: Watch Faces for Android Wear
Google for Developers
34.2K views 203 likes 1 dislikes 10 Dec 201438% match

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201437% match

DevBytes: Android Vector Graphics
Google for Developers
60.9K views 640 likes 13 dislikes 17 Dec 201435% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201435% match

Maps Live: Getting Started with Markers on Android
Google for Developers
91.1K views 197 likes 6 dislikes 20 Jan 201433% match

Google I/O 2014 - What's new in Android
Google for Developers
112.7K views 1K likes 20 dislikes 25 Jun 201432% match

Google I/O 2014 - Cardboard: VR for Android
Google for Developers
159.6K views 853 likes 15 dislikes 27 Jun 201432% match

Building location-based apps with the Places API
Google for Developers
79.8K views 530 likes 22 dislikes 25 Jun 201431% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201430% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201630% match

Android Performance Patterns: Why 60fps?
Google for Developers
52.5K views 562 likes 22 dislikes 06 Jan 201530% match

DevBytes: Google Fit APIs for Android - Setup and Sensors
Google for Developers
49.3K views 184 likes 21 dislikes 28 Oct 201430% match

Google I/O 2014 - Less code, more services, better Android apps
Google for Developers
38.6K views 222 likes 3 dislikes 27 Jun 201430% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201430% match

DevBytes: Android L Developer Preview
Google for Developers
46.3K views 801 likes 13 dislikes 18 Jul 201429% match

Settings Privacy About Contact Donate