홈페이지>프로그래밍 관련>자바 소스 코드
다운로드

MaterialViewPager

사용하기 쉬운 머티리얼 디자인 ViewPager 라이브러리

견본

샘플 YouTube 동영상을 살펴보세요. YouTube 링크

다운로드

귀하의 모듈에서 

compile ' com.github.florent37:materialviewpager:1.2.3 '

// dependencies
compile ' com.flaviofaria:kenburnsview:1.0.7 '
compile ' com.jpardogo.materialtabstrip:library:1.1.0 '
compile ' com.github.bumptech.glide:glide:4.0.0 '

용법

활동 레이아웃에 MaterialViewPager 추가 

< com .github.florent37.materialviewpager.MaterialViewPager
    android : id = " @+id/materialViewPager "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    app : viewpager_logo = " @layout/header_logo "
    app : viewpager_logoMarginTop = " 100dp "
    app : viewpager_color = " @color/colorPrimary "
    app : viewpager_headerHeight = " 200dp "
    app : viewpager_headerAlpha = " 1.0 "
    app : viewpager_hideLogoWithFade = " false "
    app : viewpager_hideToolbarAndTitle = " true "
    app : viewpager_enableToolbarElevation = " true "
    app : viewpager_parallaxHeaderFactor = " 1.5 "
    app : viewpager_headerAdditionalHeight = " 20dp "
    app : viewpager_displayToolbarWhenSwipe = " true "
    app : viewpager_transparentToolbar = " true "
    app : viewpager_animatedHeaderImage = " true "
    app : viewpager_disableToolbar = " false "

    />

header_logo.xml 포함 

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< TextView xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/logo_white "
    android : layout_width = " wrap_content "
    android : layout_height = " @dimen/materialviewpager_logoHeight "
    android : text = " Material is Good "
    android : textSize = " 30sp "
    android : textColor = " @android:color/white " />

Android Studio 미리보기에서 다음을 확인할 수 있습니다.

아름다운 화면을 얻고 미리보기를 활성화하려면 테마를 따를 수 있습니다. 

< style name = " AppBaseTheme " parent = " @style/Theme.AppCompat.Light " >
</ style >

< style name = " AppTheme " parent = " AppBaseTheme " >

   < item name = " android:textColorPrimary " >@android:color/white</ item >
   < item name = " drawerArrowStyle " >@style/DrawerArrowStyle</ item >
   < item name = " android:windowTranslucentStatus " tools : targetApi = " 21 " >true</ item >

   < item name = " android:windowContentOverlay " >@null</ item >
   < item name = " windowActionBar " >false</ item >
   < item name = " windowNoTitle " >true</ item >

   <!-- Toolbar Theme / Apply white arrow -->
   < item name = " colorControlNormal " >@android:color/white</ item >
   < item name = " actionBarTheme " >@style/AppTheme.ActionBarTheme</ item >

   <!-- Material Theme -->
   < item name = " colorPrimary " >@color/colorPrimary</ item >
   < item name = " colorPrimaryDark " >@color/colorPrimaryDark</ item >
   < item name = " colorAccent " >@color/accent_color</ item >

   < item name = " android:navigationBarColor " tools : targetApi = " 21 " >@color/navigationBarColor</ item >
   < item name = " android:windowDrawsSystemBarBackgrounds " tools : targetApi = " 21 " >true</ item >

</ style >

< style name = " AppTheme.ActionBarTheme " parent = " @style/ThemeOverlay.AppCompat.ActionBar " >
    <!-- White arrow -->
    < item name = " colorControlNormal " >@android:color/white</ item >
</ style >

< style name = " DrawerArrowStyle " parent = " Widget.AppCompat.DrawerArrowToggle " >
    < item name = " spinBars " >true</ item >
    < item name = " color " >@color/drawerArrowColor</ item >
</ style >

MaterialViewPager 검색

MaterialViewPager를 일반적인 Android View로 사용하고 findViewById로 가져올 수 있습니다. 

 public class MainActivity extends ActionBarActivity {

    private MaterialViewPager mViewPager ;

    @ Override
    protected void onCreate ( Bundle savedInstanceState ) {
        super . onCreate ( savedInstanceState );
        setContentView ( R . layout . activity_main );

        mViewPager = ( MaterialViewPager ) findViewById ( R . id . materialViewPager );
    }
}

맞춤화

먼저 색상과 키를 선택하세요. 

< com .github.florent37.materialviewpager.MaterialViewPager
        android : id = " @+id/materialViewPager "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        ...
        app : viewpager_color = " @color/colorPrimary "
        app : viewpager_headerHeight = " 200dp "
        ...
        />

로고 설정 

