material intro
Release 2.0.0
멋진 애니메이션과 유창한 API를 갖춘 간단한 머티리얼 디자인 앱 소개입니다.
Google의 앱 소개에서 많은 영감을 받았습니다.
Google Play에서 데모 앱을 사용할 수 있습니다.
| 간단한 슬라이드 | 맞춤 슬라이드 | 페이드 효과 | 권한 요청 |
|---|---|---|---|
SimpleSlide.java | FragmentSlide.java | IntroActivity.java | SimpleSlide.java |
Material-intro는 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 > (달리 언급하지 않는 한, 다음 메소드 호출은 모두 Activity의 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 ()); ( Fragment 와 함께 FragmentSlide 사용하는 경우 소개 활동에 대한 프록시 탐색 호출을 위해 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 );
...
}
} super.onCreate() 호출하기 전에 setFullscreen() 호출해야 합니다.
단일 슬라이드 스크롤에 걸리는 시간을 조정합니다.
setPageScrollDuration ( 500 ); (페이지 스크롤 기간은 머티리얼 디자인 문서의 동적 기간을 반영하기 위해 두 개 이상의 위치를 스크롤할 때 동적으로 조정됩니다. 스크롤 기간을 계산하는 정확한 공식은 duration * (distance + sqrt(distance)) / 2 입니다.)
슬라이드 탐색을 차단하는 방법에는 세 가지가 있습니다.
canGoForward() / canGoBackward() 메서드를 재정의하여 SlideFragment ( FragmentSlide 사용)에서.SimpleSlide 의 경우 SimpleSlide.Builder#canGoForward(boolean) / SimpleSlide.Builder#canGoBackward(boolean) 설정합니다. ( SimpleSlide 에 하나 이상의 권한이 설정된 경우 모든 권한이 부여될 때까지 탐색이 자동으로 차단됩니다.)NavigationPolicy 를 설정하여 IntroActivity 에서 다음을 수행합니다. 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>레이아웃 예는 "Canteen" 데모를 확인하세요.
앱을 처음 시작할 때만 소개를 표시하려면 사용자가 소개를 마쳤을 때 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.
