PagerTabStrip及自定義的PagerTab

来源:http://www.cnblogs.com/wangfengdange/archive/2016/06/16/5590225.html
-Advertisement-
Play Games

如圖是效果圖 開發中經常會用到上面是一個Tab下麵是一個ViewPager（ViewPager再包含幾個Fragment），當點擊Tab或是滑動ViewPager，Tab及ViewPager都會發生對應的變化 如圖我實現的上面一個Tab是自己定義的佈局讓其繼承HorizontalScrollView ...


如圖是效果圖

    

開發中經常會用到上面是一個Tab下麵是一個ViewPager（ViewPager再包含幾個Fragment），當點擊Tab或是滑動ViewPager，Tab及ViewPager都會發生對應的變化

如圖我實現的上面一個Tab是自己定義的佈局讓其繼承HorizontalScrollView，下麵一個使用系統PagerTabStrip很簡單，

當然引用別人的框架Android-ViewPagerIndicator（https://github.com/JakeWharton/ViewPagerIndicator）實現更簡單

如下是主要代碼

package com.it.hello.activity.assets;

import java.util.ArrayList;
import com.it.hello.R;
import com.it.hello.activity.entity.ChannelItem;
import com.it.hello.activity.fragment.FourFragment;
import com.it.hello.activity.fragment.MThreeFragment;
import com.it.hello.activity.fragment.OneFragment;
import com.it.hello.activity.myfragment.MyFragmentOne;
import com.it.hello.activity.myfragment.MyFragmentTwo;
import com.it.hello.activity.util.DensityUtils;
import com.it.hello.activity.widget.ColumnHorizontalScrollView;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.util.SparseArray;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.RelativeLayout.LayoutParams;

/**
 * PagerTabStrip實現ViewPager的滑動
 * @author zh
 *
 */