< com .github.florent37.materialviewpager.MaterialViewPager
        ...
        app : viewpager_logo = " @layout/header_logo " <-- look custom logo layout
        app : viewpager_logoMarginTop = " 100dp " <-- look at the preview
        ...
        />

제목 표시줄 로고

로고 레이아웃은 다음과 같아야 합니다.

  • layout_height="@dimen/materialviewpager_logoHeight"

header_logo.xml 

< ImageView xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/logo_white "
    android : layout_width = " 200dp "
    android : layout_height = " @dimen/materialviewpager_logoHeight "
    android : fitsSystemWindows = " true "
    android : adjustViewBounds = " true "
    android : layout_centerHorizontal = " true "
    android : src = " @drawable/logo_white " />
< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideLogoWithFade = " false "
        ...
        />

페이딩 로고

header_logo.xml 

< FrameLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    android : layout_width = " 80dp "
    android : layout_height = " 80dp "
    android : layout_centerHorizontal = " true "
    android : background = " @drawable/circle " >

    < ImageView
        android : layout_width = " 30dp "
        android : layout_height = " 30dp "
        android : fitsSystemWindows = " true "
        android : adjustViewBounds = " true "
        android : layout_gravity = " center "
        android : src = " @drawable/flying " />
</ FrameLayout >
< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideLogoWithFade = " true "
        ...
        />

툴바 애니메이션

로고 및 툴바 숨기기 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideToolbarAndTitle = " true "
        ...
        />

고정 도구 모음 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_hideToolbarAndTitle = " false "
        ...
        />

투명한 도구 모음 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_transparentToolbar = " true "
        ...
        />

헤더 레이아웃

헤더를 교체할 수 있습니다. 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_header = " @layout/myHeader "
        ...
        />

헤더 이동

또는 KenBurns 애니메이션과 함께 기본 헤더를 사용하세요. 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_animatedHeaderImage = " true "
        ...
        />

정적 헤더

또는 단순히 ImageView를 헤더로 사용하십시오. 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_animatedHeaderImage = " false "
        ...
        />

사용자 정의 탭 표시줄

자신만의 탭 표시줄을 설정할 수 있습니다. 기본적으로 2가지 구현을 제공했습니다.

기준 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_pagerTitleStrip = " @layout/material_view_pager_pagertitlestrip_standard "
        ...
        />

뉴스 가판대 

< com .github.florent37.materialviewpager.MaterialViewPager`
        ...
        app : viewpager_pagerTitleStrip = " @layout/material_view_pager_pagertitlestrip_newstand "
        ...
        />

또는 자신만의 탭바를 만드세요

PagerSlidingTabStrip을 사용하여 나만의 레이아웃 만들기

my_tabs.xml 

< com .astuetz.PagerSlidingTabStrip
    xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    xmlns : tools = " http://schemas.android.com/tools "
    android : id = " @id/materialviewpager_pagerTitleStrip "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    app : pstsPaddingMiddle = " true "
    app : pstsDividerPadding = " 20dp "
    app : pstsIndicatorColor = " #FFF "
    app : pstsIndicatorHeight = " 2dp "
    app : pstsShouldExpand = " true "
    app : pstsTabPaddingLeftRight = " 10dp "
    app : pstsTabTextAllCaps = " true "
    tools : background = " #A333 "
     />

id="@id/materialviewpager_pagerTitleStrip"을 제공하는 것을 잊지 마세요. 

< com .github.florent37.materialviewpager.MaterialViewPager
        ...
        app : viewpager_pagerTitleStrip = " @layout/my_tabs "
        ...
        />

헤더 애니메이션

ViewPager에 청취를 추가하기만 하면 됩니다. 

 mViewPager . setMaterialViewPagerListener ( new MaterialViewPager . Listener () {
            @ Override
            public HeaderDesign getHeaderDesign ( int page ) {
                switch ( page ) {
                    case 0 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . blue ,
                                "http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg" );
                    case 1 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . green ,
                                "https://fs01.androidpit.info/a/63/0e/android-l-wallpapers-630ea6-h900.jpg" );
                    case 2 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . cyan ,
                                "http://www.droid-life.com/wp-content/uploads/2014/10/lollipop-wallpapers10.jpg" );
                    case 3 :
                        return HeaderDesign . fromColorResAndUrl (
                                R . color . red ,
                                "http://www.tothemobile.com/wp-content/uploads/2014/07/original.jpg" );
                }

                //execute others actions if needed (ex : modify your header logo)

                return null ;
            }
        });

사용 가능 

 HeaderDesign . fromColorAndUrl ( Color . BLUE , "http:...);
HeaderDesign.fromColorResAndUrl(R.color.blue," http :...);
HeaderDesign . fromColorAndDrawable ( Color . BLUE , myDrawable );
HeaderDesign . fromColorResAndDrawable ( R . color . blue , myDrawable );

툴바 

 Toolbar toolbar = mViewPager . getToolbar ();

if ( toolbar != null ) {
     setSupportActionBar ( toolbar );

     ActionBar actionBar = getSupportActionBar ();
     actionBar . setDisplayHomeAsUpEnabled ( true );
     actionBar . setDisplayShowHomeEnabled ( true );
     actionBar . setDisplayShowTitleEnabled ( true );
     actionBar . setDisplayUseLogoEnabled ( false );
     actionBar . setHomeButtonEnabled ( true );
}

뷰페이저 

 ViewPager viewPager = mViewPager . getViewPager ();
viewPage . setAdapter (...);

//After set an adapter to the ViewPager
mViewPager . getPagerTitleStrip (). setViewPager ( mViewPager . getViewPager ());

RecyclerView 

 mRecyclerView . addItemDecoration ( new MaterialViewPagerHeaderDecorator ());
mRecyclerView . setAdapter ( yourAdapter );

스크롤뷰

ScrollView는 NestedScrollView여야 합니다. 

 MaterialViewPagerHelper . registerScrollView ( getActivity (), mScrollView , null );

그리고 @layout/material_view_pager_placeholder`를 첫 번째 하위 항목으로 포함합니다. 

