Android防微信首頁左右滑動切換

来源:http://www.cnblogs.com/jarek/archive/2016/09/12/5857615.html
-Advertisement-
Play Games

大家看到微信首頁切換效果有沒有覺得很炫，滑動切換，點擊底部bar瞬間切換，滑動切換漸變效果，線上效果圖： 之前也在博客上看到別人的實現，再次基礎上，我做了些優化。首先說下實現原理，大神略過，o(╯□╰)o 頁面上看到的三個頁面是三個Fragment, 左右滑動使用viewpager,相信大家也都是這 ...


大家看到微信首頁切換效果有沒有覺得很炫，滑動切換，點擊底部bar瞬間切換，滑動切換漸變效果，線上效果圖：

 

    之前也在博客上看到別人的實現，再次基礎上，我做了些優化。首先說下實現原理，大神略過，o(╯□╰)o

    頁面上看到的三個頁面是三個Fragment, 左右滑動使用viewpager,相信大家也都是這麼再用，那麼底部用的是什麼技術呢，底部漸變其實就是重寫了ImageView,以及在左右滑動時，改變了TextView的顏色值，是不是很簡單...下麵我們一步一步的來：

1.自定義ImageView：

    /**
     * 初始化資源圖片bitmap及相關繪製對象
     * @param normal normals
     * @param selected focus
     */
    public final void init(int normal, int selected, int width, int height) {
        this.mNormalIcon = createBitmap(normal);
        this.mSelectedIcon = createBitmap(selected);
        this.mNormalRect = new Rect(0, 0, width, height);
        this.mSelectedRect = new Rect(0, 0, width, height);
        this.mPaint = new Paint(1);
    }

 

   這裡定義了兩個Bitmap，分別對應獲得焦點和失去焦點時顯示的bitmap圖像，兩個矩陣，在繪製過程中使用到，定義了一個外部調用的方法，在左右滑動過程中，通過偏移值改變透明值，兩張圖片疊加就是對應的過度效果。

  然後通通過滑動過程中不斷刷新view完成重新繪製，由此有了重寫onDraw方法：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (this.mPaint == null) {
            return;
        }
        this.mPaint.setAlpha(255 - this.mSelectedAlpha);
        canvas.drawBitmap(this.mNormalIcon, null, this.mNormalRect, this.mPaint);
        this.mPaint.setAlpha(this.mSelectedAlpha);
        canvas.drawBitmap(this.mSelectedIcon, null, this.mSelectedRect, this.mPaint);
    }

  這裡可以看到同伙Paint改變傳入的兩個bitmap透明度，從而達到漸變效果,其中mSelectedAlpha為外部傳入透明值

 

2.自定義實現底部bar容器，這裡通過重寫LinearLayout實現(姑且叫做container),  在container中我們要做這麼幾件事：

  1).定義外表調用介面，接收底部顯示資源信息：

     a.首先是初始化參數：

    public void initContainer (String[] titles, int[][] iconsRes, int[] colors, boolean showTransitionColor) {
        this.mTitles = titles;
        this.mIconRes = iconsRes;
        this.mTextNormalColor = getResources().getColor(colors[0]);
        this.mTextSelectedColor = getResources().getColor(colors[1]);
        this.mShowTransitionColor = showTransitionColor;
    }

     這裡傳入了tab顯示的文字數組、顯示的圖片資源數組、預設顏色和獲得焦點時顏色值數組（數組大小=2），以及切換時是否顯示過渡效果

 

     b.設置佈局文件及佈局文件里對應的控制項ID、顯示圖片時圖片寬高參數，提供了三種方式：

       ①圖文tab：

    /**
     * 設置佈局文件及相關控制項id
     * @param layout layout佈局文件 id
     * @param iconId ImageView 控制項 id id <=0 時不顯示
     * @param textId TextView 控制項 id id <=0 時不顯示
     * @param width  icon 寬度
     * @param height icon 高度
     */
    public void setContainerLayout (int layout, int iconId, int textId, int width, int height) {
        mLayoutId = layout;
        mTextViewId = textId;
        mIconVIewId = iconId;
        mIconWidth = width;
        mIconHeight = height;
    }

         這裡的layout及tab的佈局文件， iconId對應的是自定義ImageView的資源Id, textId對應的是TextView的Id, 寬高指的是圖片顯示的寬高

      ②只有文字tab： 只顯示文字tab時傳入iconId即可

      ③只有圖片tab: 相應的，是在圖文tab提供的方法上，傳入文本textId=0即可

   c.註入ViewPager:這裡需要監聽ViewPager的滑動來改變漸變色

   

 2).添加tab到容易container中：

     這裡需要判斷iconId以及TextId是否大於0，=0即不顯示，同時為了居中平分底部container長度， 所有tab等分底部container

