แอปการออกแบบวัสดุที่เรียบง่ายพร้อมแอนิเมชั่นสุดเจ๋งและ API ได้อย่างคล่องแคล่ว
ได้รับแรงบันดาลใจมากจากการแนะนำแอปของ Google
แอปสาธิตพร้อมใช้งานบน Google Play:
สไลด์ง่ายๆ | สไลด์ที่กำหนดเอง | เอฟเฟกต์จางลง | ขออนุญาต |
---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
Material-intro มีอยู่ใน jitpack.io
เพิ่มสิ่งนี้ลงในไฟล์ root 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.