تنزيل MaterialViewPager - تنزيل كود مصدر MaterialViewPager

MaterialViewPager

مكتبة المواد Design ViewPager سهلة الاستخدام

عينة

وإلقاء نظرة على عينة فيديو يوتيوب: رابط يوتيوب

تحميل

في الوحدة الخاصة بك

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 Preview:

للحصول على شاشة جميلة وتمكين المعاينة، قد يتبع الموضوع الخاص بك

< 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 عادي، والحصول عليه من خلال 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 "
        ...
        />

شريط علامات التبويب المخصص

يمكنك تعيين شريط علامات التبويب الخاص بك، بشكل افتراضي قمت بتوفير تطبيقين

معيار

< 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 viewPager = mViewPager . getViewPager ();
viewPage . setAdapter (...);

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

عرض إعادة التدوير

 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

ديكور الرأس بدلاً من المحول

1.1.3

أصبح الرأس الآن قابلاً للنقر
إصلاح بعض مشاكل التمرير

1.1.2

إصلاح التمرير السريع
يمكن تعيين عارض عرض مخصص باستخدام التطبيق:viewpager_viewpager (يجب أن يكون معرف عارض العرض هو id/materialviewpager_viewpager)

1.1.0

إصلاح تغيير الاتجاه
إصلاح عرض صورة الرأس
العناصر الموجودة في الرأس أصبحت الآن قابلة للنقر عليها
notifyHeaderChanged

1.0.8

تمت إضافة السمة viewpager_disableToolbar

1.0.7

إصلاح الخلل على دقة منخفضة

1.0.6

تمت إضافة سمة شفافة لشريط الأدوات
تمت إضافة السمة المتحركة لصورة الرأس
تم إصلاح الخلل عندما تكون الصفحة صغيرة جدًا بحيث لا يمكن تمريرها
تعديل تطبيق HeaderDesign

1.0.5

التمرير على شريط الأدوات أكثر سلاسة
تم إصلاح الخلل في fitSystemWindow
تمت إضافة HeaderDesign لتعديل لون الرأس والصورة
تمت إضافة سمة DisplayToolbarWhenSwipe

1.0.4

مُثَبَّت :

تغير التوجه
تسرب الذاكرة
أندرويد> 2.3 مع نظام NineOldAndroid
تمت إزالة استخدام 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 قم بإعداد ارتفاع تخطيط الرأس المعروض خلف عرض البطاقات الأولى

تم إصلاح المشكلة عند التمرير لأسفل والتمرير لأعلى عدة مرات أثناء إخفاءToolbarAndTitle="true"

1.0.1

السمات المضافة

 viewpager_headerAlpha = "0.6"

مجتمع

أبحث عن المساهمين، لا تتردد في مفترق!

أخبرني إذا كنت تستخدم مكتبتي في تطبيقك، فسوف أشاركها في هذا الملف التمهيدي

التبعيات

الإنزلاق (من Bumptech)
KenBurnsView (من فلافيوارفاريا)
مادة 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.

يوسع