MD之材料设计库(一)
本文主要介绍部分support:design(材料设计库)的控件使用,以及官方模板NavigationDrawer的实现。
DrawerLayout
该控件是一个侧滑菜单布局,当按照规定书写xml布局文件后,即可轻松实现侧滑效果。
ps:用于替代第三方的侧滑菜单,如sliding menu等。
这里给一个简单的Demo示例(配合Toolbar,不熟悉请看MD设计之起步):
左右侧滑菜单设定
DrawLayout主要分为左右侧滑菜单和主内容区,设定左右菜单的方法非常简单,只需要在你需要设定为菜单的xml布局中添加如下代码:
左:android:layout_gravity="start"
右:android:layout_gravity="end"
此外,我们也可以在代码中进行部分操作,如打开与关闭侧滑菜单,设定透明度,设置渐变色等等,
drawerLayout的打开与关闭
这里需要重点指出的是侧滑菜单的打开与关闭
打开:DrawerLayout.openDrawer
关闭:DrawerLayout.closeDrawer
设置监听事件
尽管drawerLayout可以通过addDrawerListener的方式为自己设定监听事件,但还是推荐使用ActionBarDrawerToggle和Toolbar配合使用,这样不仅方便统一管理,也可使代码结构更为清晰。
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_drawer,R.string.close_drawer){//这里可以重写很多方法,以实现自己的需求@Overridepublic void onDrawerOpened(View drawerView) {getSupportActionBar().setTitle("Open");super.onDrawerOpened(drawerView);}@Overridepublic void onDrawerClosed(View drawerView) {getSupportActionBar().setTitle("Close");super.onDrawerClosed(drawerView);}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {return super.onOptionsItemSelected(item);}};drawerLayout.addDrawerListener(toggle);toggle.syncState();
PS:在toolbar中也可以通过setNavigationOnClickListener
和setOnMenuItemClickListener
分别为对应的控件和MenuItem设置监听。
该Demo的主要布局文件
主界面布局:
<?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"tools:context="com.example.horizon.myapplication.MainActivity"><android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"><include
layout="@layout/drawer_content"/><include
layout="@layout/drawer_menu_left"android:layout_gravity="start"android:layout_width="240dp"android:layout_height="match_parent"/><include
layout="@layout/drawer_menu_right"android:layout_gravity="end"android:layout_width="240dp"android:layout_height="match_parent"/></android.support.v4.widget.DrawerLayout>
</RelativeLayout>
content布局
<?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="match_parent"><android.support.v7.widget.Toolbar
android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary" /><TextView
android:layout_marginTop="60dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Content布局"android:textSize="28sp"android:id="@+id/textView_content"android:layout_gravity="center_horizontal" /><Button
android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Left_Menu"android:id="@+id/button"android:layout_gravity="center"android:onClick="onClick"/><Button
android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Right_Menu"android:id="@+id/button2"android:layout_gravity="center"android:onClick="onClick"/></LinearLayout>
NavigationView
该控件用于侧滑简单的实现侧滑菜单,隶属于support:design材料库,使用前请先在gradle中添加依赖
compile 'com.android.support:design:23.3.0'
在DrawerLayout添加菜单布局,主要有头部布局文件和NavigationView布局
Demo
左菜单布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="240dp"android:layout_height="match_parent"android:background="@color/colorAccent"><android.support.design.widget.NavigationView
android:id="@+id/nav_view"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"android:fitsSystemWindows="true"app:headerLayout="@layout/nav_header_main"app:menu="@menu/activity_main_drawer" /></LinearLayout>
head布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="160dp"android:background="@drawable/side_nav_bar"android:gravity="bottom"android:orientation="vertical"android:padding="16dp"android:theme="@style/ThemeOverlay.AppCompat.Dark"><ImageView
android:id="@+id/imageView"android:padding="0dp"android:layout_width="60dp"android:layout_height="60dp"android:paddingTop="@dimen/activity_horizontal_margin"android:src="@drawable/horizon" /><TextView
android:layout_width="wrap_content"android:layout_height="wrap_content"android:paddingTop="12dp"android:text="Horizon"android:textAppearance="@style/TextAppearance.AppCompat.Body1" /><TextView
android:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1308311472@qq.com" /></LinearLayout>
menu菜单,嵌入到NavigationView中
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><item
android:id="@+id/nav_camera"android:icon="@drawable/ic_menu_camera"android:title="Import" /><item
android:id="@+id/nav_gallery"android:icon="@drawable/ic_menu_gallery"android:title="Gallery" /><item
android:id="@+id/nav_slideshow"android:icon="@drawable/ic_menu_slideshow"android:title="Slideshow" /><item
android:id="@+id/nav_manage"android:icon="@drawable/ic_menu_manage"android:title="Tools" /></group><item android:title="Communicate"><menu><item
android:id="@+id/nav_share"android:icon="@drawable/ic_menu_share"android:title="Share" /><item
android:id="@+id/nav_send"android:icon="@drawable/ic_menu_send"android:title="Send" /></menu></item></menu>
主活动代码
public class MainActivity extends AppCompatActivity implementsNavigationView.OnNavigationItemSelectedListener,View.OnClickListener {private DrawerLayout drawerLayout;private Toolbar toolbar;private NavigationView navigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);getSupportActionBar().setDisplayHomeAsUpEnabled(true);drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer) {//这里可以重写很多方法,以实现自己的需求@Overridepublic void onDrawerOpened(View drawerView) {getSupportActionBar().setTitle("Open");super.onDrawerOpened(drawerView);}@Overridepublic void onDrawerClosed(View drawerView) {getSupportActionBar().setTitle("Close");super.onDrawerClosed(drawerView);}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {return super.onOptionsItemSelected(item);}};drawerLayout.addDrawerListener(toggle);toggle.syncState();navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);}@Overridepublic boolean onNavigationItemSelected(MenuItem item) {// Handle navigation view item clicks here.int id = item.getItemId();if (id == R.id.nav_camera) {// Handle the camera action} else if (id == R.id.nav_gallery) {} else if (id == R.id.nav_slideshow) {} else if (id == R.id.nav_manage) {} else if (id == R.id.nav_share) {} else if (id == R.id.nav_send) {}drawerLayout.closeDrawer(GravityCompat.START);return true;}@Overridepublic void onClick(View v) {if(v.getId() == R.id.button)drawerLayout.openDrawer(GravityCompat.START);elsedrawerLayout.openDrawer(GravityCompat.END);}
}
当然,对于很多布局控件,如果条件允许,你完全可以去除多余的嵌套。
这样,就简单实现了官方模板NavigationDrawer的主要功能,完整模板Demo:
关于floating button,snacbar以及沉浸式状态栏等,我会在后面的文章中陆续讲解。
本文的源码地址:https://github.com/walkthehorizon/AndroidLearnDemo
MD之材料设计库(一)相关推荐
- Android材料设计库之折叠式布局你应该知道的一切
github源码地址:https://github.com/geduo83/AndroidMaterialDesign/tree/master/module_drawerlayout_coordina ...
- 印象笔记Android怎样创建md,LocalNote,让你像使用本地文件一样使用印象笔记(支持 markdown 格式)...
LocalNote LocalNote让你能够像使用本地文件一样使用印象笔记. 支持流行的markdown格式的笔记,印象笔记中完美显示,上传重新下载笔记仍为.md格式. 支持印象笔记原笔记格式转化为 ...
- 从Github开源项目《云阅》所学到的知识
感谢开源,感谢大神,才让我们这些菜鸟成长! 附上云阅开源项目地址:点我吧. 1.轮播图的实现. 现在的APP基本都会实现这个功能吧,然后一直都找不到好的第三方库,能够满足各种需求.然而碰到了这个开源库 ...
- firebase使用_使用Firebase进行物联网原型设计:如何事半功倍
firebase使用 by Bayrem Gharssellaoui 由Bayrem Gharssellaoui 使用Firebase进行物联网原型设计:如何事半功倍 (Internet of Thi ...
- 2018年终总结(兼个人详历) | 2018 与我的技术之路
零.前言 2017年标签:"海的彼岸,有我未曾见证的风采" 2018年标签:"海的彼岸,吾在征途" 复制代码 简述: 1).2018年基本上都是在总结Andro ...
- 如何使用Google底部导航栏创建通知徽章
Bottom navigation bars make it simple for users to access and shift between main views with a single ...
- 计算机三级数据库技术自学第二节课
系统设计 任务: "怎么干" 概念模型 : 数据库概念模型设计,系统总体设计 逻辑设计: 数据库逻辑结构设计, 应用程序设计 数据库事物概要设计 物理设计: 数据库物理设计 数据库 ...
- JavaFX 相关资源
Libraries, Tools and Projects(类库,工具和项目) Advanced-Bindings for JavaFX(8) - 高级绑定是一组有用的帮助程序和自定义绑定实现,如ja ...
- android md 颜色,安卓MD(Material Design)规范
Md规范是一种设计风格,并不特指规范.是一种模拟纸张的手法. 一.核心思想 把物理世界的体验带进屏幕.去掉现实中的杂质和随机性,保留其最原始纯净的形态.空间关系.变化与过度,配合虚拟世界的灵活特性,还 ...
最新文章
- SQL server2000数据库备份和还原语句
- easybcd android x86,【图片】不需U盘,简单三步,Win系统变Win+Android双系统!【androidx86吧】_百度贴吧...
- python加密敏感信息_仅需10行代码,使用python加密用户敏感数据
- 实验2 格式化输入输出和分支语句
- 【Excel技巧必知必会】
- 2020年中国高精度卫星导航定位行业现状、竞争格局及发展前景分析,基于北斗系统全面建成,定位技术向多场景发展「图」
- bat批处理文件修改注册表
- RGB转HDMI模块解决方案
- python 暑期培训
- 数据链路层 - MTU 、ARP协议
- NFT+DeFi =NFTFI
- jquery+ajax分页
- 多臂老虎机(Multi-armed bandit problem)
- [转]ModSecurity for Apache 1.8.7 用户手册
- SEO—搜索引擎优化
- origin作图所用数据点太多,做图时需要跳过数个数据给一个标记的方法
- 人生本来极短,像流星刬过天空一样
- JZOJ 3158 【JSOI2013】丢番图
- 最新版IAR9.32和注册工具
- 让div在屏幕中居中(水平居中+垂直居中)的几种方法