public class MyStripActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private PagerTabStrip pager_tab_strip;

    /** 自定義的HorizontalScrollView */
    private ColumnHorizontalScrollView mColumnHorizontalScrollView;
    private LinearLayout mRadioGroup_content;
    /** 用戶選擇的分類列表 */
    private ArrayList<ChannelItem> userChannelItems = new ArrayList<ChannelItem>();
    /** 當前選中的欄目 */
    private int columnSelectIndex = 0;
    /** 屏幕的寬度 */
    private int mScreeWidth = 0;
    /** Item寬度 */
    private int mItemWidth = 0;
    private View view;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.activity_strip);
        mScreeWidth = DensityUtils.getWindowsWidth(this);
        mItemWidth = mScreeWidth / 3; // 一個Item寬度為屏幕的3分之一
        mViewPager = (ViewPager) findViewById(R.id.vp);
        pager_tab_strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
        // 設置標簽下劃線的顏色
        mColumnHorizontalScrollView = (ColumnHorizontalScrollView) findViewById(R.id.mColumnHorizontal);
        mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup);
        
        initColumData();
        //取消Tab 下麵的長橫線
        pager_tab_strip.setDrawFullUnderline(false);
        //改變Tab線的顏色
        pager_tab_strip.setTabIndicatorColor(getResources().getColor(
                R.color.indecolor));
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager()));
    }

    private void initColumData() {
        // TODO Auto-generated method stub
        userChannelItems = new ArrayList<ChannelItem>();
        ChannelItem item = new ChannelItem(0, "標簽0", 0, 0);
        ChannelItem item1 = new ChannelItem(0, "標簽1", 0, 0);
        ChannelItem item2 = new ChannelItem(0, "標簽2", 0, 0);
        ChannelItem item3 = new ChannelItem(0, "標簽3", 0, 0);
        ChannelItem item4 = new ChannelItem(0, "標簽4", 0, 0);
        userChannelItems.add(item);
        userChannelItems.add(item1);
        userChannelItems.add(item2);
        userChannelItems.add(item3);
        userChannelItems.add(item4);

        initTabColumn();

        /**
         * ViewPager切換監聽的方法
         */
        mViewPager
                .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

                    @Override
                    public void onPageSelected(int position) {
                        // TODO Auto-generated method stub
                        mViewPager.setCurrentItem(position);
                        selectTab(position);
                        initColumData();
                    }

                });
    }

    /**
     * 初始化TabColumn欄目項
     */
    private void initTabColumn() {
        // TODO Auto-generated method stub
        mRadioGroup_content.removeAllViews();
        int count = userChannelItems.size();
        mColumnHorizontalScrollView.setParam(this, mScreeWidth,
                mRadioGroup_content);
        for (int i = 0; i < count; i++) {
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                    mItemWidth, LayoutParams.WRAP_CONTENT);
            params.leftMargin = 5;
            params.rightMargin = 5;
            view = View.inflate(this, R.layout.item_mytab, null);
            TextView tv = (TextView) view.findViewById(R.id.tab_title);
            View line = (View) view.findViewById(R.id.tab_line);
            tv.setId(i);
            tv.setText(userChannelItems.get(i).getName());
            if (columnSelectIndex == i) {
                tv.setSelected(true);
                line.setSelected(true);
            }
            view.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View arg0) {
                    // TODO Auto-generated method stub
                    for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
                        View localView = mRadioGroup_content.getChildAt(i);
                        if (localView != arg0) {
                            localView.setSelected(false);
                        } else {
                            localView.setSelected(true);
                            mViewPager.setCurrentItem(i);
                        }
                    }
                }
            });
            mRadioGroup_content.addView(view, i, params);
        }
    }

    /**
     * 選擇的Column裡面的Tab
     * */
    private void selectTab(int tab_postion) {
        columnSelectIndex = tab_postion;
        for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
            View checkView = mRadioGroup_content.getChildAt(tab_postion);
            int k = checkView.getMeasuredWidth();
            int l = checkView.getLeft();
            int i2 = l + k / 2 - mScreeWidth / 2;
            mColumnHorizontalScrollView.smoothScrollTo(i2, 0);
        }
        // 判斷是否選中
        for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) {
            View checkView = mRadioGroup_content.getChildAt(j);
            boolean ischeck;
            if (j == tab_postion) {
                ischeck = true;
            } else {
                ischeck = false;
            }
            checkView.setSelected(ischeck);
        }
    }
    
    /**
     * ViewPager的適配器
     * @author zh
     *
     */
    private class MainAdapter extends FragmentStatePagerAdapter {

        public MainAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        // 每個條目返回的Fragment
        @Override
        public Fragment getItem(int position) {
            // TODO Auto-generated method stub
            return createFragment(position);
        }

        // 一共多少個條目
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return 5;
        }

        // 返回每個條目的標題
        @Override
        public CharSequence getPageTitle(int position) {
            return "標簽" + position;
        }
    }
    //private static Map<Integer, Fragment> mFragmentMap = new HashMap<Integer, Fragment>();
    private static SparseArray<Fragment> mFragmentMap = new SparseArray<Fragment>();
    public Fragment createFragment(int position) {
        // TODO Auto-generated method stub
        Fragment fragment = null;
        fragment = mFragmentMap.get(position);//在集合中去除Fragment
        if(fragment == null){//如果沒在集合中取出來  需要重新創建            
            if (position == 0) {
                fragment = new MyFragmentOne();
            } else if (position == 1) {
                fragment = new MyFragmentTwo();
            } else if (position == 3) {
                fragment = new MThreeFragment();
            } else if (position == 4) {
                fragment = new FourFragment();
            } else {
                fragment = new OneFragment();
            }
            if(fragment != null){
                mFragmentMap.put(position, fragment);//把創建好的Fragment存放到集合中緩存起來
            }
        }
        return fragment;
    }
}

佈局代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.it.hello.activity.widget.ColumnHorizontalScrollView
        android:id="@+id/mColumnHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/mRadioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#333"
            android:gravity="center_vertical"
            android:orientation="horizontal" />
    </com.it.hello.activity.widget.ColumnHorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tab_strip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#ffffff"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:textColor="#000" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

自定義的ColumnHorizontalScrollView

package com.it.hello.activity.widget;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.HorizontalScrollView;

public class ColumnHorizontalScrollView extends HorizontalScrollView {
    /** 傳入整體佈局 */
    private View ll_content;
    /** 傳入拖動欄布 */
    // private View rl_column;
    /** 屏幕寬度 */
    private int mScreenWitdh = 0;
    /** 父類的活動activity */
    private Activity activity;

    public ColumnHorizontalScrollView(Context context) {
        super(context);
    }

    public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ColumnHorizontalScrollView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * 在拖動的時
     * */
    // @Override
    // protected void onScrollChanged(int paramInt1, int paramInt2, int
    // paramInt3, int paramInt4) {
    // super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);
    // //shade_ShowOrHide();
    // if(!activity.isFinishing() && ll_content !=null){
    // }else{
    // return;
    // }
    // if(paramInt1 ==0){
    // return;
    // }
    // if(ll_content.getWidth() - paramInt1 + rl_column.getLeft() ==
    // mScreenWitdh){
    // return;
    // }
    // }
    /**
     * 傳入父類佈局中的資源文件
     * */
    public void setParam(Activity activity, int mScreenWitdh, View paramView1) {
        this.activity = activity;
        this.mScreenWitdh = mScreenWitdh;
        this.ll_content = paramView1;
    }

