Android使用Toolbar代替ActionBar
1.通常需要配置三个styles.xml
默认styles配置主题
<!-- Base application theme. 隐藏掉ActionBar即可--> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--<item name="colorPrimary">@color/colorPrimary</item>--> <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <item name="colorAccent">@color/colorAccent</item> </style>
values-v19/styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--<item name="colorPrimary">@color/colorPrimary</item>--> <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <item name="android:windowTranslucentStatus">true</item><!--状态栏透明--> <item name="android:windowTranslucentNavigation">false</item><!--导航栏不透明,否则底部会导致内容被覆盖--> <item name="colorAccent">@color/colorAccent</item> </style> </resources>values-v21/styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!--<item name="colorPrimary">@color/colorPrimary</item>--> <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <!--<item name="android:windowTranslucentStatus">true</item>--> <!--<item name="android:windowTranslucentNavigation">true</item>--> <item name="android:windowTranslucentStatus">false</item><!--这个值设置false,statusBarColor状态栏透明--> <item name="android:windowTranslucentNavigation">false</item><!--导航栏不透明,否则底部会导致内容被覆盖--> <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色--> <item name="android:statusBarColor">@android:color/transparent</item><!--状态栏透明--> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
2.自定义一个ToolBar的layout/view_toolbar.xml
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:elevation="3dp"> <!--app:navigationIcon="@drawable/navigationicon"--> <!--android:navigationIcon="@drawable/navigationicon"--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/home_top_bg" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:logo="@drawable/home_logo" app:layout_scrollFlags="scroll|enterAlways"> <!--android:fitsSystemWindows="true"--> <!--<ImageView--> <!--android:layout_width="wrap_content"--> <!--android:layout_height="wrap_content"--> <!--android:background="@drawable/home_logo"/>--> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:textSize="@dimen/middle_size" android:textColor="@color/white" android:id="@+id/delay"/> </RelativeLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout>
3.引用Toolbar布局
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/all_match_parent" android:orientation="vertical"> <ImageView style="@style/all_match_parent" android:background="@drawable/qr_authorization_bg"/> <LinearLayout style="@style/all_match_parent" android:orientation="vertical"> <include layout="@layout/view_toolbar"/>
</LinearLayout> </FrameLayout>
4.自定义Activity的基类ToolBarActivity
/** * Toolbar基类 */ public abstract class ToolbarActivity extends AppCompatActivity { abstract protected int provideContentViewId(); public void onToolbarClick() {} protected AppBarLayout mAppBar; protected Toolbar mToolbar; protected TextView delay; protected boolean mIsHidden = false; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(provideContentViewId()); mAppBar = (AppBarLayout)findViewById(R.id.app_bar_layout); mToolbar = (Toolbar)findViewById(R.id.toolbar); delay = (TextView)findViewById(R.id.delay); delay.setVisibility(View.GONE); if(mToolbar == null && mAppBar == null){ throw new IllegalStateException( "The subclass of ToolbarActivity must contain a toolbar."); } mToolbar.setOnClickListener(v -> onToolbarClick()); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
//设置大于等于Build.VERSION_CODES.KITKAT版本,则Toolbar占据状态栏的空间 { mToolbar.getLayoutParams().height = getAppBarHeight(); mToolbar.setPadding(mToolbar.getPaddingLeft(), getStatusBarHeight(), mToolbar.getPaddingRight(), mToolbar.getPaddingBottom()); } //设置标题为空 mToolbar.setTitle(""); // // App Logo // mToolbar.setLogo(R.mipmap.ic_launcher_round); setSupportActionBar(mToolbar); // Navigation Icon 要設定在 setSupoortActionBar 才有作用 // 否則會出現 back button // mToolbar.setNavigationIcon(R.mipmap.ic_launcher_round); if(canBack()){ ActionBar actionBar = getSupportActionBar(); if(actionBar != null){ actionBar.setDisplayHomeAsUpEnabled(true); } } if(Build.VERSION.SDK_INT>=21){ mAppBar.setElevation(10.6f); } } private int getAppBarHeight() { return dip2px(56)+getStatusBarHeight(); } private int getStatusBarHeight() { int result = 0; int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) { result = getResources().getDimensionPixelSize(resourceId); } return result; } private int dip2px(float dipValue) { final float scale = getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f); } public boolean canBack(){ return false; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { onBackPressed(); return true; } else { return super.onOptionsItemSelected(item); } } protected void setAppBarAlpha(float alpha) { mAppBar.setAlpha(alpha); } protected void hideOrShowToolbar(){ mAppBar.animate() .translationY(mIsHidden ? 0 : -mAppBar.getHeight()) .setInterpolator(new DecelerateInterpolator(2)) .start(); mIsHidden = !mIsHidden; } }
5.继承ToolBarActivity类就可以正常显示ToolBar了
public class AccountListActivity extends ToolbarActivity{
@Override
protected int provideContentViewId() {
return R.layout.activity_account_list;
}
@Override
public boolean canBack() {
return true;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
}
6.注意底部导航栏问题
/** * 需要将 <item name="android:windowTranslucentNavigation">false</item> 属性设置为 false ,是 Navigation Bar 不透明,但效果却并没有变成我们想象的那样,Status Bar 的样式完全失效。 事实上,android:windowTranslucentNavigation 这个属性额外设置了 SYSTEM_UI_FLAG_LAYOUT_STABLE 和 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 两个 flag。所以我们需要再绘制完 Status Bar 以后重新请求这两个 flag 。 在 onCrate 方法中调用 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); 在ToolBarActivity的onCreate方法中加入下面这句话就可以了 */ getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
7.效果图如下