Android-Material Design布局之第一曲

最新推荐文章于 2024-05-17 09:56:12 发布
最新推荐文章于 2024-05-17 09:56:12 发布
阅读量1.4k 收藏
点赞数
分类专栏： Android 文章标签： android 设计 布局 Material Design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014314614/article/details/49981165
版权

记录下所使用了的东西

  • 使用的Android Studio
  • DrawerLayout 抽屉布局
  • NavigationView 配合抽屉使用的菜单分头部分和菜单部分
  • ActionBarDrawerToggle 用于监听抽屉
  • Toolbar 最上边的标题栏
  • AppBarLayout 包裹住标题栏，否则会下方内容会盖在Toolbar的上边
  • CollapsingToolbarLayout 设置标题的过渡样式用到
  • CoordinatorLayout 其design子控件的动画效果都要放在这里面才能
  • NestedScrollView 和Toolbar配合使用，实现上滑动是隐藏Toolbar
  • 过去看教学视频

最终要实现的效果图

最终效果图

Android Design Support Library的导入

方法一： 项目app目录下build.gradle文件中添加：compile ‘com.android.support:design:23.1.1’，如下图：
导入library1
方法二： 项目右击 —> F12 —> app —> Dependencies —> +—> Library —> 选包 —> ok,如下图：
导入library2

创建导航抽屉，菜单使用NavigationView

头部分

  • 最外层是一个垂直线性布局
  • 添加了一个ImageView、两个TextView
  • 代码简单就不详解了

菜单部分

  • 写在menu文件夹中，格式和弹出菜单格式一样
  • 代码如下：
<?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="拍照" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="图片库" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="视频库" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="设置" />
    </group>

    <item android:title="其他">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="分享" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="发送" />
        </menu>
    </item>

</menu>

抽屉布局使用NavigationView代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

不让内容拉伸到状态栏

    android:fitsSystemWindows="false" >

Toolbar在下方分解

    <include
        layout="@layout/bar" 
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"

不让内容拉伸到状态栏

        android:fitsSystemWindows="false"

添加头部布局

        app:headerLayout="@layout/nav_header_main"

添加菜单

        app:menu="@menu/activity_main_drawer"/> 
</android.support.v4.widget.DrawerLayout>

最后在Activity中添加事件监听

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                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 drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                //关闭抽屉
                drawer.closeDrawer(GravityCompat.START);
                return true;
            }
        });

最后去掉了标题栏

在styles.xml的应用样式中添加了

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>

现在的效果如果所示

抽屉+NavigationView效果图

添加一个Toolbar的布局bar.xml

  1. 使用了
    • android.support.v7.widget.Toolbar 标题栏
    • android.support.design.widget.AppBarLayout 向上滑动时隐藏标题栏，
    • android.support.v4.widget.NestedScrollView 使底部超出范围后可以滑动
    • android.support.design.widget.CoordinatorLayout 最外层布局，design下的控件动画效果都依赖于这个控件
  2. 布局如下
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

③用AppBarLayout嵌套住Toolbar才能使NestedScrollView包裹住的内容处于Toolbar的下方

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

①首先添加一个Toolbar
- app:layout_collapseMode=”pin”：确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部
- app:popupTheme：设置主题样式（在styles.xml中添加<style name=”AppTheme.PopupOverlay” parent=”ThemeOverlay.AppCompat.Light” />）
- app:layout_scrollFlags：设置标题栏的滑动的状态（scroll：可滑动；enterAlwaysCollapsed：下边内容拉到最顶时，才能下拉到标题栏;exitUntilCollapsed:和 android:minHeight=”10dp”连用，表示有10dp是不能隐藏的，不写minHeight时默认标题不隐藏）

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"/>
    </android.support.design.widget.AppBarLayout>

②若需要隐藏Toolbar就和NestedScrollView连用

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <include layout="@layout/content_main" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

将Toolbar和抽屉布局在Activity中联系起来

详细代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        setSupportActionBar(toolbar);//设置标题栏
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                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 drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                drawer.closeDrawer(GravityCompat.START);
                return true;
            }
        });
        //常和抽屉布局一起使用
        //可以监听DrawerLayout的状态，添加后通过点击左上角图标也可显示或关闭抽屉
        //参数二：抽屉布局；参数三：标题栏；参数四和参数五：抽屉打开和关闭的描述
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        //为抽屉设置toggle监听
        drawer.setDrawerListener(toggle);
        //设置了这个才能显示左上角图标，该图标可以根据抽屉状态的变化过程而变化
        toggle.syncState();
    }
        /**
     *
     * 单独获取Back键的按下事件
     * 当抽屉是打开的时候就关闭
     */
    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
    //创建一个菜单搜索按钮，main.xml样式在下面
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }
    //设置菜单按钮监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_search) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

