Theme
ActionBar / ToolBar
android.support.design.widget.CollapsingToolbarLayout
android.support.design.widget.AppBarLayout
@、Theme
1、设置NoActionBar
<resources> <!-- Base application theme. --> <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">#3F51B5</item> <!-- Light Indigo --> <item name="colorPrimaryDark">#3949AB</item> <!-- Dark Indigo --> <item name="colorAccent">#00B0FF</item> <!-- Blue --> </style> <style name="AppTheme" parent="AppTheme.Base"></style> </resources>
@、ActionBar / ToolBar
1、Theme设置为NoActionBar,Layout文件中添加
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
然后再代码中设置此Toolbar为ActionBar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); // 设置ActionBar ActionBar supportedActionBar = getSupportActionBar(); if(supportedActionBar != null){ // 设置向上导航的图标。默认为向左的箭头 supportedActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp); // 设置是否显示向上导航: true显示,false不显示;默认为false. supportedActionBar.setDisplayHomeAsUpEnabled(true); }
相关知识:
a、如果没有在onOptionsItemSelected中对android.R.id.home进行处理,则:在AndroidManifest中相应的activity指定了android:parentActivityName,就返回到parentActivity,否则什么都不做。
b、如果是返回parentActivity,则parentActivity会onDestroy, onCreate, onStart, onResume执行一遍。而如果是按返回键,则只是(onStart), onResume。对于主界面有Tab页的时候要注意考虑这种情况。
c、在onOptionsItemSelected进行判断,如果是android.R.id.home,则直接调用finish(),这样也可以到达按返回键的效果。当然如果onBackPressed()没有做特殊处理的话,也可以调用onBackPressed()。
d、应用场景:使用此方法为侧边导航栏添加指示器。
@、android.support.design.widget.CollapsingToolbarLayout
1、对Tookbar进行包装。
2、如果collaspsingToolbarLayout的app:layout_scrollFlags设置为exitUntilCollasped,则对子控件设置app:layout_collapseMode:pin(固定不动,Toolbar上的向上导航和菜单按钮不会消失), parallax(随着CollapsingToolbarLayout移动而移动,Toolbar上的向上导航和菜单按钮会消失),不过最后的高度和宽度就是Toobar的高度和宽度。
3、app:contentScrim指定了最终显示的内容。
@、android.support.design.widget.AppBarLayout
原来这些实现是需要CoordinatorLayout的配合,在使用中竟然没有注意到这点,看了这篇文章,总算有所明白了:Handling Scrolls with CoordinatorLayout。
1、对子控件设置app:layout_scrollFlags:sroll(向上滑(滚动条向下滑),子控件一起向上滑), enterAlways(向下滑(滚动条向上滑),不管滚动条是否滑到顶,子控件都出现,如果不指定该值,则要等滚动条滑到顶,子控件才会出现), enterAlwaysCollasped(这个没有测试出有什么用??), exitUntilCollasped(结合CollapsingToolbarLayout使用,如果CollapsingToolbarLayout的Toolbar把app:layout_collapseMode设置为pin,则该Toolbar上的向上导航和菜单按钮不会消失)。
示例一:AppBarLayout + Toolbar + TabLayout,滑动时Toolbar隐藏,Tab标签保留
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <!-- 配合Theme设置为Theme.AppCompat.Light.NoActionBar使用,这样ActionBar的文字就是浅色的了 -->
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout>
示例二: AppBarLayout + CollapsingToolbarLayout + Toolbar
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="72dp" app:expandedTitleMarginStart="16dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" tools:background="@drawable/a"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="parallax" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>