مقدمة بسيطة لتطبيق تصميم متعدد الأبعاد مع رسوم متحركة رائعة وواجهة برمجة التطبيقات (API) بطلاقة.
مستوحاة جدًا من مقدمات تطبيقات Google.
التطبيق التجريبي متاح على Google Play:
شريحة بسيطة | شريحة مخصصة | تأثير تتلاشى | طلب الإذن |
---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
مقدمة المواد متاحة على jitpack.io .
أضف هذا في ملف build.gradle
الجذري ( وليس ملف build.gradle
الخاص بالوحدة النمطية):
allprojects {
repositories {
maven { url ' https://jitpack.io ' }
}
}
أضف هذا في ملف build.gradle
الخاص بوحدتك:
dependencies {
implementation ' com.heinrichreimersoftware:material-intro:x.y.z '
}
يجب أن يمتد النشاط IntroActivity
وأن يكون له موضوع يمتد @style/Theme.Intro
:
public class MainIntroActivity extends IntroActivity {
@ Override
protected void onCreate ( Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
// Add slides, edit configuration...
}
}
< manifest ...>
< application ...>
< activity
android : name = " .MainIntroActivity "
android : theme = " @style/Theme.Intro " />
</ application >
</ manifest >
(ما لم يُذكر خلاف ذلك، يجب إدخال جميع استدعاءات الطرق التالية في onCreate()
الخاص بالنشاط.)
يحتوي Material-intro على منشئي أنماط سلسين لكل من شريحة النص/الصورة البسيطة، كما هو موضح في تطبيقات Google، وللشرائح التي تحتوي على Fragment
مخصص أو مورد تخطيط.
لا تتردد في إرسال مشكلة أو طلب سحب إذا كنت تعتقد أن أيًا من أنواع الشرائح مفقودة.
SimpleSlide
):شريحة قياسية تحتوي على عنوان ووصف قصير وصورة مثل مقدمات Google.
addSlide ( new SimpleSlide . Builder ()
. title ( R . string . title_1 )
. description ( R . string . description_1 )
. image ( R . drawable . image_1 )
. background ( R . color . background_1 )
. backgroundDark ( R . color . background_dark_1 )
. scrollable ( false )
. permission ( Manifest . permission . CAMERA )
. build ());
FragmentSlide
): شريحة مخصصة تحتوي على Fragment
أو مورد تخطيط.
addSlide ( new FragmentSlide . Builder ()
. background ( R . color . background_2 )
. backgroundDark ( R . color . background_dark_2 )
. fragment ( R . layout . fragment_2 , R . style . FragmentTheme )
. build ());
(عند استخدام FragmentSlide
مع Fragment
، يجب عليك توسيع SlideFragment
لتشمل استدعاءات التنقل الوكيل لنشاط المقدمة.)
Slide
):الشريحة الأساسية. إذا كنت تريد تعديل ما يظهر في شريحتك، فهذه هي الطريقة الصحيحة.
التحكم في سلوك الزر الأيسر أو إخفائه/إظهاره.
/* Show/hide button */
setButtonBackVisible ( true );
/* Use skip button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_SKIP );
/* Use back button behavior */
setButtonBackFunction ( BUTTON_BACK_FUNCTION_BACK );
التحكم في سلوك الزر الأيمن أو إخفائه/إظهاره.
/* Show/hide button */
setButtonNextVisible ( true );
/* Use next and finish button behavior */
setButtonNextFunction ( BUTTON_NEXT_FUNCTION_NEXT_FINISH );
/* Use next button behavior */
setButtonNextFunction ( BUTTON_NEXT_FUNCTION_NEXT );
تغيير مظهر زر "الحث على اتخاذ إجراء":
/* Show/hide button */
setButtonCtaVisible ( getStartedEnabled );
/* Tint button text */
setButtonCtaTintMode ( BUTTON_CTA_TINT_MODE_TEXT );
/* Tint button background */
setButtonCtaTintMode ( BUTTON_CTA_TINT_MODE_BACKGROUND );
/* Set custom CTA label */
setButtonCtaLabel ( R . string . start )
/**/
setButtonCtaClickListener ( new View . OnClickListener () {
});
عرض نشاط المقدمة في وضع ملء الشاشة. يؤدي هذا إلى إخفاء شريط الحالة.
public class MainIntroActivity extends IntroActivity {
@ Override protected void onCreate ( Bundle savedInstanceState ){
setFullscreen ( true );
super . onCreate ( savedInstanceState );
...
}
}
تأكد من استدعاء setFullscreen()
قبل الاتصال بـ super.onCreate()
اضبط المدة التي يستغرقها تمرير شريحة واحدة.
setPageScrollDuration ( 500 );
(يتم تعديل مدة تمرير الصفحة ديناميكيًا عند التمرير في أكثر من موضع لتعكس الفترات الديناميكية من مستندات التصميم متعدد الأبعاد. الصيغة الدقيقة لحساب مدة التمرير هي duration * (distance + sqrt(distance)) / 2
.)
هناك ثلاث طرق لمنع التنقل في الشريحة:
SlideFragment
(باستخدام FragmentSlide
) عن طريق تجاوز أساليب canGoForward()
/ canGoBackward()
.SimpleSlide
عن طريق إعداد SimpleSlide.Builder#canGoForward(boolean)
/ SimpleSlide.Builder#canGoBackward(boolean)
. (إذا تم تعيين إذن واحد على الأقل على SimpleSlide
، فسيتم حظر التنقل تلقائيًا حتى يتم منح كل إذن.)IntroActivity
الخاص بك عن طريق تعيين سياسة NavigationPolicy
: setNavigationPolicy ( new NavigationPolicy () {
@ Override public boolean canGoForward ( int position ) {
return true ;
}
@ Override public boolean canGoBackward ( int position ) {
return false ;
}
});
قم بالتنقل عبر المقدمة يدويًا باستخدام إحدى الطرق التالية، على سبيل المثال، من خلال رد اتصال المستمعين. سيحترم كل منهم إعدادات التنقل المحظورة.
/* Scroll to any position */
goToSlide ( 5 );
/* Scroll to the next slide in the intro */
nextSlide ();
/* Scroll to the previous slide in the intro */
previousSlide ();
/* Scroll to the last slide of the intro */
goToLastSlide ();
/* Scroll to the first slide of the intro */
goToFirstSlide ();
قم بالتمرير تلقائيًا عبر المقدمة حتى يتفاعل المستخدم مع المقدمة.
/* Start an auto slideshow with 2500ms delay between scrolls and infinite repeats */
autoplay ( 2500 , INFINITE );
/* Start an auto slideshow with default configuration */
autoplay ();
/* Cancel the slideshow */
cancelAutoplay ()
إذا أدى أي مما سبق إلى إرجاع false
عندما يحاول المستخدم الانتقال إلى شريحة، فسيتم تشغيل رد اتصال OnNavigationBlockedListener
الذي يمكنك استخدامه لعرض رسالة. بالإضافة إلى ذلك، يمكنك إضافة ViewPager.OnPageChangeListener
القديم للاستماع إلى تمريرات الصفحة:
addOnNavigationBlockedListener ( new OnNavigationBlockedListener () {
@ Override public void onNavigationBlocked ( int position , int direction ) { ... }
});
addOnPageChangeListener ( new ViewPager . OnPageChangeListener (){
@ Override public void onPageScrolled ( int position , float positionOffset , int positionOffsetPixels ) { ... }
@ Override public void onPageSelected ( int position ) { ... }
@ Override public void onPageScrollStateChanged ( int state ) { ... }
});
يمكنك التحقق مما إذا كان المستخدم قد ألغى المقدمة (بالضغط على "رجوع") أو أنهىها بما في ذلك جميع الشرائح. ما عليك سوى استدعاء النشاط باستخدام startActivityForResult(intent, REQUEST_CODE_INTRO);
ثم استمع للنتيجة:
@ Override
protected void onActivityResult ( int requestCode , int resultCode , Intent data ) {
super . onActivityResult ( requestCode , resultCode , data );
if ( requestCode == REQUEST_CODE_INTRO ) {
if ( resultCode == RESULT_OK ) {
// Finished the intro
} else {
// Cancelled the intro. You can then e.g. finish this activity too.
finish ();
}
}
}
يمكنك بسهولة تحقيق تأثير المنظر الجميل لأي شريحة باستخدام إما ParallaxFrameLayout.java
أو ParallaxLinearLayout.java
أو ParallaxRelativeLayout.java
وتحديد layout_parallaxFactor
لأبناءه المباشرين. العامل الأعلى يعني تأثير اختلاف المنظر أقوى، 0
يعني عدم وجود تأثير اختلاف المنظر على الإطلاق.
< com .heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout
android : layout_width = " match_parent "
android : layout_height = " match_parent "
... >
< TextView
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : layout_parallaxFactor = " 0 "
... />
< ImageView
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : layout_parallaxFactor = " 1.25 "
... />
</ com .heinrichreimersoftware.materialintro.view.parallax.ParallaxLinearLayout>
تحقق من العرض التوضيحي "المقصف" للحصول على مثال للتخطيط.
إذا كنت تريد عرض المقدمة فقط عند أول تشغيل للتطبيق، فيمكنك استخدام onActivityResult()
لتخزين تفضيل مشترك عندما ينتهي المستخدم من المقدمة.
راجع التطبيق التجريبي للحصول على نموذج لتطبيق شاشة البداية:
راجع قسم الإصدارات لسجلات التغيير.
يستخدم Material-intro الملفات مفتوحة المصدر التالية:
MIT License
Copyright (c) 2017 Jan Heinrich Reimer
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.