/**
     * <p>添加tab view到當前容器</p>
     */
    private void addTabViewToContainer() {
        final PagerAdapter adapter = mViewPager.getAdapter();  
        mTabView = new View[adapter.getCount()]; //這裡根據adapter判斷底部要顯示的tab總數

        for (int index = 0, len = adapter.getCount(); index < len; index++) {

            final View tabView = LayoutInflater.from(getContext()).inflate(mLayoutId, this, false);  //載入tab佈局
            mTabView[index] = tabView;

            /*tabIconView初始化*/
            TabIconView iconView = null;
            if (mIconVIewId > 0) { //  傳入的圖片資源文件ID不為0時，表示需要顯示icon,然後初始化該View
                iconView = (TabIconView) tabView.findViewById(mIconVIewId);
                iconView.init(mIconRes[index][0], mIconRes[index][1], mIconWidth, mIconHeight);  //這裡調了自定義ImageView的init方法
            }

            /*tabTextView初始化*/
            TextView textView = null;
            if (mTextViewId > 0) {
                textView = (TextView) tabView.findViewById(mTextViewId);
                textView.setText(mTitles[index]);

            }

            /*設置寬度，等分container*/
            LayoutParams lp = (LayoutParams) tabView.getLayoutParams();
            lp.width = 0;
            lp.weight = 1;

            /*添加tab點擊事件*/
            addTabOnClickListener(tabView, index);

            /*設置當前狀態*/
            if (index == mViewPager.getCurrentItem()) {  //當先顯示tab，設置初始狀態為獲得焦點狀態
                if (iconView != null) {
                    iconView.offsetChanged(0);
                }
                tabView.setSelected(true);
                if (textView != null) {
                    textView.setTextColor(mTextSelectedColor);
                }
            }

            addView(tabView);
        }
    }

 

  3).監聽viewPager的滑動事件，根據偏移值更新container，完成重繪操作

 

  4).在container的onDraw中根據偏移量計算透明值，這裡文本偏移值計算用了一個開源的代碼

   

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        final int childCount = getChildCount();
        if (childCount > 0) {
            /*當發生偏移時，繪製漸變區域*/
            if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1) && mShowTransitionColor) {

                /*獲取當前tab和下一tab view */
                View selectedTab = getChildAt(mSelectedPosition);
                View nextTab = getChildAt(mSelectedPosition + 1);

                /*顯示tab icon時,刷新各自view 透明度*/
                if (mIconVIewId > 0) {
                    View selectedIconView = selectedTab.findViewById(mIconVIewId);
                    View nextIconView = nextTab.findViewById(mIconVIewId);

                    //draw icon alpha
                    if (selectedIconView instanceof TabIconView && nextIconView instanceof TabIconView) {
                        ((TabIconView) selectedIconView).offsetChanged(mSelectionOffset);
                        ((TabIconView) nextIconView).offsetChanged(1 - mSelectionOffset);
                    }
                }

                 /*顯示tab text,刷新各自view 透明度*/
                if  (mTextViewId > 0) {
                    View selectedTextView = selectedTab.findViewById(mTextViewId);
                    View nextTextView = nextTab.findViewById(mTextViewId);

                    //draw text color
                    Integer selectedColor = (Integer) evaluate(mSelectionOffset, mTextSelectedColor, mTextNormalColor);
                    Integer nextColor = (Integer) evaluate(1 - mSelectionOffset, mTextSelectedColor, mTextNormalColor);

                    if (selectedTextView instanceof TextView && nextTextView instanceof TextView) {
                        ((TextView) selectedTextView).setTextColor(selectedColor);
                        ((TextView) nextTextView).setTextColor(nextColor);
                    }
                }

            }
        }
    }

 

3.定義個FragmentAdapter，這個就略過，比較簡單了