< android .support.v4.widget.NestedScrollView
    xmlns : android = " http://schemas.android.com/apk/res/android "
    android : id = " @+id/scrollView "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < LinearLayout
        android : layout_width = " match_parent "
        android : layout_height = " wrap_content "
        android : orientation = " vertical " >

        < include layout = " @layout/material_view_pager_placeholder " />

        ...your content...

    </ LinearLayout >
</ android .support.v4.widget.NestedScrollView>

변경 로그

1.2.0

  • Adapter 대신 헤더 데코레이터

1.1.3

  • 이제 헤더를 클릭할 수 있습니다.
  • 일부 스크롤 문제를 해결했습니다.

1.1.2

  • 빠른 스크롤 수정
  • app:viewpager_viewpager를 사용하여 사용자 정의 viewpager를 설정할 수 있습니다(viewpager ID는 id/materialviewpager_viewpager여야 함)

1.1.0

  • 방향 변경 수정
  • 헤더 이미지 표시 수정
  • 이제 헤더의 요소를 클릭할 수 있습니다.
  • 통지헤더변경됨

1.0.8

  • 추가된 속성 viewpager_disableToolbar

1.0.7

  • 저해상도 버그 수정

1.0.6

  • transparentToolbar 속성 추가
  • 추가된 속성 animationHeaderImage
  • 페이지가 너무 작아서 스크롤할 수 없는 버그 수정
  • 수정된 HeaderDesign 구현

1.0.5

  • 더 부드러운 도구 모음 스크롤
  • fitSystemWindow 관련 버그 수정
  • 헤더 색상 및 이미지를 수정하기 위해 HeaderDesign을 추가했습니다.
  • displayToolbarWhenSwipe 속성을 추가했습니다.

1.0.4

수정됨:

  • 방향이 변경됨
  • 메모리 누수
  • NineOldAndroid가 포함된 Android >2.3
  • ListView 사용이 제거되었습니다.

1.0.3

수정됨: 빠른 스크롤로 인해 도구 모음 높이가 다양해짐

RecyclerViewMaterialAdapter는 사용자 정의 자리 표시자 셀 수를 처리할 수 있습니다(GridLayoutManager에 유용함) 

 public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )

1.0.2

추가된 속성 

 app : viewpager_parallaxHeaderFactor = "1.5"
app : viewpager_headerAdditionalHeight = "20dp"

parallaxHeaderFactor 시차 헤더 스크롤 속도 수정(KenBurns 효과 속도 아님) parallaxHeaderFactor 첫 번째 카드 보기 뒤에 표시되는 헤더 레이아웃의 높이 설정

hideToolbarAndTitle="true"일 때 여러 번 아래로 스크롤하고 위로 스크롤할 때 발생하는 문제가 해결되었습니다.

1.0.1

추가된 속성 

 viewpager_headerAlpha = "0.6"

지역 사회

기여자를 찾고 있다면 자유롭게 포크해 보세요!

귀하의 애플리케이션에서 내 라이브러리를 사용하고 있다면 알려주세요. 이 README에서 공유하겠습니다.

종속성

  • 글라이드(Bumptech 제품)
  • KenBurnsView(flavioarfaria에서)
  • PagerSlidingTabStrip 재질(jpardogo에서, astuetz에서 분기됨)

크레딧

저자: 플로랑 샴피니 http://www.florentchampigny.com/

블로그 : http://www.tutos-android-france.com/

피쉬스 고원 모토 : https://www.fiches-plateau-moto.fr/

특허 

 Copyright 2015 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체