沉浸式状态栏(顶部状态栏和底部导航栏)
Toolbar的使用注意点以及封装
WToolBarLayout
toolbar的属性
<!--toolbar的基本使用-->
<?xml version="1.0" encoding="utf-8"?>
<com.a50647.wtoolbarhelper.ToolBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/common_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isHalfTrans="false">
<android.support.v7.widget.Toolbar
android:id="@+id/common_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ToolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/Common_Menu_Style">
<TextView
android:id="@+id/common_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:textColor="@color/common_white"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</com.a50647.wtoolbarhelper.ToolBarLayout>
以上,就是对于toolbar布局的体现,下面就来具体介绍一下几个重要属性所起到的作用(一般来讲,我们都需要对这几个属性进行处理的)
如未配置沉浸式,则只需将包裹的WToolbarLayout去掉即可
WToolbarLayout是我自己写的一个可以帮助在沉浸式模式下,实现我们自己的状态栏的小工具,在这一篇当中涉及到的并不
多,这里可以忽略,可以暂时当作在toolbar上方填充了一个自定义的状态栏
<!--边距-->
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
这个边距,指的是在不显示back键的时候,toolbar所包裹的内容,距离开始(一般指左边的距离,是有一个默认距离的
,如果我们希望其中的toolbar所包裹的内容可以顶边,则需要自己将这个距离设置为0)
如图: 边距的效果
<!--距离back键的边距-->
app:contentInsetStartWithNavigation="0dp"
这个边距,指的是在显示back键的时候,toolbar所包裹的内容,距离back键的边距,也是有一个默认的距离,这就是很多
小伙伴说,在使用toolbar的时候,标题距离back键太远的原因,我们也是可以进行调整的
边距的效果 - 默认
边距的效果 - 设置
<!--主题-->
android:theme="@style/ToolbarTheme"
主题的主要作用,就是决定back键以及menu键的颜色
但是需要在v21以上才有作用
附上ToolbarTheme,我这里设置的是白色
value文件夹的styles中
<style name="ToolbarTheme" />
value-v21文件夹的styles中
<style name="ToolbarTheme">
<item name="android:colorControlNormal">@color/common_white</item>
</style>
<!--弹出pop_menu的样式-->
app:popupTheme="@style/Common_Menu_Style"
注意: 这里的样式是分为两个步骤来完成的,否则没有效果
1. 需要现在values文件夹的styles中定义,各项属性都有注释
<style name="Common_Menu_Style" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<!-- 是否覆盖锚点，默认为true，即盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层背景颜色,或者drawable -->
<item name="android:popupBackground">@color/common_blue_50</item>
<!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar -->
<item name="android:dropDownVerticalOffset">@dimen/dimens_f2</item>
<!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">@dimen/dimens_f2</item>
<!--文字颜色-->
<item name="android:textColor">@color/common_white</item>
</style>
2. 主要在你所作用的activity所使用的主题当中引用
<!--公共的默认配置-->
<style name="CommonDefaultTheme" parent="BaseAppTheme">
...
<!--对于menuStyle的默认配置-->
<item name="actionOverflowMenuStyle">@style/Common_Menu_Style</item>
</style>
比如说这里,我选择一个activity的主题是CommonDefalutTheme,则需要item对于actionOverflowMenuStyle来
进行引用
3. 一般我们会比较关注的是menu所弹出的背景,那么就可以通过
<!-- 弹出层背景颜色,或者drawable -->
<item name="android:popupBackground">@color/common_blue_50</item>
来设置我们想要的背景啦,我这里只是更改了一下颜色
<!--textView的width属性-->
需要采用wrap_content,否则不能居中
toolbar在java代码中需要的配置,以及封装方式
public abstract class BaseActivity extends AppCompatActivity {
protected Context mContext;
protected ToolBarLayout mToolBarLayout;
protected Toolbar mToolbar;
protected TextView mToolBarTitle;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
if (!isSupportScreenShot()) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE, WindowManager.LayoutParams.FLAG_SECURE);
}
translateStatueBar();
super.onCreate(savedInstanceState);
mContext = this;
setContentView(getLayoutId());
initView();
fitScreen();
}
/**
* 沉浸式(默认已在style中配置完成)
*/
protected void translateStatueBar() {
Window window = getWindow();
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}
/**
* 是否支持截屏 默认支持
*
* @return true 支持 false 不支持
*/
protected boolean isSupportScreenShot() {
return true;
}
/**
* 获取布局id
*
* @return 布局id
*/
protected abstract int getLayoutId();
/**
* 初始化view
*/
protected abstract void initView();
/**
* 一些需要代码动态适配的地方
*/
protected void fitScreen() {
}
/**
* 设置默认的title
*
* @param title 标题
* @param isTrans 是否透明
*/
protected void initToolBar(CharSequence title, boolean isTrans) {
initToolBar(title, isTrans, 0);
}
/**
* 设置默认的title并伴随menu的style
*
* @param title 标题
* @param isTrans 是否透明
* @param menuStyle menu的style
*/
protected void initToolBar(CharSequence title, boolean isTrans, int menuStyle) {
mToolBarLayout = findViewById(R.id.common_toolbar_layout);
mToolbar = findViewById(R.id.common_toolbar);
mToolBarTitle = findViewById(R.id.common_title);
if (mToolBarLayout == null) {
return;
}
if (isTrans) {
mToolBarLayout.setBackgroundColor(mContext.getResources().getColor(R.color.transparent));
} else {
mToolBarLayout.setBackground(mContext.getResources().getDrawable(R.drawable.common_bg_title));
}
if (mToolbar == null) {
return;
}
//一定要在setSupportToolBar之前调用
mToolbar.setTitle("");
setSupportActionBar(mToolbar);
if (menuStyle != 0) {
mToolbar.setPopupTheme(menuStyle);
}
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(isSupportDisplayHomeAsUpEnabled());
}
if (mToolBarTitle == null) {
return;
}
mToolBarTitle.setText(title);
}
/**
* 是否支持toolBar的返回键,默认支持
*
* @return true:支持 false:不支持
*/
protected boolean isSupportDisplayHomeAsUpEnabled() {
return true;
}
/**
* toolbar菜单
*
* @param menu 菜单
* @return true 表示支持
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
if (isSupportMenu()) {
getMenuInflater().inflate(getMenuLayout(), menu);
}
return true;
}
/**
* 是否支持菜单栏 默认不支持
*
* @return true:支持 false:不支持,默认false
*/
protected boolean isSupportMenu() {
return false;
}
/**
* 支持菜单栏的情况下才会调用,返回菜单布局
*
* @return 菜单布局
*/
protected int getMenuLayout() {
return R.menu.menu_main;
}
/**
* toolbar回退键
*
* @param item menu中的按钮
* @return boolean
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (android.R.id.home == item.getItemId()) {
onClickToolBarHome();
}
return super.onOptionsItemSelected(item);
}
/**
* 当点击toolBar的home键,默认是backPress,不同地方可重写
*/
protected void onClickToolBarHome() {
onBackPressed();
}
/**
* 在使用toolBar的menu的时候,添加此方法则可以在menu中显示图标
*/
@SuppressLint("RestrictedApi")
@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (!isSupportMenuIcon()) {
return super.onPrepareOptionsPanel(view, menu);
}
if (menu != null) {
if (menu.getClass() == MenuBuilder.class) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onPrepareOptionsPanel(view, menu);
}
/**
* 在使用menu的时候,是否支持menu列表中图标的显示,默认支持
*
* @return true:支持 false:不支持
*/
protected boolean isSupportMenuIcon() {
return true;
}
}
每一个方法都有注释他的作用以及默认值,感兴趣的小伙伴可以自己配置,并改变一些值,尝试一下
不同的效果,当然也可以在github上下载代码,直接看一下我的一些使用
示例activity
public class MainActivity extends BaseActivity {
@Override
protected int getLayoutId() {
return R.layout.activity_main;
}
@Override
protected void initView() {
initToolBar("toolbarLayout", false);
findViewById(R.id.tv).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, SecondActivity.class));
}
});
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int itemId = item.getItemId();
if (itemId == R.id.action_edit) {
startActivity(new Intent(MainActivity.this, SecondActivity.class));
}
return true;
}
});
}
@Override
protected boolean isSupportMenu() {
return true;
}
@Override
protected boolean isSupportDisplayHomeAsUpEnabled() {
return true;
}
@Override
protected int getMenuLayout() {
return R.menu.menu_main;
}
}
menu点击事件
选择对应的id即可
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int itemId = item.getItemId();
if (itemId == R.id.action_edit) {
startActivity(new Intent(MainActivity.this, SecondActivity.class));
}
return true;
}
});
封装使用
首先,需要继承baseActivity
(1)是否支持截屏
true:支持
false :不支持
默认支持
boolean isSupportScreenShot()
(2)初始化toolbar
title: 文本内容
isTrans: 是否支持半透明状态栏, true支持,false不支持
void initToolBar(CharSequence title, boolean isTrans)
可配置menuStyle(需要在activity的style中也配置,就像之前介绍一样)
void initToolBar(CharSequence title, boolean isTrans, int menuStyle)
(3) 是否显示back键
true: 显示
false: 不显示
默认显示
boolean isSupportDisplayHomeAsUpEnabled()
需配合
void onClickToolBarHome()
默认是onBackpressed();
(4) 是否支持menu键
true: 支持
false: 不支持
默认不支持
boolean isSupportMenu()
需配合
int getMenuLayout()
返回一个你所定义的menu,否则就会显示我所给的默认啦
再配合
boolean isSupportMenuIcon();
决定menu当中的图标是否需要显示,true是显示,false是不显示,默认是显示
附上xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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:orientation="vertical">
<include layout="@layout/common_default_toolbar"/>
<TextView
android:gravity="center"
android:id="@+id/tv"
android:text="goSecond"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
common_default_toolbar
<?xml version="1.0" encoding="utf-8"?>
<com.a50647.wtoolbarhelper.ToolBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/common_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isHalfTrans="false">
<android.support.v7.widget.Toolbar
android:id="@+id/common_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ToolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/Common_Menu_Style">
<TextView
android:id="@+id/common_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:textColor="@color/common_white"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</com.a50647.wtoolbarhelper.ToolBarLayout>
menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_edit"
android:orderInCategory="1"
android:title="第一个"
android:icon="@mipmap/ic_launcher_round"
app:showAsAction="never"/>
<item
android:id="@+id/action_share"
android:orderInCategory="2"
android:title="第二个"
app:showAsAction="never"/>
<item
android:id="@+id/action_settings"
android:orderInCategory="3"
android:title="第三个"
app:showAsAction="never"/>
</menu>
两个theme的写法上面已经贴过啦,可以直接使用的,颜色和demin值,就需要大家自己设置一下,这里就不贴了
网友评论