美團App首頁實現之Category_HeaderView可翻頁實現

標籤：美團首頁布局實現

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/F7/wKioL1WNYcGCAWC_AAB0m_mGCis903.jpg" title="meituan_main_header01.png" alt="wKioL1WNYcGCAWC_AAB0m_mGCis903.jpg" />

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/FB/wKiom1WNYATg_d-bAACTRz9BN0s370.jpg" title="meituan_main_header02.png" alt="wKiom1WNYATg_d-bAACTRz9BN0s370.jpg" />

一。主要實現功能：

    自訂indicator，側滑頁面切換頁面內容，indicator跟著變化；

二。實現步奏：

    1.自訂ViewPagerIndicator

      ①：定義三個不同顏色的畫筆

          

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/F7/wKioL1WNZaqzeD2OAAEa2uIYizc765.jpg" title="meituan_main_header實現01.png" alt="wKioL1WNZaqzeD2OAAEa2uIYizc765.jpg" />

       ②：在畫布上畫三個靜態圓

                    650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/F8/wKioL1WNZ2eQtgvNAACtmRlHL9s882.jpg" title="meituan_main_header實現02.png" alt="wKioL1WNZ2eQtgvNAACtmRlHL9s882.jpg" />

       ③：改變CX值使indicator置中

                      650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/6E/F8/wKioL1WNZ_TRgE3lAACmKo9sIs8701.jpg" title="meituan_main_header03.png" alt="wKioL1WNZ_TRgE3lAACmKo9sIs8701.jpg" />

       ④：設定移動的方法，當移動到最後一個時，不能再移動

                      650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/FB/wKiom1WNZ07g_qKGAADCm0o23d0589.jpg" title="meituan_main_header04.png" alt="wKiom1WNZ07g_qKGAADCm0o23d0589.jpg" />

    2.實現片段添加

      ①： 建立空白main_header_category,viewPager和indicator同級，如

                    650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/6E/FB/wKiom1WNaDzxUj0lAADuWHX9jig536.jpg" title="meituan_main_header05.png" alt="wKiom1WNaDzxUj0lAADuWHX9jig536.jpg" />

      ②：建立片段category01,實現布局：

                      650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/FB/wKiom1WNag2jYftKAADmLRSZOJ0948.jpg" title="meituan_main_header06.png" alt="wKiom1WNag2jYftKAADmLRSZOJ0948.jpg" />

     ③：在categoryFragment中根據頁碼設定不同資料來源

          

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/F8/wKioL1WNbwfQsBAZAAG15-zua0c094.jpg" title="meituan_main_header07.png" alt="wKioL1WNbwfQsBAZAAG15-zua0c094.jpg" />

        特別注意textView中drawable資料來源要如此設定：

          650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/F8/wKioL1WNb57gdWXPAAEFYMnwZyg202.jpg" title="meituan_main_header08.png" alt="wKioL1WNb57gdWXPAAEFYMnwZyg202.jpg" />

      ④： 在首頁所在片段中初始化該headerView及其所包含的ViewPage和indicator

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/F8/wKioL1WNcIXAcjyZAAFU8amiVO0271.jpg" title="meituan_main_header09.png" alt="wKioL1WNcIXAcjyZAAFU8amiVO0271.jpg" />

      ⑤： 設定該headerview的PagerChangerListener，設定其適配器，使其根據PagerPosition切換頁面資料來源，從而改變內容

        650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/6E/FB/wKiom1WNb2ah6wDIAAHuh2i6J3g188.jpg" title="meituan_main_header10.png" alt="wKiom1WNb2ah6wDIAAHuh2i6J3g188.jpg" />

   3.ListView添加HeaderView

     

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/F8/wKioL1WNcpHQFExzAAL0EmeZTI0897.jpg" style="float:none;" title="meituan_main_header11.png" alt="wKioL1WNcpHQFExzAAL0EmeZTI0897.jpg" />

     最終首頁多個HeaderView效果如

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/6E/FB/wKiom1WNcNWjMsP-AAFrprdIZmk920.jpg" style="float:none;" title="meituan_main_header12.png" alt="wKiom1WNcNWjMsP-AAFrprdIZmk920.jpg" />

本文出自 “愚人cc” 部落格，請務必保留此出處http://1137907860.blog.51cto.com/10452906/1666097

美團App首頁實現之Category_HeaderView可翻頁實現