企业网站代码怎么优化,html网页结构文件,东莞微信网站开发,佛山免费建站平台DrawerLayout其实用了很久了#xff0c;甚至封装了一些代码方便不同项目使用#xff0c;但重构代码的时候突然意识到这块内容很不成体系#xff0c;因此又参考了些文档#xff0c;组建了自己的一个文档。
toolbardrawerlayout能写的效果很多#xff0c;在此我也只是截取了…DrawerLayout其实用了很久了甚至封装了一些代码方便不同项目使用但重构代码的时候突然意识到这块内容很不成体系因此又参考了些文档组建了自己的一个文档。
toolbardrawerlayout能写的效果很多在此我也只是截取了一些从简单到常用的写法其中由于toolbar继承自viewgroup所以可以实现很多自己想象中“这样可以吗”的效果。
DrawerLayout 是实现了侧滑菜单效果的控件分为侧边菜单和主内容区两部分主内容区要放在侧边菜单前面还有就是主内容区最好以 DrawerLayout 最好为界面的根布局否则可能会出现触摸事件被屏蔽的问题。
侧滑菜单部分的布局必须设置 layout_gravity 属性表示侧滑菜单是在左边还是右边设置了
layout_gravity“start/left” 的视图才会被认为是侧滑菜单。使用的注意事项主内容视图一定要是 DrawerLayout 的第一个子视图 主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图的
android:layout_gravity 属性 android:layout_gravity “start” 时从左向右滑出菜单
android:layout_gravity end时从右向左滑出菜单 不推荐使用left和right!!!
侧滑视图的宽度以dp为单位不建议超过320dp(为了总能看到一些主内容视图)
设置侧滑事件mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene参考
https://www.jianshu.com/p/082741fede64
1 最简单的侧滑 - 无图标
android.support.v4.widget.DrawerLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:idid/drawer_layoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentFrameLayoutandroid:idid/ly_contentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent /ListViewandroid:idid/list_left_drawerandroid:layout_width180dpandroid:layout_heightmatch_parentandroid:layout_gravitystartandroid:background#080808android:choiceModesingleChoiceandroid:divider#FFFFFFandroid:dividerHeight1dp //android.support.v4.widget.DrawerLayout2 最简单的侧滑右侧图标侧滑
activity_main
android.support.v4.widget.DrawerLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:idid/drawer_layoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalincludeandroid:idid/topbarlayoutlayout/view_topbarandroid:layout_widthwrap_contentandroid:layout_height48dp /FrameLayoutandroid:idid/fly_contentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent //LinearLayoutfragmentandroid:idid/fg_left_menuandroid:namejay.com.drawerlayoutdemo2.LeftFragmentandroid:layout_width300dpandroid:layout_heightmatch_parentandroid:layout_gravitystartandroid:tagLEFTtools:layoutlayout/fg_left /fragmentandroid:idid/fg_right_menuandroid:namejay.com.drawerlayoutdemo2.RightFragmentandroid:layout_width100dpandroid:layout_heightmatch_parentandroid:layout_gravityendandroid:tagRIGHTtools:layoutlayout/fg_right //android.support.v4.widget.DrawerLayout view_topbar
?xml version1.0 encodingutf-8?
RelativeLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:background#DCDEDBButtonandroid:idid/btn_rightandroid:layout_width40dpandroid:layout_height40dpandroid:layout_centerVerticaltrueandroid:layout_alignParentRighttrueandroid:backgrounddrawable/btn_selctor//RelativeLayout上述两个参考 DrawerLayout(官方侧滑菜单)的简单使用
https://www.runoob.com/w3cnote/android-tutorial-drawerlayout.html
3 左侧官方图标toolbar
3.1 侧滑菜单在 ToolBar 底部
实现侧滑菜单在 ToolBar 底部需在xml中 ToolBar 放在 DrawerLayout 布局外层。
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroidx.appcompat.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeandroid:background?attr/colorPrimaryapp:layout_scrollFlagsscroll|enterAlwaysapp:titleDrawerLayouttools:ignoreMissingConstraints /androidx.drawerlayout.widget.DrawerLayoutandroid:idid/drawerLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypecenterCropandroid:srcmipmap/meizi_2 /ImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypecenterCropandroid:srcmipmap/pangzi //androidx.drawerlayout.widget.DrawerLayout
/LinearLayoutjava中使用ActionBarDrawerToggle定义效果
// 设置左上角图标[三 —— ←]效果
ActionBarDrawerToggle actionBarDrawerToggle new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
actionBarDrawerToggle.syncState();
drawerLayout.addDrawerListener(actionBarDrawerToggle);3.2 侧滑菜单和 ToolBar 齐平
?xml version1.0 encodingutf-8?
androidx.drawerlayout.widget.DrawerLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:idid/drawerLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 主内容区 --LinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationvertical!-- Toolbar 放到 DrawerLayout 里 --androidx.appcompat.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeandroid:background?attr/colorPrimaryapp:titleDrawerLayoutapp:titleTextColorandroid:color/white /!-- 主要内容区域 --FrameLayoutandroid:idid/contentFrameandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 示例背景图 --ImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypecenterCropandroid:srcmipmap/pangzi //FrameLayout/LinearLayout!-- 侧边栏菜单 --ListViewandroid:idid/list_left_drawerandroid:layout_width240dpandroid:layout_heightmatch_parentandroid:layout_gravitystartandroid:background#111android:choiceModesingleChoiceandroid:divider#FFFFFFandroid:dividerHeight1dp //androidx.drawerlayout.widget.DrawerLayout参考
https://juejin.cn/post/6850418119106789384
4 自定义图标toolbar
4.1 xml中Toolbar根节点设置图标
android.support.v7.widget.Toolbarapp:navigationIcondrawable/ic_add_followandroid:idid/tool_barandroid:layout_widthmatch_parentandroid:layout_height50dpandroid:backgroundandroid:color/holo_green_light/android.support.v7.widget.Toolbarpublic class TextActivity extends AppCompatActivity {private ActionBarDrawerToggle toggle;private ImageView toolBarIcon;private DrawerLayout mDrawerLayout;Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {Toolbar toolbar (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout (DrawerLayout) findViewById(R.id.drawer_layout);//不显示标题toolbar.setTitle(); setSupportActionBar(toolbar); //把开关和DrawerLayout关联toggle new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);}//覆写方法让系统判断点击的图标后是否弹出侧拉页面Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){case android.R.id.home:toggle.onOptionsItemSelected(item);}return super.onOptionsItemSelected(item);}弊端一这种方式虽然可以在布局文件中来设置图标但是无法给图标设置选择器
二由于是在ToolBar的根节点来设置图片所以不能只当图片摆放的位置
优点直接在XML中指定图片而且一行代码搞定
4.2 xml中在ToolBar里面来设置子控件来自定义图标
ToolBar继承自ViewGroup完全可以用来盛放控件
androidx.appcompat.widget.Toolbarandroid:idid/tool_barandroid:layout_widthmatch_parentandroid:layout_height50dp app:contentInsetStart0.0dpandroid:backgroundandroid:color/holo_green_lightImageViewandroid:layout_gravityleftandroid:idid/tool_bar_iconandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:srcdrawable/ic_launcher android:backgrounddrawable/selector_infodetail_back_bg/
/androidx.appcompat.widget.Toolbarapp:contentInsetStart“0.0dp” 控制起始位置的内容内边距在toolbar想盛放不只是菜单栏时十分重要。
java
public class TextActivity extends AppCompatActivity {private ActionBarDrawerToggle toggle;private DrawerLayout mDrawerLayout;Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {//找到图标的idImageView toolBarIcon (ImageView) findViewById(R.id.tool_bar_icon);Toolbar toolbar (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout (DrawerLayout) findViewById(R.id.drawer_layout);toolbar.setTitle(); setSupportActionBar(toolbar);//设置监听toolBarIcon.setOnClickListener(new View.OnClickListener() {Overridepublic void onClick(View v) {toggle();}});}}
private void toggle() {int drawerLockMode mDrawerLayout.getDrawerLockMode(GravityCompat.START);if (mDrawerLayout.isDrawerVisible(GravityCompat.START) (drawerLockMode ! DrawerLayout.LOCK_MODE_LOCKED_OPEN)) {mDrawerLayout.closeDrawer(GravityCompat.START);} else if (drawerLockMode ! DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {mDrawerLayout.openDrawer(GravityCompat.START);}}通过这种方式设置的图标就不能通过覆写onOptionsItemSelected方法的方式来实现侧拉页面的打开和关闭了因为图标的id已经不是android.R.id.home所以只能写监听事件来完成侧拉页面的打开和关闭。
通过查看onOptionsItemSelected的源码发现系统内部实现方式最终调用的是toggle方法但是这个方法是私有的我们不能通过对象调用到发现这个方法中只用到了DrawerLayout的对象所以就直接将这个方法拷贝到自己的类中来使用完成了这个效果
弊端XML中代码比较多
优点可以给图标设置状态选择器图标的摆放位置比较灵活还可以放其他的控件
4.3 java中设置toolbar图标actionbar版本
actionbar版本
public class TempActivity extends AppCompatActivity {ActionBarDrawerToggle toggle;private DrawerLayout mDrawerLayout;Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.text_tool_bar);initToolBar();}private void initToolBar() {Toolbar toolbar (Toolbar) findViewById(R.id.tool_bar);mDrawerLayout (DrawerLayout) findViewById(R.id.drawer_layout);//设置图标toolbar.setNavigationIcon(R.drawable.ic_launcher);// 标题toolbar.setTitle(Title);//把ToolBar的设置的ActionBar的位置setSupportActionBar(toolbar);//获取开关同时让开关和DrawerLayout关联在一起toggle new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0);getSupportActionBar().setDisplayHomeAsUpEnabled(true);//设置点击事件点击弹出menu界面mDrawerLayout.setDrawerListener(toggle);}//覆写方法让系统判断点击的图标后是否弹出侧拉页面Overridepublic boolean onOptionsItemSelected(MenuItem item) {toggle.onOptionsItemSelected(item);return super.onOptionsItemSelected(item);}
}这样就把左侧的图标设置成了我们需要的图标同时点击图标也可以弹出DrawerLayout的侧拉页面但是注意在以上的代码中少了一行代码toggle.syncState();作用是将左侧小图标和侧拉页面的状态同步只有当去掉这一行代码的时候这个方法自定义的图标才会显示
弊端1.使用代码来放置图标没有XML灵活
2.这种方式不能给图标是指背景选择器
上述三种方法参考
https://www.cnblogs.com/zhujiabin/p/7530930.html
4.4 java中设置toolbar图标无actionbar
笔者一般使用这种个人觉得更灵活一些
Toolbar toolbar findViewById(R.id.toolbar);
toolbar.setTitle();
toolbar.setNavigationIcon(R.drawable.menu_ic);DrawerLayout drawerLayout findViewById(R.id.drawer_layout);
//监听打开和关闭
toolbar.setNavigationOnClickListener(v - {if (drawerLayout.isDrawerOpen(GravityCompat.START)) {drawerLayout.closeDrawer(GravityCompat.START);} else {drawerLayout.openDrawer(GravityCompat.START);}
});5 DrawerLayout NavigationView ToolBar 结合使用
仍然是侧滑菜单在 ToolBar 底部
侧滑菜单沉浸式覆盖 ToolBar 展示第一种效果实际上就是在 XML 布局中将 ToolBar 布局放到 DrawerLayout 外部第二种效果是将 ToolBar 放到 DrawerLayout 内部主页面布局里面然后实现沉浸式效果。本文源码中有沉浸式实现的工具类感兴趣的朋友可以下载源码参考。
下面以沉浸式为例
?xml version1.0 encodingutf-8?
androidx.drawerlayout.widget.DrawerLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:idid/drawerLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:fitsSystemWindowstrueLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalandroidx.appcompat.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeandroid:background?attr/colorPrimaryapp:layout_scrollFlagsscroll|enterAlwaysapp:titleDrawerLayoutapp:titleTextColor#FFFtools:ignoreMissingConstraints /ImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypecenterCropandroid:srcmipmap/meizi_2 //LinearLayoutcom.google.android.material.navigation.NavigationViewandroid:idid/navigationViewandroid:layout_widthwrap_contentandroid:layout_heightmatch_parentandroid:layout_gravitystartapp:headerLayoutlayout/nav_header_mainapp:insetForegroundandroid:color/transparentapp:menumenu/activity_main_drawer //androidx.drawerlayout.widget.DrawerLayoutnav_header_main
?xml version1.0 encodingutf-8?
FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_height200dpandroid:background?attr/colorPrimaryandroid:gravitybottomandroid:themestyle/ThemeOverlay.AppCompat.Darkcom.caobo.slideviewdemo.drawerlayout.MovingImageViewandroid:idid/movingImageViewandroid:layout_widthmatch_parentandroid:layout_height250dpandroid:scaleTypecenterCropandroid:srcmipmap/menu_header_backgroundapp:miv_load_on_createfalseapp:miv_max_relative_size3.0app:miv_min_relative_offset0.2app:miv_repetitions-1app:miv_speed100app:miv_start_delay100 /de.hdodenhof.circleimageview.CircleImageViewandroid:layout_width100dpandroid:layout_height100dpandroid:layout_marginLeft16dpandroid:layout_marginTop30dpandroid:paddingTop16dpandroid:srcmipmap/header_iconapp:civ_border_colorcolor/colorWhiteapp:civ_border_width2dp /TextViewandroid:idid/tv_nickandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_gravitybottomandroid:layout_marginLeft16dpandroid:layout_marginTop10dpandroid:layout_marginBottom16dpandroid:paddingLeft5dpandroid:textLearn and live.android:textAppearancestyle/TextAppearance.AppCompat.Body1android:textSize18sp /
/FrameLayoutactivity_main_drawer
?xml version1.0 encodingutf-8?
menu xmlns:androidhttp://schemas.android.com/apk/res/androidgroup android:checkableBehaviorsingleitemandroid:idid/group_item_githubandroid:icondrawable/ic_vector_github_greyandroid:title项目主页 /itemandroid:idid/group_item_moreandroid:icondrawable/ic_vector_moreandroid:title更多内容 /itemandroid:idid/group_item_qr_codeandroid:icondrawable/ic_vector_qr_codeandroid:title二维码 /itemandroid:idid/group_item_share_projectandroid:icondrawable/ic_vector_shareandroid:title分享项目 //groupitem android:title选项menuitemandroid:idid/item_modelandroid:icondrawable/ic_vetor_settingandroid:title夜间模式 /itemandroid:idid/item_aboutandroid:icondrawable/ic_vector_aboutandroid:title关于 //menu/item
/menujava代码
NavigationView 的使用基本上都是 XML 文件中完成的Activity 中不需要做太多处理只需要 Activity 中添加 Menu 的监听。
public class DrawerLayoutActivity extends BaseActivity {BindView(R.id.toolbar)Toolbar toolbar;BindView(R.id.drawerLayout)DrawerLayout drawerLayout;BindView(R.id.navigationView)NavigationView navigationView;MovingImageView movingImageView;private ActionBarDrawerToggle actionBarDrawerToggle;Overrideprotected void initView() {movingImageView navigationView.getHeaderView(0).findViewById(R.id.movingImageView);// 设置左上角图标[三 —— ←]效果actionBarDrawerToggle new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);actionBarDrawerToggle.syncState();drawerLayout.addDrawerListener(actionBarDrawerToggle);// 设置不允许 NavigationMenuView 滚动NavigationMenuView navigationMenuView (NavigationMenuView) navigationView.getChildAt(0);if (navigationMenuView ! null) {navigationMenuView.setVerticalScrollBarEnabled(false);}// NavigationView 监听navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {Overridepublic boolean onNavigationItemSelected(NonNull MenuItem item) {switch (item.getItemId()) {case R.id.group_item_github:Toast.makeText(DrawerLayoutActivity.this,项目主页,Toast.LENGTH_SHORT).show();break;case R.id.group_item_more:Toast.makeText(DrawerLayoutActivity.this,更多内容,Toast.LENGTH_SHORT).show();break;case R.id.group_item_qr_code:Toast.makeText(DrawerLayoutActivity.this,二维码,Toast.LENGTH_SHORT).show();break;case R.id.group_item_share_project:Toast.makeText(DrawerLayoutActivity.this,分享项目,Toast.LENGTH_SHORT).show();break;case R.id.item_model:Toast.makeText(DrawerLayoutActivity.this,夜间模式,Toast.LENGTH_SHORT).show();break;case R.id.item_about:Toast.makeText(DrawerLayoutActivity.this,关于,Toast.LENGTH_SHORT).show();break;}item.setCheckable(false);drawerLayout.closeDrawer(GravityCompat.START);return true;}});}Overrideprotected int getLayoutResID() {return R.layout.activity_drawerlayout;}
}xml中只需在 DrawerLayout 中添加 NavigationView 控件即可其中介绍两个属性(也就是上图中红黄蓝三个位置效果)
app:insetForegroundandroid:color/transparent NavigationView 沉浸式展示
app:headerLayoutlayout/nav_header_main 在 NavigationView 上添加一个 Header 布局
app:menumenu/activity_main_drawer NavigationView 添加标签 Item 的菜单上述参考
https://juejin.cn/post/6850418119106789384
结语
//todo
由于当前正在忙业务需求部分代码笔者只是粗略过了一下目测是没有问题可以使用便参考其作者先放置在了这里后续会更新自己测试后的代码。