搜索按钮，main.xml的内容为

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:actionViewClass="android.widget.SearchView"
        android:title="搜索"
        android:icon="@drawable/ic_search_24dp"
        app:showAsAction="ifRoom" />
</menu>

联合标题栏的显示效果

联合标题栏的显示效果

最后就是添加上图片到标题的过渡

  • 就在Toolbar的外层套了一个CollapsingToolbarLayout
  • 然后在其中添加一个ImageView
  • 代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.zn.mediaplayer.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  1. 在Toobar外层套了一个CollapsingToolbarLayout
  2. 将Toobar的layout_scrollFlags属性添加到CollapsingToolbarLayout的属性里
  3. app:contentScrim=”#CAE7D9”：当图片隐藏，显示标题栏时候的背景颜色
  4. app:expandedTitleMarginStart=”120dp”：设置显示的字体距离左侧120dp
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#CAE7D9"
            app:expandedTitleMarginStart="120dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
  1. 添加的过渡图片
  2. android:scaleType=”fitXY”：按上下比例缩放
  3. app:layout_collapseMode=”parallax”：当向上推动时图片的压缩模式(pin:图片直直的就上去了,如状态栏向上隐藏的动作；parallax:图片和上推状态会有相对的向下偏移，具体不好描述，自己体验(￣┰￣*)；)
  4. app:layout_collapseParallaxMultiplier=”0.5”：这个就是设置上一个属性的偏移度
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/mm"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <include layout="@layout/content_main" />
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>
  • 最后在Activity中设置标题和字体颜色
       CollapsingToolbarLayout collapsing = (CollapsingToolbarLayout) findViewById(R.id.collapsing);
       //设置标题显示的字
        collapsing.setTitle("XUJIAJI");
        //设置在还未划上标题栏的时候显示的字体颜色
        collapsing.setExpandedTitleColor(0xff94E46D);

我要吐槽

  • 放大镜矢量图形可以在as中直接创建，真方便(～￣▽￣)～
  • 去掉标题栏的时候有加android的和没加的，如果不写不加android的在android5.0上没效果(。・・)ノ
  • ActionBarDrawerToggle用的是v7包下的，v4包下的不仅已经过时了，还没那么高大上<(￣v￣)/
  • 将图片的app:layout_collapseParallaxMultiplier调到1以上，效果很明显，不信你试试。。。。
  • 主题样式需要继承Theme.AppCompat.的样式，如：
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar"></style>

想说的话

  • 博客坚持写，今后学习了新的东西就在这里记录一下，以便今后回顾，也希望小小笔记能帮助你们
  • 若内容有什么地方不对、不清楚，还望吐槽，希望大家能一起成长
  • 来一个：十年以后回首现在，是不是觉得一切跟浮云一样，是否是挥挥衣袖般的洒脱？
