單元六

引導頁面制作App學習導讀

首次運行App時，經常會看到3～5個設計新穎、圖文并茂的頁面，這些頁面用來介紹App的功能與特點，讓用戶了解App，吸引用戶，此技術是通過ViewPager組件實現的。而微信、QQ、今日頭條等App，在頁面操作的過程中可以通過左右滑動來切換頁面，這種結構是采用iewPager+Fragment來實現的，而此種結構是Android開發中的一種經典結構。通過本單元的學習，幫助讀者掌握ViewPager組件及ViewPager+Fragment結構的應用。學習目標知識目標：1．了解ViewPager組件、TabLayout組件和shape標簽及其子標簽的屬性；2．掌握PagerAdapter和FragmentPagerAdapter的抽象方法；3．掌握Fragment動態加載的方法。技能目標：1．能夠利用ViewPager組件實現引導頁面的制作；2．能夠利用shape標簽繪制各種圖形；3．能夠動態加載Fragment并進行優化；4．能夠利用ViewPager+Fragment經典結構搭建框架。素養目標：1．了解計算機軟件從業人員應當具備的職業道德；2．樹立正確的技能觀，努力提高自己的職業技能，為社會和人民造福。思維導圖6.1ViewPager簡介ViewPager是一個簡單的頁面切換組件，是一個視圖組容器，可以向容器內部添加多個視圖，實現左右滑動功能，從而達到顯示不同視圖的目的。PagerAdapterFragmentPagerAdapterFragmentStatePagerAdapter6.2PagerAdapterPagerAdapter是抽象類PagerAdapter1.getCount()2.instantiateItem(ViewGroupcontainer,intposition)3.destroyItem(ViewGroupcontainer,intposition,Objectobject)4.isViewFromObject(Viewview,Objectobj)6.3shape標簽

在Android開發中，使用shape標簽可以很方便地幫助我們繪制想要的形狀作為組件的背景。使用shape標簽繪制組件背景不僅比引用圖片來做組件的背景App的安裝包要小得多，而且shape形式的背景能夠更好地適配不同的手機型號。shape標簽可以繪制矩形（Rectangle）、橢圓形（Oval）、線（Line）、環形（Ring）四種形狀。6.3.1創建shape文件

<shapexmlns:android="/apk/res/android"

android:shape="rectangle"></shape>android:shape屬性值可以設置為Rectangle、Oval、Line、Ring值6.3.2shape子標簽1．corners<corners//定義圓角

android:radius="15dp"http://全部的圓角半徑

android:topLeftRadius="10dp"http://左上角的圓角半徑

android:topRightRadius="10dp"http://右上角的圓角半徑android:bottomLeftRadius="10dp"http://左下角的圓角半徑android:bottomRightRadius="10dp"/>//右下角的圓角半徑6.3.2shape子標簽2．gradient<gradient

android:type=["linear"|"radial"|"sweep"]//線性漸變（默認）/放射漸變/掃描式漸變

android:angle="integer"http://漸變角度，其值是45的倍數

android:centerX="float"http://漸變中心x坐標值，取值范圍為0～1，默認值為0.5android:centerY="float"http://漸變中心y坐標值，取值范圍為0～1，默認值為0.5

android:startColor="color"http://漸變開始點的顏色

android:centerColor="color"http://漸變中間點的顏色，在開始點與結束點之間

android:endColor="color"http://漸變結束點的顏色

android:gradientRadius="float"http://漸變的半徑，只有當漸變類型為radial時才能使用

android:useLevel=["true"|"false"]/>//默認值為false，使用層圖形時需要設置為true。6.3.2shape子標簽3．padding<padding

android:top="10dp"http://設置上側內邊距

android:left="10dp"http://設置左側內邊距

android:bottom="10dp"http://設置下側內邊距

android:right="10dp"http://設置右側內邊距/>6.3.2shape子標簽4．size<size

android:width="100dp"http://寬

android:height="100dp"http://高/>5．solid<solidandroid:color="color"/>6.3.2shape子標簽6．stroke<stroke

android:width="5dp"http://邊框的寬度

android:color="color"http://邊框的顏色

//以下兩個屬性用于設置虛線

