天天看點

android封面引導頁面,ViewPagerIndicator

ViewPagerIndicator

點選上方的release,可以下載下傳最新的jar包

Download sample Apk

###1. 支援自定義tab樣式

###2. 支援自定義滑動塊樣式和位置

###3. 支援自定義切換tab的過渡效果

###4. 支援子界面的預加載和界面緩存

###5. 支援設定界面是否可滑動

###6. android:minSdkVersion="8" android:targetSdkVersion="21"

使用方法

package com.shizhefei.indicator.guide;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import com.shizhefei.indicator.R;

import com.shizhefei.view.indicator.Indicator;

import com.shizhefei.view.indicator.IndicatorViewPager;

import com.shizhefei.view.indicator.IndicatorViewPager.IndicatorPagerAdapter;

import com.shizhefei.view.indicator.IndicatorViewPager.IndicatorViewPagerAdapter;

public class GuideActivity extends FragmentActivity {

private IndicatorViewPager indicatorViewPager;

private LayoutInflater inflate;

@Override

protected void onCreate(Bundle arg0) {

super.onCreate(arg0);

setContentView(R.layout.activity_guide);

ViewPager viewPager = (ViewPager) findViewById(R.id.guide_viewPager);

Indicator indicator = (Indicator) findViewById(R.id.guide_indicator);

// 将viewPager和indicator使用

indicatorViewPager = new IndicatorViewPager(indicator, viewPager);

inflate = LayoutInflater.from(getApplicationContext());

// 設定indicatorViewPager的擴充卡

indicatorViewPager.setAdapter(adapter);

}

private IndicatorPagerAdapter adapter = new IndicatorViewPagerAdapter() {

private int[] images = { R.drawable.p1, R.drawable.p2, R.drawable.p3,

R.drawable.p4 };

@Override

public View getViewForTab(int position, View convertView,

ViewGroup container) {

if (convertView == null) {

convertView = inflate.inflate(R.layout.tab_guide, container,

false);

}

return convertView;

}

@Override

public View getViewForPage(int position, View convertView,

ViewGroup container) {

if (convertView == null) {

convertView = new View(getApplicationContext());

convertView.setLayoutParams(new LayoutParams(

LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

}

convertView.setBackgroundResource(images[position]);

return convertView;

}

@Override

public int getCount() {

return images.length;

}

};

}

效果圖

有了該類庫你可以實作以下布局

android封面引導頁面,ViewPagerIndicator
android封面引導頁面,ViewPagerIndicator
android封面引導頁面,ViewPagerIndicator
android封面引導頁面,ViewPagerIndicator

主要的類

1.ViewPager

這個版本以後 android-support-v4 可以用原生的了 沒有重寫ViewPager。

原先重寫的ViewPager的setPrepareNumber 用 Fragment繼承于LazyFragment代替實作懶加載

原先setCanScroll 轉移到了 ViewPager的子類SViewPager上

2.使用LazyFragment來配合ViewPager的setOffscreenPageLimit進行懶加載界面和防止重新建立界面**

2.Indicator

顧名思義是訓示器的意思。有點像水準方向的listview 可以自定義item。

子類FixedIndicatorView 主要用于固定大小來平均配置設定tab的情況。

子類ScrollIndicatorView 主要用于多個tab可以進行滑動。

3.indicatorViewPager

用于将ViewPager和Indicator 聯合使用。

indicatorViewPager.setAdapter(IndicatorPagerAdapter adapter)

// 設定它可以自定義實作在滑動過程中,tab項的字型變化,顔色變化等等過渡效果

indicatorViewPager.setIndicatorOnTransitionListener(onTransitionListener);

// 設定它可以自定義滑動塊的樣式

indicatorViewPager.setIndicatorScrollBar(scrollBar);

// 設定page是否可滑動切換

indicatorViewPager.setPageCanScroll(false);

indicatorViewPager.setPageOffscreenLimit(1);

indicatorViewPager.setPagePrepareNumber(1);

// 設定頁面切換監聽

indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener);

// 設定page間的圖檔的寬度

indicatorViewPager.setPageMargin(1);

// 設定page間的圖檔

indicatorViewPager.setPageMarginDrawable(d);

4.IndicatorPagerAdapter

子類IndicatorFragmentPagerAdapter 用于 界面是fragment的形式。

子類IndicatorViewPagerAdapter 用于 界面是View的形式.

indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener)設定界面的切換監聽。

Indicator 既可以單獨使用。也可以通過indicatorViewPager的形式聯合viewpager一起使用。

5.ScrollBar

tab的滑動塊通過indicatorViewPager.setIndicatorScrollBar(scrollBar);進行設定

子類有

ColorBar 顔色的滑動塊

DrawableBar 圖檔滑動塊

LayoutBar 布局滑動塊

TextWidthColorBar 大小同tab裡的text一樣寬的顔色的滑動塊

SpringBar 實作拖拽效果的圓形滑動塊 該類修改于https://github.com/chenupt/SpringIndicator

5.OnTransitionListener

子類有

OnTransitionTextListener tab的字型顔色變化,和字型大小變化效果

6.LazyFragment 懶加載Fragment

Fragment繼承該類實作 顯示Framgment的時候才會去建立你自己的界面布局,否則不建立。

1.實作原理:

一開始onCreateView的時候隻是加載一個空的FrameLayout

當通過結合onCreateView和setUserVisibleHint兩個方法進行判斷是否需要加載真正的布局界面,需要的時候把真正的布局界面添加到之前的空的FrameLayout上面

2.回調方法:

onCreateViewLazy 對應 onCreateView

onDestroyViewLazy 對應 onDestroyView

onResumeLazy 對應 onResume

onPauseLazy 對應 onPause

onDestroy 和 onCreate 方法不變

另外添加了onFragmentStartLazy fragment顯示的時候調用,在ViewPager界面切換的時候你就可以通過這個判斷是否顯示

onFragmentStopLazy fragment不顯示的時候調用

上面所有有lazy結尾的方法都意味着 真正的布局正在顯示

3.使用方法

放心在onCreateViewLazy 的時候建立布局,初始化資料。調用該方法的時候,界面已經要顯示啦

在onDestroyViewLazy的方法裡面做釋放操作

說明

項目 ViewPagerIndicator_Demo 是示例代碼。 看了這個例子你會驚奇的發現裡面居然都是通過viewpager實作,沒有使用tabhost,而所有形式的tab都是用Indicator實作。

項目 ViewPagerIndicator_Library 是類庫

License

Copyright 2014 shizhefei(LuckyJayce)

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.