4.做了以上準備工作，就可以寫個測試例子試試效果了，當然這裡為了看到效果，我們需要事先準備好幾張圖片，以及幾個fragment

    private void initViews() {
        //得到apdater
        TabFragmentAdapter mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments);
        ViewPager mPager = (ViewPager) findViewById(R.id.tab_pager);
        mPager.setAdapter(mAdapter);

       //如果當前類需要對viewPager做監聽
        TabContainerView mTabLayout = (TabContainerView) findViewById(R.id.ll_tab_container);
        mTabLayout.setOnPageChangeListener(this);

        mTabLayout.initContainer(getResources().getStringArray(R.array.tab_main_title), ICONS_RES, TAB_COLORS, true);

        int width = getResources().getDimensionPixelSize(R.dimen.tab_icon_width);
        int height = getResources().getDimensionPixelSize(R.dimen.tab_icon_height);
        mTabLayout.setContainerLayout(R.layout.tab_container_view, R.id.iv_tab_icon, R.id.tv_tab_text, width, height);
//        mTabLayout.setSingleTextLayout(R.layout.tab_container_view, R.id.tv_tab_text);
//        mTabLayout.setSingleIconLayout(R.layout.tab_container_view, R.id.iv_tab_icon);

        mTabLayout.setViewPager(mPager);
        mPager.setCurrentItem(getIntent().getIntExtra("tab", 0));
    }

 ManActivity對應的xml就比較簡單了，可以參考源碼，最後運行效果，就是上面的貼圖了，到此防微信的滑動切換就完成了，源碼請訪問以下鏈接：

源碼下載：https://github.com/JarekWang/wechathome.git

 


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

-Advertisement-
Play Games
更多相關文章
  • Android 樣式和主題(style & theme)
    Android 樣式 android中的樣式和CSS樣式作用相似，都是用於為界面元素定義顯示風格，它是一個包含一個或者多個view控制項屬性的集合。如：需要定義字體的顏色和大小。 在CSS中是這樣定義的： 可以像這樣使用上面的css樣式：<div class="wu">wuyudong‘blog</d ...
  • 轉載--iOS，UIScrollView的相關屬性,方法
    http://blog.sina.com.cn/s/blog_45e2b66c01019wfg.html UIScrollView 快速滑動過程中，滾動速度過快，可以通過屬性decelerationRate控制。 decelerationRate範圍為0 1，一般0 0.5沒有多少區別。0也沒有問題 ...
  • 中文 iOS/Mac 開發博客列表
    中文 iOS/Mac 開發博客列表 ...
  • Android橫屏下Fragment界面重疊問題
    前言： 項目是基於平板開發的，設計的界面是要求橫屏展示界面。所以我將所有的Activity都強制設置為橫屏 問題： 主界面，最常見的Activity+n個Fragment 我這裡使用的hide、show Fragment的方式來切換Fragment，當關閉手機、平板屏幕再打開，會發現Fragment ...
  • ios 獲取與修改類私有屬性與實例變數
    1 #import "Cat.h" 2 3 @interface Cat () 4 5 @property (nonatomic, copy) NSString *name; 6 7 @end 8 9 @implementation Cat{ 10 int age; 11 } 12 13 -(ins ...
  • App開發流程之字元串處理工具類
    記錄字元串的處理，不是一個簡單的工作。 NSString是代碼中隨處可見的類型，也是應用和處理繁多的對象，在此只記錄需要常備的方法，並且加以說明。 說明： 1.計算字元串尺寸的方法，sizeWithFont系列方法已經被廢物，建議改為boundingRectWithSize方法；NSAttribut ...
  • React Native知識12-與原生交互
    一：原生傳遞參數給React Native 1：原生給React Native傳參 原生給JS傳數據，主要依靠屬性。 通過initialProperties，這個RCTRootView的初始化函數的參數來完成。 RCTRootView還有一個appProperties屬性，修改這個屬性，JS端會調用 ...
  • 解讀AppIcon圖標設置置信息和App記憶體警告臨界值
    前面有同學問到了iOS記憶體警告臨界值和工程項目里AppIcon的一些配置信息，相信對剛入行的同學來說，可能都會碰到類似的問題，記錄一下供後來者查詢。 1、先簡單說下AppIcon的圖標的配置信息 1）、在右邊的App Icon勾選項，暫時只選擇了支持iPhone iOS7.0 and Later, ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類