    /**
     * 判斷左右陰影的顯示隱藏效
     * */
    public void shade_ShowOrHide() {
        if (!activity.isFinishing() && ll_content != null) {
            measure(0, 0);
            // 如果整體寬度小於屏幕寬度的話，那左右陰影都隱藏
            if (mScreenWitdh >= getMeasuredWidth()) {
                // leftImage.setVisibility(View.GONE);
                // rightImage.setVisibility(View.GONE);
            }
        } else {
            return;
        }
        // 如果滑動在最左邊時，左邊陰影隱藏，右邊顯示
        if (getLeft() == 0) {
            // leftImage.setVisibility(View.GONE);
            // rightImage.setVisibility(View.VISIBLE);
            return;
        }
        // 如果滑動在最右邊時，左邊陰影顯示，右邊隱藏
        if (getRight() == getMeasuredWidth() - mScreenWitdh) {
            // leftImage.setVisibility(View.VISIBLE);
            // rightImage.setVisibility(View.GONE);
            return;
        }
        // 否則，說明在中間位置，左、右陰影都顯示
        // leftImage.setVisibility(View.VISIBLE);
        // rightImage.setVisibility(View.VISIBLE);
    }
}
/**獲取屏幕的寬*/
    public final static int getWindowsWidth(Activity activity) {
        DisplayMetrics dm = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
        return dm.widthPixels;
    }

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css 選擇符
    常用選擇符的介紹 通配選擇符指選定文檔對象模型（DOM）中的所有類型的單個對象。 *{css代碼規則}，其中*表示所有類型，包含body，div,td等 類型選擇符指以文檔對象模型（DOM）作為選擇符，即選擇某個html標記為對象，設置樣式規則。 P{ } Div{ } 包含選擇符 對某個容器層的子 ...
  • 最強 Android Studio 使用小技巧和快捷鍵
    寫在前面 本文翻譯自 Android Studio Tips by Philippe Breault，一共收集了62個 Android Studio 使用小技巧和快捷鍵。 根據這些小技巧的使用場景，本文將這62個小技巧分為常用技巧（1 – 28）、編碼技巧（29 – 49）和調試技巧（50 – 62 ...
  • 對URL編碼
    url支持26個英文字母、數字和少數幾個特殊字元,因此,對於url中包含非標準url的字元時，就需要對其進行編碼。iOS中提供了函數stringByAddingPercentEscapesUsingEncoding對中文和一些特殊字元(下麵已證實包含"%")進行編碼，但是stringByAdding ...
  • 冪運算（以值求冪）
    有數值按此方式構成： 5=2^0+2^2; 40=2^3+2^5; 現在需要獲取到冪值0和2或者3和5。int main(int argc, char * argv[]) int main(int argc, char * argv[]) ...
  • iOS 9 Spotlight搜索 OC版
    介紹： 在WWDC 2015會議上，蘋果官方公佈了iOS9。除開許多新的特性和增強功能，這次升級也給了開發者們一個機會讓他們的app里的內容能通過Spotlight 搜索功能被髮現和使用。在iOS9中可用的新APIs允許你去索引APP裡面的內容或者界面狀態，通過Spotlight來讓用戶使用。 這些 ...
  • 安卓動態調試七種武器之離別鉤 – Hooking（上）
    隨著移動安全越來越火，各種調試工具也都層出不窮，但因為環境和需求的不同，並沒有工具是萬能的。因此，筆者將會在這一系列文章中分享一些自己經常用或原創的調試工具以及手段，希望能對國內移動安全的研究起到一些催化劑的作用。 ...
  • Android使用ViewPager實現左右迴圈滑動及輪播效果
    邊界的時候會看到一個不能翻頁的動畫，可能影響用戶體驗。此外，某些區域性的ViewPager（例如展示廣告或者公告之類的ViewPager），可能需要自動輪播的效果，即用戶在不用滑動的情況下就能夠看到其他頁面的信息。 為此我查閱了網路上現有的一些關於實現這樣效果的例子，但都不是很滿意，經過反覆實驗，在 ...
  • Android Fragment使用(四) Toolbar使用及Fragment中的Toolbar處理
    本文介紹了在Android中將Toolbar作為ActionBar使用的方法. 並且介紹了在Fragment和嵌套Fragment中使用Toolbar作為ActionBar使用時需要註意的事項. ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類