MaterialViewPager
1.2.0
Material Design ViewPager ไลบรารี่ที่ใช้งานง่าย
และรับชมตัวอย่างวิดีโอ Youtube : Youtube Link
ในโมดูลของคุณ
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 เป็น 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
...
/>เค้าโครงโลโก้ของคุณจะต้อง
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 "
...
/>Create your own layout using a 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 ()); 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>ที่ตายตัว :
แก้ไขแล้ว : การเลื่อนอย่างรวดเร็วส่งผลให้มีความสูงของแถบเครื่องมือที่แตกต่างกัน
RecyclerViewMaterialAdapter สามารถจัดการจำนวนเซลล์ตัวยึดตำแหน่งที่กำหนดเอง (มีประโยชน์สำหรับ GridLayoutManager)
public RecyclerViewMaterialAdapter ( RecyclerView . Adapter adapter , int placeholderSize )คุณสมบัติที่เพิ่มเข้ามา
app : viewpager_parallaxHeaderFactor = "1.5"
app : viewpager_headerAdditionalHeight = "20dp"parallaxHeaderFactor แก้ไขความเร็วของการเลื่อนส่วนหัวของพารัลแลกซ์ (ไม่ใช่ความเร็วของเอฟเฟกต์ KenBurns) parallaxHeaderFactor ตั้งค่าความสูงของเค้าโครงของส่วนหัวที่แสดงด้านหลังมุมมองการ์ดแรก
แก้ไขปัญหาเมื่อเลื่อนลงและเลื่อนขึ้นหลายครั้งในขณะที่ HideToolbarAndTitle="true"
คุณสมบัติที่เพิ่มเข้ามา
viewpager_headerAlpha = "0.6"กำลังมองหาผู้มีส่วนร่วม อย่าลังเลที่จะแยก !
บอกฉันว่าคุณกำลังใช้ห้องสมุดของฉันในแอปพลิเคชันของคุณ ฉันจะแชร์ใน README นี้
ผู้แต่ง: ฟลอรองต์ ชองปิญี http://www.florentchampigny.com/
บล็อก : http://www.tutos-android-france.com/
Fiches Plateau Moto : 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.
