安卓開發小總結

加入 LINE@ 趣聞不漏接

內容目錄

2-2.可折疊式標題欄圖片發自簡書App

這個效果很酷，但是用design控件做到起來很簡單。

<android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayoutandroid:id="@+id/detailsAppBar"android:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/detailsCollapsingToolbarLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?android:attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><ImageViewandroid:id="@+id/cover"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFAEAEAE"android:fitsSystemWindows="true"app:layout_collapseMode="parallax"/></LinearLayout><android.support.v7.widget.Toolbarandroid:id="@+id/detailsToolbar"android:layout_width="match_parent"android:layout_height="?android:attr/actionBarSize"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.v7.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="15dp"android:layout_marginLeft="15dp"android:layout_marginRight="15dp"android:layout_marginTop="35dp"app:cardCornerRadius="4dp"><TextViewandroid:id="@+id/detailsTextView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:layout_margin="10dp"/></android.support.v7.widget.CardView></LinearLayout></android.support.v4.widget.NestedScrollView><android.support.design.widget.FloatingActionButtonandroid:id="@+id/detailsFloatingActionButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="20dp"android:src="@drawable/ic_launcher"app:layout_anchor="@id/detailsAppBar"app:layout_anchorGravity="bottom|end"/></android.support.design.widget.CoordinatorLayout>

依舊是CoordinatorLayout作為根布局，相比3-1的布局,appBarLayout內又包裹了一層CollapsingToolbarLayout，CollapsingToolbarLayout又包裹了Toolbar和其他控件。

CollapsingToolbarLayout是一個增強型的FrameLayout，我們將其android:fitsSystemWindows設置為true,使其可以出現在狀態欄，但是必須將其所有的父布局都設置上並且將狀態欄設為透明才會生效。

為該Activity定義一個style 繼承自AppTheme 只是將狀態欄改成透明

<stylename="DetailsTheme"parent="AppTheme"><itemname="android:statusBarColor">@android:color/transparent</item></style>在AndroidManifest.xml中為該活動設置樣式android:theme="@style/DetailsTheme"

對於NestedScrollView，和3-1布局RecyclerView一樣，設置了

app:layout_behavior="@string/appbar_scrolling_view_behavior"

但是響應 NestedScrollView 的不再是 Toolbar，而是CollapsingToolbarLayout，app:layout_scrollFlags的值也變了。因為我們做到了不同的效果，滾動到最後只剩下toolbar，所以用exitUntilCollapsed，使CollapsingToolbarLayout滾動到最小高度。

至於CollapsingToolbarLayout內子控件的app:layout_collapseMode屬性，是指定子控件在隨父控件滾動折疊時的模式：「pin」：固定模式，在折疊的時候最後固定在頂端；「parallax」：視差模式，在折疊的時候會有個視差折疊的效果。

三.TabLayout+ViewPager+FragmentPagerAdapter

1.基本使用

這個選擇播放源和劇集的功能便是由TabLayout+ViewPager+FragmentPagerAdapter 做到，碎片的布局就是一個GridView。

當初學習使用這個組合的時候，一臉懵逼，這也不懂那也不會。後來用了幾次，就縷清楚了。

先在Activity的布局里添加TabLayout和ViewPager,然後新建一個碎片或幾個碎片，根據數據類型和功能為碎片寫上布局，最後自定義一個FragmentPagerAdapter將ViewPager和Fragment二者聯繫起來。

①添加控件

<android.support.design.widget.TabLayoutandroid:id="@+id/source_tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabSelectedTextColor="#ff7a61"app:tabIndicatorHeight="0dp"app:tabBackground="@color/tabBg"app:tabMode="fixed"/><android.support.v4.view.ViewPagerandroid:id="@+id/movie_href_list_viewPager"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"/>

②新建碎片及布局

publicclassDetailFragmentextendsFragment{List<Map<String,String>>movieHrefList;Viewview=null;Contextcontext;GridViewgridView;publicDetailFragment(List<Map<String,String>>movieHrefList){//把要給GridView填充的數據傳遞進來this.movieHrefList=movieHrefList;}@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){//TODO:Implementthismethod//為碎片設置布局if(view==null)view=inflater.inflate(R.layout.detail_fragment,container,false);context=view.getContext();gridView=(GridView)view.findViewById(R.id.detail_fragment_gridView);//為GridView設置適配器：繪制布局、填充數據SimpleAdapteradapter=newSimpleAdapter(context,movieHrefList,R.layout.movie_href_item,newString[]{"title"},newint[]{R.id.movie_href_itemTextView});gridView.setAdapter(adapter);//返回碎片的布局returnview;}}

③自定義FragmentPagerAdapter將碎片添加到ViewPager中，並使TabLayout和ViewPager做到聯動

publicclassDetailFragmentPagerAdapterextendsFragmentPagerAdapter{//要添加的碎片List<Fragment>fragList=newArrayList<Fragment>();//TabLayout的標題List<String>titleList=newArrayList<String>();publicDetailFragmentPagerAdapter(FragmentManagerfm,List<Fragment>fragList,List<String>titleList){super(fm);this.fragList=fragList;this.titleList=titleList;}@OverridepublicintgetCount(){//返回ViewPager的頁數returnfragList.size();}@OverridepublicFragmentgetItem(intp1){//返回每一個碎片returnfragList.get(p1);}@OverridepublicCharSequencegetPageTitle(intposition){//返回TabLayout的標題returntitleList.get(position).toString();}}

④為ViewPager設置適配器，並做到與TabLayout的聯動

DetailFragmentPagerAdapteradapter=newDetailFragmentPagerAdapter(getSupportFragmentManager(),fragList,movieSource);viewPager.setAdapter(adapter);

//這一句呼應適配器中重寫的getPageTitle方法，如果沒有TabLayout，那麼它們便不用寫

tabLayout.setupWithViewPager(viewPager);

2.遇到的問題

這里遇到的問題不是這個組合所產生的，而是由於控件嵌套使用造成的，比如：

①NestedScrollView嵌套ViewPager造成的

ViewPager不顯示(猜想是高度為0，沒有繪制出來)

不知道什麼原因，高度設置match或者wrap都不管用。

搜尋一圈，解決方法如下：

設置NestedScrollView的fillViewPort屬性true|設置ViewPager為固定高度|動態計算ViewPager內容的高度並賦值

我選了第一個，本來想選第三個，那是最優的解決辦法，但是實在是搞不出來，以後有時間再說。

②NestedScrollView嵌套GridView，GridView無法滾動、顯示不全典型的滑動衝突，滑動操作全部被NestedScrollView消費掉了，解決辦法：

自定義NestedScrollView，重寫onInterceptTouchEvent方法

publicclassDetailNestedScrollViewextendsNestedScrollView{publicDetailNestedScrollView(Contextcontext){super(context);}publicDetailNestedScrollView(Contextcontext,AttributeSetattrs){super(context,attrs);}@OverridepublicbooleanonInterceptTouchEvent(MotionEventev){//TODO:Implementthismethodreturnfalse;}}

當在其子控件上滑動時，不再由其消費滑動。顯示不全，那就給子項的布局指定確切的高度。

推薦↓↓↓