前言
经常我们使用Android APP时，会注意到很多app都有侧滑栏，比如网易云、B站、滴滴、QQ等。
网易云
滴滴
效果展示
本篇博客一共实现了5种样式：
侧边栏样式一 Android原生风格
侧边栏样式二 B站 网易云 滴滴风格
侧边栏样式三 iOS侧滑风格
侧边栏样式四（仿QQ 5.0.0）风格
侧边栏样式五（仿QQ 8.0.0）风格
5种侧边栏效果
代码实现
侧边栏样式一 Android原生风格
xml布局：
这里使用DrawerLayout+NavigationView实现的， NavigationView在标签里添加布局可以实现脚布局。
在menu文件添加item条目，
bage_hint.xml布局：
vip_view.xml布局：
其中需要注意的是app:actionLayout="@layout/bage_hint"，actionLayout这里是item扩展布局，布局是从右向左显示，当太宽的时候，会遮盖item的内容。
item扩展信息
Style1Activity.class代码：
public class Style1Activity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_style1);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
NavigationView navigationview = (NavigationView) findViewById(R.id.navigation_view);
final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
setSupportActionBar(toolbar);//将toolbar与ActionBar关联
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, 0, 0);
drawer.setDrawerListener(toggle);//初始化状态
toggle.syncState();
/*---------------------------添加头布局和尾布局-----------------------------*/
//获取xml头布局view
View headerView = navigationview.getHeaderView(0);
//添加头布局的另外一种方式
//View headview=navigationview.inflateHeaderView(R.layout.navigationview_header);
//寻找头部里面的控件
ImageView imageView = headerView.findViewById(R.id.iv_head);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "点击了头像", Toast.LENGTH_LONG).show();
}
});
navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
return false;
}
});
ColorStateList csl = (ColorStateList) getResources().getColorStateList(R.color.nav_menu_text_color);
//设置item的条目颜色
navigationview.setItemTextColor(csl);
//去掉默认颜色显示原来颜色 设置为null显示本来图片的颜色
navigationview.setItemIconTintList(csl);
//设置单个消息数量
LinearLayout llAndroid = (LinearLayout) navigationview.getMenu().findItem(R.id.single_1).getActionView();
TextView msg= (TextView) llAndroid.findViewById(R.id.msg_bg);
msg.setText("99+");
//设置条目点击监听
navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
//安卓
Toast.makeText(getApplicationContext(), menuItem.getTitle(), Toast.LENGTH_LONG).show();
//设置哪个按钮被选中
// menuItem.setChecked(true);
//关闭侧边栏
// drawer.closeDrawers();
return false;
}
});
}
}
侧边栏样式二 B站 网易云 滴滴
第二种方式第一种方式实现类似，只是调整了一下Toolbar与DrawerLayout顺序，国内大部分APP应用采用这种侧滑方式。
状态栏遮挡
但是还是注意几点侧滑时隐藏状态栏，这里我们可以将状态栏变成透明色，xml根布局设置为android:fitsSystemWindows="true"，否则主布局会进入状态栏，在Activity当中添加如下代码实现状态栏透明：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色
Window window = activity.getWindow();
View decorView = window.getDecorView();
//两个 flag 要结合使用，表示让应用的主体内容占用系统状态栏的空间
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
//导航栏颜色也可以正常设置
// window.setNavigationBarColor(Color.TRANSPARENT);
} else {
Window window = activity.getWindow();
WindowManager.LayoutParams attributes = window.getAttributes();
int flagTranslucentStatus = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
int flagTranslucentNavigation = WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION;
attributes.flags |= flagTranslucentStatus;
// attributes.flags |= flagTranslucentNavigation;
window.setAttributes(attributes);
}
}
接着一个bug未解决，又出现一个问题，那就是侧滑时，状态栏存在阴影
状态栏阴影
最新的NavigationView控件作为侧滑内容，而谷歌把它写死了，一直都会有那个状态栏阴影，所以为NavigationView控件添加app:insetForeground=”@android:color/transparent” ，就可以完美解决这个问题。
最终结果
【注意】如果NavigationView默认Menu布局无法满足你们公司UI设计狮的要求，那么就要可以使用这个绝招了，通过Fragment自定义NavigationView布局。
NavigationView自定义布局
getSupportFragmentManager().beginTransaction().replace(R.id.navigation_view,
new NavigationViewFragment()).commit();
定义一个Fragment填充NavigationView，这样就可以显示Fragment的布局了。
侧边栏样式三 iOS风格侧滑
IOS侧边栏
这种风格侧边栏这里使用DrawerLayout两个子布局之间切换实现，具体代码：
Activity代码：
public class Style3Activity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//隐藏状态栏时，获取状态栏高度
int statusBarHeight = ScreenInfoUtils.getStatusBarHeight(this);
//隐藏状态栏
ScreenInfoUtils.fullScreen(this);
//初始化布局
setContentView(R.layout.activity_style3);
//初始化状态栏的高度
View statusbar = (View) findViewById(R.id.view_statusbar);
ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_PARENT, statusBarHeight);
statusbar.setLayoutParams(params);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
setSupportActionBar(toolbar);//将toolbar与ActionBar关联
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawerLayout, toolbar, 0, 0);
drawerLayout.addDrawerListener(toggle);//初始化状态
toggle.syncState();
//蒙层颜色
drawerLayout.setScrimColor(getResources().getColor(R.color.colorGray));
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerStateChanged(int newState) {
}
@Override
public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
View mContent = drawerLayout.getChildAt(0);
View mMenu = drawerView;
ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * slideOffset);
}
@Override
public void onDrawerOpened(@NonNull View drawerView) {
}
@Override
public void onDrawerClosed(@NonNull View drawerView) {
}
});
}
}
侧边栏样式四（仿QQ 5.0.0）
缩放侧边栏
样式四与样式三差不多，只是onDrawerSlide里面跑的逻辑不一样
// 滑动的过程中执行 slideOffset：从0到1
//主页内容
View content = drawerLayout.getChildAt(0);
//侧边栏
View menu = drawerView;
//
float scale = 1 - slideOffset;//1~0
float leftScale = (float) (1 - 0.3 * scale);
float rightScale = (float) (0.7f + 0.3 * scale);//0.7~1
//menu.setScaleX(leftScale);//1~0.7
menu.setScaleY(leftScale);//1~0.7
//content.setScaleX(rightScale);
content.setScaleY(rightScale);
content.setTranslationX(menu.getMeasuredWidth() * slideOffset);//0~width
Log.d(TAG, "slideOffset=" + slideOffset + ",leftScale=" + leftScale + ",rightScale=" + rightScale);
侧边栏样式五（仿QQ 8.0.0）
样式五其实跟样式三差不多，它只是侧边栏全部铺满屏幕，这个时候侧边栏设置为match_parent仍然无法铺满屏幕。
View leftMenu = findViewById(R.id.menu_frame);
//获取侧边栏默认宽度
ViewGroup.LayoutParams leftParams = leftMenu.getLayoutParams();
//获取屏幕宽度
final int width = ScreenInfoUtils.getWindowWidth(this);
//获取屏幕高度
final int height = ScreenInfoUtils.getFullActivityHeight(this);
//设置侧边的宽高(如果不重新设置，即时设置match_parent也只能占屏幕百分80)
leftParams.width = width;
leftParams.height = FrameLayout.LayoutParams.MATCH_PARENT;
leftMenu.setLayoutParams(leftParams);
这个时候我们可以将侧边视图的宽高设置为屏幕的宽高，就可以解决这个问题。
侧边栏全屏
总结
这些都是平常玩Android应用所看到的侧边栏，全部总结在这里，如果以后还看到其他类型的侧边栏再做补充。
github 地址