取代android TabHost,實現滑動tab,引導頁等效果

jopen 8年前發布 | 30K 次閱讀 Android開發 移動開發

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 };

    /**
     * 獲取tab
     */
    @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;
    }
};

}</pre>

效果圖

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

主要的類

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);
/*

     * 設置緩存界面的個數,左右兩邊緩存界面的個數,不會被重新創建。 默認是1,表示左右兩邊  
     * 相連的1個界面和當前界面都會被緩存住,比如切換到左邊的一個界面,那個界面是不會重新創建的。  
     */  
    indicatorViewPager.setPageOffscreenLimit(1);  
    /*
     * 設置預加載界面的個數。左右兩邊加載界面的個數 默認是1,表示左右兩邊 相連的1個界面會和當前界面同時加載  
     */  
    indicatorViewPager.setPagePrepareNumber(1);  
    // 設置頁面切換監聽  
    indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener);  
    // 設置page間的圖片的寬度  
    indicatorViewPager.setPageMargin(1);  
    // 設置page間的圖片  
    indicatorViewPager.setPageMarginDrawable(d);  </pre> <h2><a id="user-content-4indicatorpageradapter" class="anchor" href="/misc/goto?guid=4959660824385829773" aria-hidden="true"></a>4.IndicatorPagerAdapter</h2>

子類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 是類庫

有什么建議可以發到我的郵箱 794629068@qq.com

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.

項目地址: https://github.com/LuckyJayce/ViewPagerIndicator

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!