还是先放图吧:
最近做个小东西,写到了音乐播放界面,颜值这方面网易云音乐绝对是佼佼者呀。于是就像弄出一个类似的效果,然后全屏都是歌曲图片高斯模糊的背景,包括toolbar。
我的布局主要有两层是这个层级结构:
RelativeLayout->Toolbar,ImageView
我最初的思路有两个:
一是把RelativeLayout的background直接设置模糊后的背景;
二是把ImageView的高度设置为match_parent,然后把模糊好的图片设置为它的背景。
可是这么一来,不管是RelativeLayout还是ImageView,我上面的toolbar的所有内容都被这个铺满窗口的背景给覆盖了,我的返回图标,文字,颜色都被覆盖住不能显示出来。
搞了大概几个星期,就在今天,给公司项目加新界面的时候,要用到FrameLayout,于是突然来了灵感,也许我只是少了个FrameLayout呢?FrameLayout可以使得两个控件重叠显示,如果我在布局最外层嵌套一个FrameLayout,那可不可以解决呢?
顺着这个思路,我把FrameLayout放在布局最外层,现在层级结构变成了
FrameLayout->RelativeLayout->Toolbar,ImageView
然后现在再按照上面的两种方法之一设置背景,就实现了Toolbar跟下面整体统一背景了。
曾经被framelayout设置fragment时的重叠问题困扰,现在又能用它的这一特性来解决问题,真好!
下面把主要代码贴上:
布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.activity.MusicPlayActivity">
<RelativeLayout
android:id="@+id/rlMusicPlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="@color/white">
<include
layout="@layout/include_music_play_toolbar"/>
<ImageView
android:id="@+id/ivBg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<pers.ll.likenews.ui.CircleImageView
android:id="@+id/ivMusicPic"
android:layout_width="260dp"
android:layout_height="260dp"
tools:src="@mipmap/ic_launcher"
/>
</FrameLayout>
<RelativeLayout
android:id="@+id/rlSeek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/rlMusicCtrl"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tvCurTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="00:49"
android:textColor="@color/colorAccent"
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"/>
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/tvMusicDuration"
android:layout_toRightOf="@+id/tvCurTime"/>
<TextView
android:id="@+id/tvMusicDuration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="03:49"
android:textColor="@color/colorAccent"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rlMusicCtrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp">
<ImageView
android:id="@+id/ivPause"
android:layout_width="55dp"
android:layout_height="55dp"
android:src="@drawable/ic_pause_circle"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="@+id/ivPrevious"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_skip_previous"
android:layout_toLeftOf="@+id/ivPause"
android:layout_marginRight="20dp"
android:layout_centerVertical="true"/>
<ImageView
android:id="@+id/ivNext"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_skip_next"
android:layout_toRightOf="@+id/ivPause"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"/>
</RelativeLayout>
<ImageView
android:id="@+id/ivRecycle"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/ic_repeat_one"
android:layout_above="@+id/rlSeek"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginBottom="7dp"/>
</RelativeLayout>
</FrameLayout>
java:
这里顺便再记录一下:这个页面的全屏效果的实现,即状态栏和底部导航栏与窗体内容同色。
一开始状态栏是显示的app主题中的colorPrimary颜色,后来我按照一位大神的记录实现了状态栏与窗体内容同色,在此要感谢一下:在有ToolBar的activity中实现标题栏透明,网易云音乐播放页面效果
其实重点就在一句话:
window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
FLAG_LAYOUT_NO_LIMITS是允许窗口扩展到屏幕之外。各个Flag的功能在:WindowManager.LayoutParams详解里面有介绍。
但是我写了以后,会出现Toolbar被顶到状态栏里面去。这时候就需要给它设置一个marginTop高度等于状态栏高度就行了,同理,底部也是如此,在我开头第一张图中底部的播放按钮一行也被挤到了导航栏里面,给这一行的RelativeLayout设置marginBottom,高度为导航栏高度。如下:
下面是获取状态栏高度和导航栏高度的方法:
/**
* 获取状态栏高度的方法
* */
public static int getStatusBarHeight(Resources resource) {
int statusBarHeight = -1;
//获取status_bar_height资源的ID
int resourceId = resource.getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
//根据资源ID获取响应的尺寸值
statusBarHeight = resource.getDimensionPixelSize(resourceId);
}
Log.v("-------", "status bar height:"+ statusBarHeight);
return statusBarHeight;
}
/**
*获取导航栏高度的方法
*/
public static int getNavigationBarHeight(Resources resources) {
int resourceId = resources.getIdentifier("navigation_bar_height","dimen","android");
int height = resources.getDimensionPixelSize(resourceId);
Log.v("navigation bar>>>", "height:" + height);
return height;
}
这是最终效果: