Foreword: I often use the Baidu Takeaway APP to order takeout. When I see the homepage navigation bar, when I slide it down, it will show a transparent background, and when I slide it up, it will show a red background. It’s very interesting. Nowadays, many apps use this effect. The professional term is called immersive status bar effect. I decided to learn about it. Having said this, I immediately exposed my otaku nature, always ordering takeout, ^o^.
Summary:What this article uses is to change the background color of the status bar position layout during the up and down sliding process to achieve the desired effect. It involves changing the status bar under different API versions. Regarding background settings, if you don’t know the relevant knowledge, please study it yourself first.
text:
1,First of all, we start from the most basic and make preparations. The approximate effect we want to achieve here is:
The effect of sliding down is as shown on the left, and sliding up hides the head image. The effect is as shown in the picture, and the color of the status bar is transparent.
Let's lay it out first, implement the basic UI, and then add the immersive effect. The layout we use here has a title bar at the top, a ListView, and the title bar is outside the ListVIew. It's very simple. Just enter the layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context="demo.bys.com.navigatorchangedemo.MainActivity">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<RelativeLayout
android:id="@+id/rl_title"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_alignParentTop="true"
android:background="#FF0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#FFFFFF"
android:text="标题栏"
android:textSize="25sp"
/>
</RelativeLayout>
</RelativeLayout>
private String [] arr = {"item1","item2","item3","item4","item5","item6","item7",
"item8","item9","item10","item11",
"item12","item13","item14","item15",
"item16","item17","item18","item19"}; /**
* 查找组件
*/
private void findViewById(){
listView = (ListView) findViewById(R.id.listView);
rl_title = (RelativeLayout) findViewById(R.id.rl_title);
}
/**
* listView绑定数据
*/
private void bindListArr(){
listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,arr));
}Take a look at the effect:
Now add HeaderView to ListView:
private ImageView imageView; imageView = new ImageView(this);
imageView.setBackgroundResource(R.drawable.bg);
ListView.LayoutParams params = new ListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,600);
imageView.setLayoutParams(params);
listView.addHeaderView(imageView);
Next, we make the status bar transparent and cancel the system's built-in navigation bar. This involves version issues, so we create two values folders, values-19v and values-21v, and rebuild the styles.xml file below:
values-v19/styles.xml：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<!--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
Finally, we will implement the change of the title bar when sliding up and down to show the immersive effect of the status bar. The principle we implement here is that when sliding down the listVIew, the color of the title bar gradually becomes transparent. When sliding up, it becomes transparent and becomes opaque. . So here you need to listen to the scroll event of LIstVIew, and then change the title bar according to the scroll distance and direction:
/**
* 获取滚动的高度
* @return
*/
private int getScroll(){
View v = listView.getChildAt(0);//获取listVIew的第一个子View
if(v instanceof ImageView){//如果是继承自ImageView
if(v != null){
int top = v.getTop();//获取图片顶部的坐标
return -top;//这里作为我们滚动的值返回
}else{
return 0;
}
}else{//如果不是继承自ImageView，说明已经把headerView完全滚出了屏幕,这里减去了标题栏的高度
return imageView.getHeight() - (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics());
}
}
/**
* 根据滚动的高度，改变标题栏透明度
* @param scroll
*/
private void changeTitle(int scroll){
int height = imageView.getHeight() - (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics());
float alpha = 1f/height;
float a = alpha*scroll;//这里范围从0~1，0完全透明，1不透明
//滚动变化限制，超过这个值，滚动不做改变
if(a >= 1){//不透明
rl_title.getBackground().setAlpha((int)255);
}else{
a = a * 255;//这里转换成背景透明度的值0~255
rl_title.getBackground().setAlpha((int)a);
}
} listView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView absListView, int i) {
}
@Override
public void onScroll(AbsListView absListView, int i, int i1, int i2) {
changeTitle(getScroll());
}
});At this point we have achieved the effect we want:
android4.4
android5.0
I’m going home tomorrow and this is my last blog of the year. I wish you all a Happy New Year! In the coming year, you will get a promotion and salary increase, become a general manager, become a CEO, marry Bai Fumei, and reach the pinnacle of your life! ! ! ! !
CSDN source site:http://download.csdn.net/detail/liujibin1836591303/9743835