android:dashWidth="5dp"http://虛線的寬度，值為0時表示實線

android:dashGap="5dp"/>//虛線的間隔6.3.2shape子標簽6．stroke<stroke

android:width="5dp"http://邊框的寬度

android:color="color"http://邊框的顏色

//以下兩個屬性用于設置虛線

android:dashWidth="5dp"http://虛線的寬度，值為0時表示實線

android:dashGap="5dp"/>//虛線的間隔6.3.3shape使用1．左上、左下圓角文本框的制作2．虛線的制作6.3.3shape使用3．漸變橢圓文本框的制作4．漸變環形文本框的制作6.4引導頁面實現引導頁面是指顯示在啟動畫面之后、進入主頁面之前用戶所看到的一系列畫面，它的作用是在用戶使用App之前提前告知該產品的主要功能和特點。當用戶看到一個精美的引導頁面時，會激發內心的使用欲望、加深對App的印象和好感；反之，則會質疑App是否粗制濫造，可能決定不使用此App。而引導頁面是由一組連貫的頁面組成，每一頁都采用統一的格式，包括一句簡短的標題、文案、解釋文案的插圖、分頁點等。6.4.1住房公積金App引導頁面設計

運行住房公積金App，實現左右滑動時顯示不同的引導頁面，同時指引也隨之變化，表示當前顯示第幾個引導頁面，當滑到最后一個引導頁面時，則有【立即體驗】字樣，如果單擊【立即體驗】，則進入App主頁面。6.4.2住房公積金App引導頁面實現案例涉及到技術1.shape技術制作圓形，制作藍色圓形和淺藍色圓形2.ViewPager組件顯示引導頁面3.PagerAdapter適配器實例化引導頁面4.ViewPager的OnPageChange事件，頁面內容變化而產生的事件6.4.2住房公積金App引導頁面實現1．引導頁面布局文件的設計

5個引導頁面布局文件分別是layout1.xml至layout5.xml，其主要功能是設置引導圖片2．形狀的制作

設計兩個形狀，一個是填充色為藍色的圓形形狀，另一個是填充色為淺藍的圖形形狀，用于控制指引文本框的背景。3．主布局文件的制作主布局文件根元素采用FrameLayout，即分層控制組件顯示。放置一個ViewPager組件，其充滿整個頁面。然后放置一個LinearLayout控制5個指引文本框水平排列，同時把LinearLayout置于頁面的底部。最后再用一個文本框來顯示【立即體驗】，也將其置于頁面的底部，但設置為不顯示該組件（android:visibility="gone"），同時設置其底邊距，把它調到LinearLayout的上方即可。6.4.2住房公積金App引導頁面實現4．PagerAdapter的設計publicclassMyPagerAdapterextendsPagerAdapter{

publicintgetCount(){

returnlist.size();

}

publicbooleanisViewFromObject(@NonNullViewview,@NonNullObjectobject){

returnview==object;

//判斷view與object是否為同一個視圖

}publicvoiddestroyItem(@NonNullViewGroupcontainer,intposition,@NonNullObjectobject){

//從容器中移除View對象

Viewview=list.get(position);

//獲得position對應的View對象

container.removeView(view);//從容器中移除該對象}publicObjectinstantiateItem(@NonNullViewGroupcontainer,intposition){

//把View對象添加到容器中

Viewview=list.get(position);//獲得position對應的View對象

container.addView(view);//把View對象添加到容器中

returnlist.get(position);

}}6.4.2住房公積金App引導頁面實現5．MainActivity代碼的實現利用View.inflate()方法把5個布局文件實例化成5個View對象，并放入List集合中；通過監聽ViewPager組件的PageChange事件，重寫onPageSelected(intposition)方法完成指引文本框的背景變換和【立即體驗】是否顯示。6.5ViewPager+Fragment經典結構

ViewPager+Fragment是當前Android流行的一種經典結構，Fragment嵌套在ViewPager中，ViewPager負責實現左右滑動功能，Fragment負責實現頁面顯示功能。6.5.1Fragment

Android是在Android3.0（APIlevel11）開始引入Fragment的，Fragment的含義是碎片，即嵌入Activity的碎片。起初Fragment是為了適配大尺寸屏幕平板電腦、智能電視而設計的技術，現在在小屏幕手機上也經常使用到，而ViewPager+Fragment結構是一種經典結構。1．Fragment和Activity之間的關系Fragment可以擁有自己的布局，具有自己的行為及自己的生命周期回調多個Fragment可以在一個Activity中構建，一個Fragment可以被用在多個Activity中。

當Activity運行時，可以在其中添加或者移除Fragment。Fragment的生命周期和它的宿主活動密切相關，Activity被暫停時，其所擁有的Fragment也被暫停。6.5.1Fragment2．Fragment生命周期6.5.1Fragment3．靜態加載Fragment

首先給Fragment創建布局文件，之后創建Fragment子類，在onCreateView()方法中，實例化布局文件作為返回值。在主布局文件中通過fragment標簽引用已創建的Fragment子類。6.5.1Fragment4．動態加載Fragment

動態加載Fragment涉及FragmentManager類和FragmentTransaction類。FragmentManager用于管理Activity中的Fragment，進行Fragment的出入棧管理，而這一系列的操作都會通過FragmentTransaction作為一個基本單元進行提交、生效。第一步：獲得FragmentManager對象。通過Activity類提供的getSupportFragmentManager()方法獲得FragmentManager對象。第二步：開啟事務。調用FragmentManager類的beginTransaction()方法開啟事務，該方法返回FragmentTransaction對象。第三步：向容器內添加或替換一個Fragment。調用FragmentTransaction類的add()或者replace()方法，其方法參數需要傳入容器的id和Fragment對象。第四步：提交事務。調用FragmentTransaction類的commit()方法實現事務提交。6.5.2FragmentPagerAdapter在Android開發中，經常會使用ViewPager+Fragment組合來實現多頁面的切換和滑動操作，此時使用的適配器是FragmentPagerAdapter。FragmentPagerAdapter是PagerAdapter的一個子類，用來實現Fragment在ViewPager中進行滑動切換功能，它將每一個頁面表示為一個Fragment，并把每一個Fragment都保存到FragmentManager中。當用戶不再回到頁面的時候，FragmentManager就會將這個Fragment銷毀。重寫getItem(intposition)和getCount()兩個抽象方法。6.5.3TabLayoutTabLayout組件一般用于實現導航。TabLayout一般與ViewPager+Fragment結構組合使用以實現滑動的標簽選擇器。1．TabLayout組件結構TabLayout組件主要由TabItem（標簽項）和Indicator（指示器）組成，標簽項可以由文字和圖片組成，圖片可以放在文字的上、下、左、右位置。指示器是一個帶顏色的水平線段，表示當前選中的標簽項。6.5.3TabLayout2．TabLayout組件屬性app:tabIndicatorColor屬性用來設置標簽項被選中時，指示器的顏色。app:tabIndicatorHeight屬性用來設置指示器的高度，如果不需要指示器，可以設置為0dp。app:tabIndicatorFullWidth="false|true"屬性用來設置指示器是否充滿標簽項的寬度。app:tabSelectedTextColor屬性用來設置標簽項選中時的字體顏色。app:tabTextColor屬性用來設置標簽項未選中時的字體顏色。app:tabBackground屬性用來設置整個TabLayout的顏色。6.5.3TabLayout3．靜態加載TabLayout<com.google.android.material.tabs.TabLayout

android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <com.google.android.material.tabs.TabItem

android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="關注"/> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="推薦"/><com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content"android:text="科技"/></com.google.android.material.tabs.TabLayout>6.5.3TabLayout4．動態加載TabLayout//創建標簽項TabLayout.TabtabItem1=tabLayout.newTab();tabItem1.setText("關注");

TabLayout.TabtabItem2=tabLayout.newTab();tabItem2.setText("推薦");TabLayout.TabtabItem3=tabLayout.newTab();tabItem3.setText("科技");TabLayout.TabtabItem4=tabLayout.newTab();tabItem4.setText("體育");//添加標簽項tabLayout.addTab(tabItem1);tabLayout.addTab(tabItem2);

tabLayout.addTab(tabItem3);tabLayout.addTab(tabItem4);//添加事件tabLayout.addOnTabSelected