引导页库slidingtutorial-android介绍
2016-03-03 16:35 1867 0
Òýµ¼Ò³µÄ¿âÎÒËѼ¯µÃ¶àÁË£¬×î½üÓÖÊÕ¼ÁËÒ»¸öslidingtutorial-android£¬¾õµÃÓеãÒâ˼¡£ ÆäЧ¹ûÈçÏ£º
ÕâÀïÒòΪgifͼµÄÔÒò£¬ÊÓ²îЧ¹û²»Ì«Ã÷ÏÔ¡£
ÏÈÀ´¿´¿´Ó÷¨¡£
ÕâÀïµÄÓ÷¨À´×ÔÓÚ¸ÃÏîÄ¿ÔÚgithubÉϵÄdemoʾÀý¡£
ΪÁ˱ãÓÚ½²½â¡£Ê×ÏÈ¿´¿´sampleÏîÄ¿µÄ´úÂë½á¹¹£º
ÉèÖÃÖ÷½çÃæ
Ê×ÏÈÄãÐèÒª×Ô¶¨ÒåÒ»¸öfragment¡£
×Ô¶¨ÒåÒ»¸ö¼Ì³Ð×ÔSimplePagerFragmentµÄfragment£¬ÕâÀï½ÐCustomPresentationPagerFragment¡£
¼ÈÈ»ÊǼ̳ÐÓÚSimplePagerFragment£¬ÎªÊ²Ã´½ÐCustomPresentationPagerFragment¶ø²»½ÐCustomSimplePagerFragmentÄØ£¿
ÕâÊÇÒòΪSimplePagerFragmentÆäʵҲÊÇPresentationPagerFragmentµÄ×ÓÀ࣬²»¹ýËüдËÀÁ˽çÃæÉϵļ¸¸ö¶«Î÷¡£µ±È»ÁËÃû×ÖÔõôȡ»¹ÊÇÈ¡¾öÓÚÄã¡£
package com.cleveroad.slidingtutorial.sample;
import android.graphics.Color;
import android.support.annotation.ColorInt;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.Toast;
import com.cleveroad.slidingtutorial.PageFragment;
import com.cleveroad.slidingtutorial.SimplePagerFragment;
public class CustomPresentationPagerFragment extends SimplePagerFragment {
@Override
protected int getPagesCount() {
return 6;
}
@Override
protected PageFragment getPage(int position) {
position %= 3;
if (position == 0)
return new FirstCustomPageFragment();
if (position == 1)
return new SecondCustomPageFragment();
if (position == 2)
return new ThirdCustomPageFragment();
throw new IllegalArgumentException("Unknown position: " + position);
}
@ColorInt
@Override
protected int getPageColor(int position) {
if (position == 0)
return ContextCompat.getColor(getContext(), android.R.color.holo_orange_dark);
if (position == 1)
return ContextCompat.getColor(getContext(), android.R.color.holo_green_dark);
if (position == 2)
return ContextCompat.getColor(getContext(), android.R.color.holo_blue_dark);
if (position == 3)
return ContextCompat.getColor(getContext(), android.R.color.holo_red_dark);
if (position == 4)
return ContextCompat.getColor(getContext(), android.R.color.holo_purple);
if (position == 5)
return ContextCompat.getColor(getContext(), android.R.color.darker_gray);
return Color.TRANSPARENT;
}
@Override
protected boolean isInfiniteScrollEnabled() {
return true;
}
@Override
protected boolean onSkipButtonClicked(View skipButton) {
Toast.makeText(getContext(), "Skip button clicked", Toast.LENGTH_SHORT).show();
return true;
}
}
ÆäÖУ¬getPagesCount()·µ»ØÒýµ¼½çÃæµÄ¸öÊý¡£getPage()·½·¨ÔòÓÃÓÚÉèÖÃÿһ¸ö½çÃæËù¶ÔÓ¦µÄPageFragment
¡£ÔÚdemoÖÐÎÒÃǶ¨ÒåÁËÈý¸öPageFragment£¬ÈçÏ£º
@Override
protected PageFragment getPage(int position) {
position %= 3;
if (position == 0)
return new FirstCustomPageFragment();
if (position == 1)
return new SecondCustomPageFragment();
if (position == 2)
return new ThirdCustomPageFragment();
throw new IllegalArgumentException("Unknown position: " + position);
}
ÒòΪֻ¶¨ÒåÁËÈý¸öÒýµ¼Ò³Ã棬¶øgetPagesCount·µ»ØµÄÊÇ6£¬ËùÒÔÕâÀïÿ¸öÒ³Ã涼±»ÓÃÁËÁ½´Î¡£
µ«ÊÇ£¬ÕâÀïÖ»ÊǶ¨ÒåÁËÿ¸öÒýµ¼Ò³Ã棬»¹ÐèÒª¶¨Òåÿ¸öÒ³ÃæµÄ±³¾°ÑÕÉ«¡£
@Override
protected int getPageColor(int position) {
if (position == 0)
return ContextCompat.getColor(getContext(), android.R.color.holo_orange_dark);
if (position == 1)
return ContextCompat.getColor(getContext(), android.R.color.holo_green_dark);
if (position == 2)
return ContextCompat.getColor(getContext(), android.R.color.holo_blue_dark);
if (position == 3)
return ContextCompat.getColor(getContext(), android.R.color.holo_red_dark);
if (position == 4)
return ContextCompat.getColor(getContext(), android.R.color.holo_purple);
if (position == 5)
return ContextCompat.getColor(getContext(), android.R.color.darker_gray);
return Color.TRANSPARENT;
}
µ±È»ÁË£¬Ã¿¸öÒ³Ãæ±¾ÉíÒ²ÊÇ¿ÉÒÔÉèÖñ³¾°ÑÕÉ«µÄ£¬µ«ÊÇslidingtutorialµÄÉè¼ÆÀíÄîÊÇÈþßÌåµÄÒ³Ã澡¿ÉÄܵļòµ¥£¬ËùÒ԰ѱ³¾°ÑÕÉ«·ÖÀë³öÀ´ÁË¡£
½ÓÏÂÀ´ÊÇÒ»¸öÒâÍ⾪ϲ£¬Í¨¹ýËü¿ÉÒÔÉèÖÃÒýµ¼Ò³ÊÇ·ñÎÞÏÞÑ»·£º
@Override
protected boolean isInfiniteScrollEnabled() {
return true;
}
ÏÔÈ»ÎÒÃǵÄdemoÀïÃæÊÇÐèÒªËüÎÞÏÞÑ»·¡£
CustomPresentationPagerFragmentÉÏÃæÓÐÒ»¸öÌø¹ý°´Å¥£¬ÎÒÃÇÐèҪΪÕâ¸ö°´Å¥ÉèÖõã»÷ʼþ£º
@Override
protected boolean onSkipButtonClicked(View skipButton) {
Toast.makeText(getContext(), "Skip button clicked", Toast.LENGTH_SHORT).show();
return true;
}
Õâ¸ö¹ØÓÚÒýµ¼½çÃæµÄÖ÷½çÃæ¾ÍÉèÖÃÍêÁË£¬×ܽáһϾÍÊÇ£¬ÉèÖÃÒ³Ãæ¸öÊý£¬ÉèÖþßÌåµÄÿһҳ¡¢ÉèÖÃÿһҳµÄ±³¾°ÑÕÉ«¡¢ÉèÖÃÊÇ·ñÎÞÏÞÑ»·¡¢ÉèÖÃÌø¹ý°´Å¥µÄµã»÷ʼþ¡£´úÂëºÜÉÙ¡£½ÓÏÂÀ´°ÑÕâ¸öFragment·ÅÔÚactivityÖоÍÊÇÁË¡£Õâ¸ö²»ÔÙ½²½â¡£
ÉèÖÃÒýµ¼Ò³µÄµ¥¸ö½çÃæ
ÆäʵÕâÀïµÄÒ³ÃæÄÚÈÝÖ÷ÒªÊǸºÔðÇ°¾°ÔªËØ£¬²»°üÀ¨±³¾°ÑÕÉ«¡£
µ¥¸öÒýµ¼Ò³Ãæ¶ÔÓ¦µÄÊÇPageFragment¡£´ÓÇ°ÃæµÄ´úÂëÖÐÎÒÃÇÖªµÀ£¬demo×ܹ²×Ô¶¨ÒåÁËÈý¸öPageFragment£¬·Ö±ðÊÇ
FirstCustomPageFragment
SecondCustomPageFragment
ThirdCustomPageFragment
ÕâÀïÒÔFirstCustomPageFragmentΪÀý£¬¿´¿´PageFragment£¨Ã¿¸ö¾ßÌåµÄÒýµ¼Ò³Ã棩ÊÇÈçºÎ×Ô¶¨ÒåµÄ¡£
public class FirstCustomPageFragment extends PageFragment {
@Override
protected int getLayoutResId() {
return R.layout.fragment_page_first;
}
@Override
protected TransformItem\[\] provideTransformItems() {
return new TransformItem\[\]{
new TransformItem(R.id.ivFirstImage, true, 20),
new TransformItem(R.id.ivSecondImage, false, 6),
new TransformItem(R.id.ivThirdImage, true, 8),
new TransformItem(R.id.ivFourthImage, false, 10),
new TransformItem(R.id.ivFifthImage, false, 3),
new TransformItem(R.id.ivSixthImage, false, 9),
new TransformItem(R.id.ivSeventhImage, false, 14),
new TransformItem(R.id.ivEighthImage, false, 7)
};
}
}
¾ÍÊÇÕâô¶àµã´úÂ룬ֻ×öÁ½¼þÊ£º
-
ÉèÖÃÕâ¸öÒ³ÃæµÄ²¼¾Ö×ÊÔ´
-
Ϊ½çÃæÉϵĸ÷¸öÔªËØÉèÖÃÒƶ¯ÒòËØ£¬°üÀ¨·½ÏòºÍϵÊý¡£Ò»¸öTransformItem¾ÍÊÇÒ»¸ö½çÃæÔªËØ£¬ÆäÖÐËüµÄµÚÒ»¸ö²ÎÊýÊǽçÃæÔªËضÔÓ¦µÄid£¬µÚ¶þ¸ö²ÎÊýÊÇÊÇ·ñ·´Ïò£¬true±íʾҪ£¬false±íʾ²»£¬µÚÈý¸ö²ÎÊýÊÇÒƶ¯ÏµÊý¡£ÏµÊýÔ½´óÒƶ¯Ô½Âý£¬ÎªÒ»¸ö½çÃæÉϵIJ»Í¬ÔªËØÉèÖò»Í¬µÄ·½ÏòºÍϵÊý£¬¾ÍÄÜÐγÉÊÓ²îЧ¹û¡£
ÎÒÃÇÀ´¿´¿´µÚÒ»¸öÒ³Ãæ¶ÔÓ¦µÄxml²¼¾Ö£º
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
android:id="@+id/rootFirstPage"
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription"
tools:background="@android:color/holo_orange_dark">
<ImageView
android:id="@+id/ivFirstImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/s_0_1"
app:layout_heightPercent="35%"
app:layout_widthPercent="50%"/>
<ImageView
android:id="@+id/ivSecondImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="@mipmap/s_0_2"
app:layout_heightPercent="10%"
app:layout_marginRightPercent="12%"
app:layout_marginTopPercent="27%"
app:layout_widthPercent="12%"/>
<ImageView
android:id="@+id/ivThirdImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/s_0_3"
app:layout_heightPercent="25%"
app:layout_marginLeftPercent="14%"
app:layout_marginTopPercent="49%"
app:layout_widthPercent="30%"/>
<ImageView
android:id="@+id/ivFourthImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/s_0_4"
app:layout_heightPercent="15%"
app:layout_marginLeftPercent="14%"
app:layout_marginTopPercent="39%"
app:layout_widthPercent="20%"/>
<ImageView
android:id="@+id/ivFifthImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@mipmap/s_0_5"
app:layout_heightPercent="15%"
app:layout_marginTopPercent="22%"
app:layout_widthPercent="45%"/>
<ImageView
android:id="@+id/ivSixthImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/s_0_6"
app:layout_heightPercent="6%"
app:layout_marginLeftPercent="4%"
app:layout_marginTopPercent="26%"
app:layout_widthPercent="6%"/>
<ImageView
android:id="@+id/ivSeventhImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/s_0_7"
app:layout_heightPercent="8%"
app:layout_marginLeftPercent="14%"
app:layout_marginTopPercent="25%"
app:layout_widthPercent="9%"/>
<ImageView
android:id="@+id/ivEighthImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/s_0_8"
app:layout_heightPercent="6%"
app:layout_marginLeftPercent="77%"
app:layout_marginTopPercent="38%"
app:layout_widthPercent="8%"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="@string/text_web_ceo"
android:textColor="@android:color/white"
android:textSize="@dimen/text_size_large"
app:layout_heightPercent="15%"
app:layout_marginBottomPercent="11%"
app:layout_widthPercent="45%"/>
</android.support.percent.PercentRelativeLayout>
ʹÓõľÓÈ»ÊǰٷֱȲ¼¾Ö¡£²»¹ýÓÃʲô²¼¾ÖûÓйØϵ¡£
С½á
Õû¸öÓ÷¨¾ÍÊÇÕâô¼òµ¥£¬Äã°ÑÖ÷Fragment·Åµ½activityÀï¾Í¿ÉÒÔÁË¡£Ê¹ÓÃÕâ¸ö¿âµÄºÃ´¦ÊÇ£¬ÎÒÃDz»ÓÃΪÿ¸öÒ³ÃæרÃÅдÂß¼£¬Ö»ÒªÖ¸¶¨ºÃÒ³ÃæÔªËصÄid £¬·½ÏòºÍϵÊý¾ÍºÃÁË¡£
¼¼ÇÉ
Õâ¸ö¿âµÄÁÁµãÔÚÓÚ¶Ô³éÏó·½·¨µÄʹÓ᣾ÍÄÃPageFragmentÀ´Ëµ£¬ÓÐÁ½¸ö³éÏó·½·¨£ºprovideTransformItems()ÒÔ¼°getLayoutResId()£¬Òª½¨Á¢Ò»¸öеÄÒ³Ã棬ֻÐèʵÏÖÕâÁ½¸ö·½·¨¾Í¿ÉÒÔÁË¡£
²»¹ýÎÒ×ÐϸÏëÁËÏ£¬ÕâÁ½¸ö·½·¨µÄ×÷ÓþÍÊÇÌṩÁ½¸ö£¨»òÕß˵ÊÇÁ½×飩±äÁ¿µÄÖµ¡£ÎªÊ²Ã´²»ÓÃsetµÄÐÎʽÄØ£¬ÄÇÑùµÄ»°¶¼²»ÓÃÈ¥×Ô¶¨ÒåÈý¸öÀà¡£¾Íн¨Ò»¸öÀ࣬Ȼºóµ÷Óø÷×ÔµÄset·½·¨¡£¸÷λ¿ÉÒÔ³¢ÊÔÏ¡£µ«ÊÇ¿ÉÒԿ϶¨µÄÊÇ£¬Ê¹ÓÃsetµÄ·½Ê½´úÂë²»»áÌ«ºÃ¿´¡£
»¹ÓÐÒ»¸ö¶«Î÷¾ÍÊÇtransformItem£¬ËüÊdzéÏó³öÀ´µÄÒ»¸ö¶«Î÷£¬ÔÚ½çÃæÉϲ¢Ã»ÓжÔÓ¦µÄʵÌå¡£´ú±íÒ»¸ö±»Òƶ¯ÔªËصÄÒýÓÃÒÔ¼°Ïà¹ØÊý¾Ý£¬±ÈÈçϵÊýºÍÒƶ¯·½Ïò¡£ÎÒÃÇ¿´¿´slidingtutorial-androidÊÇÈçºÎÀûÓÃËüÀ´±ä»»Ò³ÃæÉϵÄÔªËصġ£
Ê×ÏÈ£¬ÎªÁ˵¥¶À¶ÔÒ³ÃæµÄÔªËØ×ö´íÂäÓÐÖµÄÒƶ¯£¬ÔÚPresentationPagerFragmentÖж¨ÒåÁËÒ»¸öFragmentTransformer£¬Ëü¼Ì³Ð×ÔPageTransformer£º
/**
* Implementation of {@link android.support.v4.view.ViewPager.PageTransformer} that dispatch
* transform page event whenever a visible/attached page is scrolled.
*/
private class FragmentTransformer implements ViewPager.PageTransformer {
public void transformPage(View view, float position) {
Object obj = view.getTag(R.id.page_fragment);
if (obj instanceof PageFragment) {
((PageFragment) obj).transformPage(view, position);
}
}
}
¶ÔViewPagerÊìϤµÄͬѧӦ¸Ã¶ÔPageTransformer ºÜÊìϤ£¬Ëü¿ÉÒÔÀûÓÃ×Ô¼ºtransformPage(View view, float position)·½·¨ÖеÄposition²ÎÊýµÄֵȥÉèÖÃview²ÎÊýµÄÊôÐÔ£¬³£¼ûµÄÊÇÉèÖÃ͸Ã÷¶È£¬x/yÐÅÏ¢µÈ¡£¿ÉÒÔ¿´µ½ÔÚFragmentTransformer°ÑtransformPageÀïµÄ²ÎÊýÐÅÏ¢´«µÝ¸øÁËPageFragmentµÄtransformPage()·½·¨¡£
PageFragmentµÄtransformPage()·½·¨¶¨ÒåÈçÏ£º
void transformPage(View view, float position) {
holder.transformPage(view.getWidth(), position);
}
ÔÙÒ»´ÎµÄ£¬PageFragmentµÄtransformPage()·½·¨ÓÖ°ÑÕâЩÐÅÏ¢´«µÝ¸øholder.transformPage(£©
Õâ¸öholderÊÇLayersHolder¶ÔÏó£¬LayersHolderµÄ¶¨ÒåÈçÏ£º
class LayersHolder {
TransformItem\[\] transformItems;
public LayersHolder(View view, TransformItem\[\] transformItems) {
this.transformItems = transformItems;
for (TransformItem transformItem : transformItems) {
transformItem.setView(view.findViewById(transformItem.getViewResId()));
}
}
/**
* Method that apply a custom transformation to the page views
*
* @param pageWidth pageWidth
* @param position Position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
public void transformPage(int pageWidth, float position) {
for (TransformItem transformItem : transformItems) {
float translationX = (position) * (pageWidth / transformItem.getShiftCoefficient());
transformItem.getView().setTranslationX(transformItem.isReverseShift() ? -translationX : translationX);
}
}
}
ÔÚLayersHolderµÄtransformPageÀïÃ棬ËüÖ±½Ó±éÀúÁËËùÓеÄtransformItemÊý×顣Ȼºó¸ù¾Ý´«µÝ½øÀ´µÄÊý¾Ý£¬½áºÏ×ÔÉíµÄϵÊýºÍÒƶ¯·½Ïò£¬ÉèÖÃÁË×Ô¼ºµÄxÐÅÏ¢¡£
×ܽá
ÔÚËùÓеÄÒýµ¼Ò³¿âÖУ¬slidingtutorial-androidËãÊǹ¦ÄܱȽÏÍêÉÆ£¬Ó÷¨Ò²ºÍ¼òµ¥µÄÒ»¸ö¿â¡£