奏响曲
关注
专栏目录
Android 侧滑抽屉菜单
2401_84132401的博客
04-13 1614
首先是一个知识清单：（对于现在的Android及移动互联网来说，我们需要掌握的技术）泛型原理丶反射原理丶Java虚拟机原理丶线程池原理丶注解原理丶注解原理丶序列化Activity知识体系（Activity的生命周期丶Activity的任务栈丶Activity的启动模式丶View源码丶Fragment内核相关丶service原理等）代码框架结构优化（数据结构丶排序算法丶设计模式）APP性能优化（用户体验优化丶适配丶代码调优）热修复丶热升级丶Hook技术丶IOC架构设计。
Android中的NavigationView
从零开始的教程世界
07-17 2170
In this tutorial, we’ll discuss and implement a NavigationView in our android application. Here, we’ll learn to style it such that it opens from right to left too. 在本教程中，我们将在我们的android应用程序中讨论和实现Naviga...
肖邦 第一叙事曲 赏析
Romantic Chopin in C Sharp Minor
10-19 3万+
《TheBalladesNO.IinGminorop.23》 音乐地址 ：http://music.163.com/song?id=534040966&amp;userid=...
第一曲 --忏魂曲
snow1wolf的专栏
11-03 1010
嗅着血液的芬芳，我找到安魂的殿堂 一片破败景象，幽灵放荡歌唱 黑色迷迭香绽放，藤蔓蜿蜒生长 灵魂张望，信仰血色的月光 嗅着血液的芬芳，我找到安魂的殿堂 长发的吸血女王推开尘封的窗 枯树枝影照她的脸庞，清纯如少女一样 她幽怨的声线与亡灵一起咏唱 心爱的人啊，你是否还记得我模样 我入葬的晚上，你是否一直悲伤 嗅着血液的芬芳，我找到安魂的殿堂
AngularDart Material Design 下拉列表
weixin_34392906的博客
09-11 406
2019独角兽企业重金招聘Python工程师标准>>> ...
CoordinatorLayout+AppBarLayout实现抽屉布局
Android爬坑牛奶糖的博客
04-21 1709
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Android-AndroidDemo一个自己平时练习的demo---MaterialDesign
08-13
【Android-AndroidDemo一个自己平时练习的demo---MaterialDesign】是一个专注于Android开发的项目，它主要展示了Material Design设计规范的应用，以及对View、动画、二维码和列表等常见功能的实践。Material Design...
Android-material-toobar-Navigation:Android-material-toobar-Navigation菜单
05-18
在Android开发中，Material Design是一种广泛采用的设计语言，它提供了丰富的UI组件和交互规范，提升了应用的用户体验。本文将深入探讨“Android-material-toobar-Navigation”这一主题，它主要涉及Android应用中的...
Lectue14-MaterialDesign-1:第十四讲实用
05-18
【Material Design】是谷歌推出的一种跨平台的设计语言，旨在提供一致、美观且高效的用户体验，尤其在Android应用开发中被广泛采用。Material Design以其独特的动画效果、颜色系统和图标设计，提升了用户界面的视觉...
Android-一款基于MaterialDesign设计与开发的饭否第三方Android客户端
08-13
本篇文章将深入探讨一款基于Material Design设计与开发的饭否第三方Android客户端——Xifan。该应用充分体现了Material Design的核心理念，简约而不简单，为用户提供了一个高效且舒适的社交平台。 首先，我们来看...
Android-一简单的库根据MaterialDesign规范创建BottomSheets
08-13
在 Android 开发中，Bottom Sheets 是一种常见的交互元素，它遵循 Material Design 设计规范，为用户提供了一个可扩展的内容区域，通常从屏幕底部向上滑动显示。这种设计模式在移动应用中广泛用于展示更多选项、提供...
可从上往下拉的下拉抽屉式控件
05-17
仿下拉抽屉式控件，可从上往下拉，并且默认会有一部分内容显示出来另外加上popwindow
推荐：SlidingDeck——Android滑动抽屉视图库
最新发布
gitblog_00090的博客
05-17 417
推荐：SlidingDeck——Android滑动抽屉视图库 sliding-deckSlidingDeck View for Android项目地址:https://gitcode.com/gh_mirrors/sl/sliding-deck 在Android开发中，寻求一种直观且易于操作的用户界面组件总能提升应用的用户体验。今天，我们向您推荐一个轻量级、易部署的解决方案——SlidingDe...
DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign练手
God20091111的博客
08-29 201
DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign练手 先po一张效果图 PS：原谅题主的懒惰吧.. 看着是不是很酷炫，那是因为5.0的动画做得好，...
android 纵向抽屉,Android自定义View - 简单纵向抽屉的实现
weixin_33631305的博客
05-26 232
前阵子有个需求，项目中要实现一个纵向抽屉，抽屉的高度会影响父布局的高度。听着感觉很简单的一个布局是不是？刚开始我也不想重复造轮子，所以跑到github上搜了一下，也许是因为太简单，也许是因为这种需求不多吧，居然没有满足需求的组件。不过不管什么原因，自己简单实现了一个这样的布局，发出来给大家提供一下参考。首先照惯例，演示一下效果。如下所示(这个gif最后有点掉帧，所以感觉有点卡顿)功能其实很简单，就...
ANDROID L——Material Design详解（主题和布局）
热门推荐
大苞米的专栏
10-15 3万+
Android L特性介绍——Material Design。详解Material Design中主题的使用和布局的简介
《神探狄仁杰》主题曲《长歌一曲》
人生路上漫悠悠，程序写春秋...
05-09 2083
  《神探狄仁杰》主题曲《长歌一曲》每次听到你， 总是大风起， 每次看到你， 却又惊雷起， 长烟落日山河壮， 你在飘渺云里 画里， 你在飘渺云里 画里， 长歌一曲， 好风 好梦 好歌 好 意气， 长歌一曲， 好风 好梦 好歌 好 意气， 长歌一曲；  每次想起你， 依稀枕边耳语， 每次见到你， 铁马金戈剑雨， 荡气回肠千山万，
android自定义ViewPager之——水平滑动弹性效果
qndroid的专栏
11-05 2917
android ViewPager是一個经常要用到的组件，但android系统本身为我们提供的ViewPager是没有任何效果的，只能是一页一页的滑动，这样会让人感觉很死板，在看一些知名大公司的App时，看到了他们的ViewPager在滑动到最开始或者最后的时候是有一个弹性效果的，使用起来感觉非常的好，于是乎就是百度搜了一下，在StackOverflow中看到一篇文章就是讲如何实现这个效果的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值