实现布局为DrawLayout的状态栏全透明沉侵式效果
来源:互联网 发布:js隐藏style没有定义 编辑:程序博客网 时间:2024/06/05 20:04
现在很多App都实现了沉侵式效果,之前我开发的一个项目用到了,使用的是SystemBarTintManager工具类,对状态栏进行颜色设置,但是发现一个问题,就是drawlayout的侧边菜单滑出来后,状态栏的颜色并不会根据侧滑菜单的颜色变化,将activity的主题设置了
<item name="android:windowTranslucentStatus">true</item>
结果状态栏还是有一层浅色的阴影,视觉感还是不好,于是在网上找了找,最后总结了一套比较简单又实用的方案。
首先,将activity的主题设置为
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!--<item name="windowActionBar">false</item>--> <!--<item name="windowNoTitle">true</item>--> <!-- Customize your theme here. --> <!--actionbar颜色--> <item name="colorPrimary">@color/colorPrimary</item> <!--状态栏背景色--> <item name="colorPrimaryDark">@color/colorAccent</item> <!--各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色--> <item name="colorAccent">@color/colorPrimaryDark</item> </style>
另外,需要添加一个针对API在19以上的styles
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!--<item name="windowActionBar">false</item>--> <!--<item name="windowNoTitle">true</item>--> <item name="android:windowTranslucentStatus">true</item> <!-- Customize your theme here. --> <!--actionbar颜色--> <item name="colorPrimary">@color/colorPrimary</item> <!--状态栏背景色--> <item name="colorPrimaryDark">@color/colorAccent</item> <!--各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色--> <item name="colorAccent">@color/colorPrimaryDark</item> </style>其中的<item name="android:windowTranslucentStatus">true</item>是将状态栏设为透明,但是效果还不是很理想。
接着,粘出布局文件
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.chuji.nulubao.mystatusbar.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:id="@+id/relate" android:background="@color/colorAccent" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/tv_menu" android:text="菜单" android:paddingLeft="10dp" android:gravity="center" android:layout_width="wrap_content" android:layout_height="50dp" /> <TextView android:text="标题" android:textSize="15sp" android:layout_centerHorizontal="true" android:gravity="center" android:layout_width="wrap_content" android:layout_height="50dp" /> </RelativeLayout> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/menu_nav"/></android.support.v4.widget.DrawerLayout>
其中,要使用NavigationView需要在build.grale里面添加依赖compile 'com.android.support:design:26.0.0-alpha1'
效果如下
注意drawlayout的一定要设置android:fitsSystemWindows="true"这个属性,否则还是有阴影。
navigationview的header就是一张背景图
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="150dp" android:background="@drawable/nav_header"></LinearLayout>
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" > <group android:checkableBehavior="single"> <item android:title="首页" android:id="@+id/mn_home" android:icon="@drawable/home"></item> <item android:title="我的信息" android:id="@+id/mn_information" android:icon="@drawable/myinformation"></item> <item android:title="猜你喜欢" android:id="@+id/mn_guess" android:icon="@drawable/guess_like"></item> <item android:title="电影" android:id="@+id/mn_movie" android:icon="@drawable/movie"></item> <item android:title="音乐" android:id="@+id/mn_music" android:icon="@drawable/music"></item> </group> <item android:title="更多" android:id="@+id/mn_more"> <menu> <item android:id="@+id/mn_about" android:icon="@drawable/about" android:title="关于"/> <item android:title="注销" android:id="@+id/mn_out" android:icon="@drawable/out"> </item> </menu> </item></menu>
最后就是MainActivity的代码
import android.support.annotation.NonNull;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.Gravity;import android.view.MenuItem;import android.view.View;import android.widget.RelativeLayout;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { private DrawerLayout drawerLayout; private NavigationView mNavigation; private RelativeLayout relate; private TextView tv_menu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mNavigation = (NavigationView) findViewById(R.id.navigation_view); relate = (RelativeLayout) findViewById(R.id.relate); tv_menu = (TextView) findViewById(R.id.tv_menu); mNavigation.setItemIconTintList(null);//让menu的图标显示自己的颜色 mNavigation.setNavigationItemSelectedListener(this);//设置侧滑菜单item的监听事件 relate.setPadding(0,getStatusBarHeight(),0,0);//设置padding值,防止布局嵌入到状态栏里面 drawerLayout.setFitsSystemWindows(false);//这一步很关键,必须要 tv_menu.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { drawerLayout.openDrawer(Gravity.LEFT); } }); } public int getStatusBarHeight() {//获取状态栏的高度 int result = 0; int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) { result = getResources().getDimensionPixelSize(resourceId); } return result; } @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { int itemId = item.getItemId(); switch (itemId){ case R.id.mn_home: { Toast.makeText(MainActivity.this,"首页",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_movie: { Toast.makeText(MainActivity.this,"电影",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_music: { Toast.makeText(MainActivity.this,"音乐",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_information:{ Toast.makeText(MainActivity.this,"我的信息",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_about:{ Toast.makeText(MainActivity.this,"关于",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_out:{ Toast.makeText(MainActivity.this,"注销",Toast.LENGTH_SHORT).show(); break; } case R.id.mn_guess:{ Toast.makeText(MainActivity.this,"猜你喜欢",Toast.LENGTH_SHORT).show(); break; } } drawerLayout.closeDrawer(GravityCompat.START); return false; }}
里面主要的部分已经加了注释,另外提一下navigationview监听器的返回值,如果为true,点击了对应item后,该item背景会变暗,表示选中状态,为false就不是变。
所有的实现步骤就是这些,最后附上效果图。
附上demo源码
阅读全文
0 0
- 实现布局为DrawLayout的状态栏全透明沉侵式效果
- Android5.0实现全透明状态栏效果
- 全透明状态栏效果
- 状态栏的透明效果实现
- 5.0全透明状态栏效果
- Android:透明状态栏的效果实现
- Android状态栏--实现状态栏全透明
- Android5.0全透明状态栏效果
- Android5.0全透明状态栏效果
- 透明状态栏的实现
- Android studio技术之透明状态栏效果的实现
- Android 状态栏背景模糊透明效果实现
- Android DrawLayout抽屉效果的导航菜单实现
- Android内容覆盖透明状态栏下实现全屏模式下带状态栏的效果
- Android4.4 、Android 5.0 全透明状态栏效果
- Android透明状态栏的实现
- Android 状态栏的透明效果体验
- android 全透明状态栏
- Android中通过经纬度来过去到城市名称
- CSS中的文本样式
- mongodb数据库命令操作
- Flex布局新旧混合写法详解(兼容微信)
- DatePickerDialog 最大值问题
- 实现布局为DrawLayout的状态栏全透明沉侵式效果
- K&R之const用法
- 【译】通过Hardware Layer提升Android动画性能
- python数据结构之字典
- MySQL常用函数
- 数据结构与算法专题之图——最短路径算法
- 性能测试总结(二)---测试流程篇
- tmux命令大全
- C# 调用 C++ 写的Dll 遇到的问题(调用DLL 自动退出) win32已停止工作