preface
The so-called tear here refers to the status bar does not move with the content layout when you slide back to the next level of the page, resulting in the status bar and the content layout are not linked, separated from the problem.
Xiaohongshu APP Settings page | Wechat APP page |
---|---|
Problem analysis
Here, the setting page of Xiaohongshu APP is taken as an example for analysis. The page layout is checked by UIAutomatorViewer. The layout structure is as follows:
- The page uses the system status bar (
id
forandroid:id/statusBarBackground
), the background color of the status bar is white. - The sideslip layout does not contain the system status bar. When the sideslip returns, the content layout is sliding and the system status bar is fixed.
The solution
To make the status bar slide with the content layout, the general solution is as follows:
- Set the background color of the system status bar to transparent.
- The page layout extends to the status bar area, and the page is responsible for drawing the status bar. The slide layout contains the status bar area.
- Custom views fill the status bar area or set the top layout of the page to the status bar height, as in TitleBar topPadding.
Code implementation
The SwipeBackLayout control is added to the onPostCreate method, so we override the onPostCreate method and adapt the status bar in this method.
- The base class
BaseActivity
inheritanceSwipeBackActivity
Define some status bar and navigation bar related methods.
/** * Get the custom status bar View, if null, use the default View to fill the status bar area */
protected open fun getStatusBarView(a): View? {
return null
}
/** * Status bar color */
protected open fun statusBarColor(a): Int {
return R.color.white
}
/** * Navigation bar color */
protected open fun navigationBarColor(a): Int {
return R.color.white
}
/** * Status bar font color is highlighted */
protected open fun statusBarDarkFont(a): Boolean {
return true
}
/** * Navigation bar font color is highlighted */
protected open fun navigationBarDarkFont(a): Boolean {
return true
}
Copy the code
- cover
onPostCreate
Method to set the status bar and navigation bar background and font color.
@Override
override fun onPostCreate(savedInstanceState: Bundle?). {
super.onPostCreate(savedInstanceState)
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
/** * Set the background color of the system status bar to transparent */
window.statusBarColor = Color.TRANSPARENT
var uiFlags = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
/** * highlight the status bar font */
if(statusBarDarkFont()) {
uiFlags = uiFlags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
}
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
/**
* 高亮导航栏字体
*/
if(navigationBarDarkFont()) {
uiFlags = uiFlags or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
}
}
window.decorView.systemUiVisibility = uiFlags
/**
* 获取状态栏高度
*/
val statusBarHeight = ScreenHelper.getStatusbarHeight(this)
/** * get the status bar View */
var statusBarView=getStatusBarView()
if(statusBarView==null) {
statusBarView = View(this)
statusBarView.id = R.id.status_bar_id
val contentView = window.decorView.findViewById(android.R.id.content) as ViewGroup
/** * set the Padding */
contentView.getChildAt(0).setPadding(0, statusBarHeight, 0.0)
/** * Add status bar layout */
contentView.addView(statusBarView, ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, statusBarHeight))
}
else{
setStatusBarHeight(statusBarView)
}
statusBarView.setBackgroundColor(ContextCompat.getColor(applicationContext,statusBarColor()))
window.navigationBarColor = ContextCompat.getColor(applicationContext,navigationBarColor())
}
Copy the code
/** * Set View height to status bar height */ fun setStatusBarHeight(View :View? { if(view==null){ return } val fixHeight=ScreenHelper.getStatusbarHeight(this) var layoutParams = view.layoutParams if (layoutParams == null) { layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT) } if (layoutParams.height == ViewGroup.LayoutParams.WRAP_CONTENT || layoutParams.height == ViewGroup.LayoutParams.MATCH_PARENT) { val finalLayoutParams = layoutParams view.post(Runnable { finalLayoutParams.height = fixHeight view.layoutParams = finalLayoutParams }) } else { layoutParams.height = fixHeight view.layoutParams = layoutParams } }Copy the code
Implementation effect
1 | 2 |
---|---|
GitHub
Github.com/kongpf8848/…