Material Design入门(二）

本文主要包括以下内容

  1. 侧滑菜单DrawerLayout实现
  2. CardView实现

DrawerLayout介绍

drawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）

drawlayout实现

main布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></LinearLayout><android.support.design.widget.NavigationViewandroid:id="@+id/navigation_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/navigation_header"app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>

其中侧滑菜单位置是start,并且包括了headerLayout与menu

headerLayout实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/lib/com.zj.material3navigation"android:layout_width="match_parent"android:layout_height="192dp"android:background="?attr/colorPrimaryDark"android:gravity="center"android:orientation="vertical"android:padding="16dp"android:theme="@style/ThemeOverlay.AppCompat.Dark"><de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"android:layout_width="72dp"android:layout_height="72dp"android:layout_marginTop="20dp"android:src="@mipmap/profile"app:border_color="@color/primary_light"app:border_width="2dp" /><TextView
        android:layout_marginTop="10dp"android:textSize="18sp"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="APP开发者"android:gravity="center"android:textAppearance="@style/TextAppearance.AppCompat.Body1"/></LinearLayout>

注意，由于使用了CircleImageView，要在depencyies中加入

compile 'de.hdodenhof:circleimageview:1.3.0'

并且由于jcenter中库有限，可能还要加入 


allprojects {repositories {jcenter()maven { url "https://jitpack.io" }}
}
<?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/navigation_item_example"android:icon="@drawable/ic_favorite"android:title="@string/navigation_example" /><item
            android:id="@+id/navigation_item_blog"android:icon="@drawable/ic_favorite"android:title="@string/navigation_my_blog" /><item
            android:id="@+id/navigation_item_about"android:icon="@drawable/ic_favorite"android:title="@string/navigation_about" /></group></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/drawer_home"android:checked="true"android:icon="@drawable/ic_home_black_24dp"android:title="@string/home"/><item
            android:id="@+id/section"android:icon="@drawable/ic_more_horiz_black_24dp"android:title="分组1"><menu><item
                    android:id="@+id/drawer_favourite"android:icon="@drawable/ic_favorite_black_24dp"android:title="@string/favourite"/><item
                    android:id="@+id/drawer_downloaded"android:icon="@drawable/ic_file_download_black_24dp"android:title="@string/downloaded"/></menu></item><item
            android:id="@+id/section2"android:title="分组2"><menu><item
                    android:id="@+id/drawer_more"android:icon="@drawable/ic_more_horiz_black_24dp"android:title="@string/more"/><item
                    android:id="@+id/drawer_settings"android:icon="@drawable/ic_settings_black_24dp"android:title="@string/settings"/></menu></item></group>
</menu>

效果如下

这里写图片描述

java代码的实现

package com.zj.material3navigation;import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;public class MainActivity extends AppCompatActivity {Toolbar mToolbar;DrawerLayout mDrawerLayout;ActionBarDrawerToggle mDrawerToggle;NavigationView mNavigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//设置ToolbarmToolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(mToolbar);setTitle("startNow");//设置DrawerLayoutmDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,R.string.drawer_open, R.string.drawer_close){//关闭侧边栏时响应@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);}//打开侧边栏时响应@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);}};mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);//设置NavigationView点击事件mNavigationView = (NavigationView) findViewById(R.id.navigation_view);setupDrawerContent(mNavigationView);//设置NavigationView点击事件}//点击侧边栏菜单的响应事件private void setupDrawerContent(NavigationView navigationView) {navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem menuItem) {switch (menuItem.getItemId()) {case R.id.navigation_item_example://switchToExample();break;case R.id.navigation_item_blog://switchToBlog();break;case R.id.navigation_item_about://switchToAbout();break;}menuItem.setChecked(true);mDrawerLayout.closeDrawers();return true;}});}}

实现了打开与关闭侧边栏的响应事件，点击侧边栏按钮的响应事件等

参考链接：

Design Support Library (I): Navigation View的使用 - 泡在网上的日子

android官方侧滑菜单DrawerLayout详解 - 泡在网上的日子

效果如下：

这里写图片描述

CardView实现

首先加入依赖库

dependencies {....compile 'com.android.support:cardview-v7:22.2.0'
}

layout布局

<LinearLayout 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:orientation="vertical"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:scrollbars="none"xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingTop="5dp"xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:cardCornerRadius="10dp"app:cardElevation="10dp"android:layout_marginBottom="@dimen/card_margin"android:layout_marginLeft="@dimen/card_margin"android:layout_marginRight="@dimen/card_margin"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:clickable="true"android:foreground="?android:attr/selectableItemBackground"><LinearLayoutstyle="@style/CardView.Content"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/book1" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/book_title_1"android:textAppearance="@style/TextAppearance.AppCompat.Title"android:textColor="@color/primary_text" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="2dp"android:text="@string/book_description_1"android:textColor="@color/secondary_text" /></LinearLayout></LinearLayout></android.support.v7.widget.CardView><android.support.v7.widget.CardViewxmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="@dimen/card_margin"android:layout_marginLeft="@dimen/card_margin"android:layout_marginRight="@dimen/card_margin"android:layout_marginTop="@dimen/card_margin"android:onClick="goDetail"app:cardCornerRadius="10dp"app:cardElevation="10dp"><LinearLayoutstyle="@style/CardView.Content"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/book2" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/book_title_2"android:textAppearance="@style/TextAppearance.AppCompat.Title"android:textColor="@color/primary_text" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="2dp"android:text="@string/book_description_2"android:textColor="@color/secondary_text" /></LinearLayout></LinearLayout></android.support.v7.widget.CardView><android.support.v7.widget.CardViewxmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="@dimen/card_margin"android:layout_marginLeft="@dimen/card_margin"android:layout_marginRight="@dimen/card_margin"android:layout_marginTop="@dimen/card_margin"android:onClick="goDetail"app:cardCornerRadius="10dp"app:cardElevation="10dp"><LinearLayoutstyle="@style/CardView.Content"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/book3" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/book_title_3"android:textAppearance="@style/TextAppearance.AppCompat.Title"android:textColor="@color/primary_text" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="2dp"android:text="@string/book_description_3"android:textColor="@color/secondary_text" /></LinearLayout></LinearLayout></android.support.v7.widget.CardView>
</LinearLayout></android.support.v4.widget.NestedScrollView></LinearLayout>
  • app:cardBackgroundColor 设置CardView背景颜色
  • app:cardCornerRadius 设置CardView圆角大小
  • app:cardElevation 设置CardView阴影高度

添加波纹点击效果

默认情况，CardView是不可点击的，并且没有任何的触摸反馈效果。触摸反馈动画在用户点击CardView时可以给用户以视觉上的反馈。为了实现这种行为，你必须提供一下属性： 

<android.support.v7.widget.CardView...android:clickable="true"android:foreground="?android:attr/selectableItemBackground">...
</android.support.v7.widget.CardView>

在加载图片时可能会遇到图上尺寸的问题

(1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)

(2)drawable-mdpi里面存放中等分辨率的图片,如HVGA (320x480)

(3)drawable-ldpi里面存放低分辨率的图片,如QVGA (240x320)

ldpi:240x320

mdpi：320x480

hdpi：480x800、480x854

xhdpi：至少960*720

xxhdpi：1280×720

这里写图片描述

从上表可以得出如下结论

  1. 图片放在drawable中，等同于放在drawable-mdpi中，原因为：drawable目录不具有屏幕密度特性，所以采用基准值，即mdpi

  2. 图片放在某个特定drawable中，比如drawable-hdpi，如果设备的屏幕密度高于当前drawable目录所代表的密度，则图片会被放大，否则会被缩小

    　　放大或缩小比例 = 设备屏幕密度 / drawable目录所代表的屏幕密度

  3. 为了更全面的适配所有设备，我们应该提供一套针对主流屏幕密度的图片（目前为hdpi或xhdpi），其他密度通过系统自动缩放得到图片

参考链接:

Android开发–CardView使用-爱编程
Android中屏幕密度和图片大小的关系分析 - Android移动开发技术文章_手机开发 - 红黑联盟
res里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi) - xfyn - 博客园

效果如下

这里写图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/494322.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

李飞飞重回斯坦福，Andrew Moore接手谷歌云AI

李飞飞重回斯坦福，Andrew Moore接手谷歌云AI

来源&#xff1a;网络大数据6 月&#xff0c;海外媒体爆出「李飞飞或将离开谷歌重返斯坦福」;两周前&#xff0c;CMU 官方发布消息称 CMU 计算机学院院长 Andrew Moore 即将离职。今日&#xff0c;谷歌云博客发布的信息最终把二者的去向都敲定&#xff1a;Andrew Moore 加入谷歌…
阅读更多...
UVA 10173 旋转卡壳

UVA 10173 旋转卡壳

题意&#xff1a;给出一些点&#xff0c;求最小的覆盖这些点的矩形的面积。 题解&#xff1a; 枚举下边界&#xff08;是一条边&#xff09;&#xff0c;然后暴力卡壳左右边界&#xff08;点&#xff09;&#xff0c;再暴力上边界&#xff08;点&#xff09;&#xff0c;更新答…
阅读更多...
Python Requests 丨爬虫基础入门

Python Requests 丨爬虫基础入门

据说&#xff1a;看我文章的帅帅 都有个习惯&#xff1a;先点赞、收藏再看 目录 ⚽️ 一、背景知识&#xff1a;requests &#x1f3c0; 1、pip安装requests &#x1f3c8; 2、pycharm安装requests ⚾️ 3、一行代码使用requests &#x1f3be; 4、requests常用调用&…
阅读更多...
类脑计算：让人工智能走得更远

类脑计算：让人工智能走得更远

来源&#xff1a;中国科学报像人一样思考&#xff0c;这是人们对人工智能和机器人的期待。大踏步前进的人工智能&#xff0c;似乎走到了十字路口。“机器综合智能水平和人脑相差较大&#xff0c;机器学习需要较多人工干预&#xff0c;不同人工智能模态之间交互协同较少……”近…
阅读更多...
Android之Fragment（一）

Android之Fragment（一）

Fragment的产生与介绍 Android运行在各种各样的设备中&#xff0c;有小屏幕的手机&#xff0c;超大屏的平板甚至电视。针对屏幕尺寸的差距&#xff0c;很多情况下&#xff0c;都是先针对手机开发一套App&#xff0c;然后拷贝一份&#xff0c;修改布局以适应平板神马超级大屏的…
阅读更多...
《Python快速入门》基础知识扫盲课

《Python快速入门》基础知识扫盲课

据说：看我文章的帅帅 都有个习惯：先点赞、收藏再看 目录 🐜 1、Python 初体验 Pycharm 第一个程序 交互式编程第一个程序
阅读更多...
数字技术对就业的影响分析

数字技术对就业的影响分析

来源&#xff1a; 腾讯研究院技术是增长之源&#xff0c;就业是民生之本。技术进步对就业具有双重影响&#xff0c;它不仅带来新的工作机会&#xff0c;改善人们的生活&#xff1b;也会替代一些原有岗位&#xff0c;带来“技术性失业”。1930年&#xff0c;英国伟大的经济学家凯…
阅读更多...
Android之Fragment（二）

Android之Fragment（二）

本文主要内容 如何管理Fragment回退栈 Fragment如何与Activity交互 Fragment与Activity交互的最佳实践 没有视图的Fragment的用处 使用Fragment创建对话框 如何与ActionBar&#xff0c;MenuItem集成等 管理Fragment回退栈 类似与Android系统为Activity维护一个任务栈&#…
阅读更多...
带你薅“云”羊毛：定个小目标，先薅他一年

带你薅“云”羊毛：定个小目标，先薅他一年

点赞 ➕ 评论 ➕ 收藏 养成三连好习惯 一、2022年了&#xff0c;一块钱能干什么&#xff1f; 1块钱 能买一瓶矿泉水 1块钱 能坐一次公交 1块钱 竟然能买来一年的云服务器 哈哈哈&#xff0c;今天西红柿就带大家一块钱白嫖京东云服务器&#xff0c;当然&#xff0c;氪金也是…
阅读更多...
ubuntu下搭建android开发环境(转载)

ubuntu下搭建android开发环境(转载)

在ubuntu下搭建android开发环境&#xff0c;准备学习一下android开发。 1、安装JDK 首先到oracle的官网上下载linux版本的JDK&#xff08;网址为:http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u26&#xff0d;download-400750.html&#xff09;&#x…
阅读更多...
《瓦森纳协定》——光刻机为什么就是不卖给中国！

《瓦森纳协定》——光刻机为什么就是不卖给中国！

来源&#xff1a;金属加工&#xff08;ID&#xff1a;mw1950pub&#xff09;谈起光刻机相信大家首先想到的是荷兰&#xff0c;确实如此&#xff0c;荷兰光刻机在全球都是数一数二的&#xff0c;就连最顶尖的光刻机制造公司ASML也位于荷兰&#xff0c;二荷兰光刻机之所以这么出名…
阅读更多...
Material Design入门（三）

Material Design入门（三）

本文主要包括 CollapsingToolbarLayout实现滚动动画效果 ViewPagertabLayout实现左右类Tab效果 控件介绍 这次需要用到得新控件比较多&#xff0c;主要有以下几个&#xff1a; CoordinatorLayout 组织它的子views之间协作的一个Layout&#xff0c;它可以给子View切换提供…
阅读更多...
干货|2018物流机器人行业报告发布！不容错过

干货|2018物流机器人行业报告发布！不容错过

来源&#xff1a;楼今岁阅 摘要&#xff1a;2018年&#xff0c;我们都在谈智能家居、智能交通、智能工业、智能安防等热门物联网话题&#xff0c;并且预计到2020年&#xff0c;中国物联网的整体规模将超过1.8万亿元。发展如此迅速&#xff0c;其涉及的领域一定会越来越广&#…
阅读更多...
【年度回忆录】如何做到1年90000粉丝？

【年度回忆录】如何做到1年90000粉丝？

亲爱的小伙伴&#xff1a; 小伙伴你好&#xff0c;我是不吃西红柿&#xff0c;仅以此文作为 2021 年终总结&#xff0c;顺便跟大家分享一些博主的心得经验&#xff0c;希望你我和 CSDN 都越来越好&#xff01; 一、C站点滴 翻开 2021 CSDN 年度回忆录&#xff0c;有种难以言…
阅读更多...
Material Design综合实例

Material Design综合实例

背景知识 drawlayout的使用 recycleView的使用 CardView的使用 一些开源动画库的使用 ImageView的scaleType属性与adjustViewBounds属性 &#xff0c;参考链接&#xff1a; ImageView的android:adjustViewBounds属性 - - ITeye技术网站 Android ImageView的scaleType属性与…
阅读更多...
DARPA将开发无需手术的神经技术，实现脑机接口

DARPA将开发无需手术的神经技术，实现脑机接口

来源&#xff1a;IEEE电气电子工程师学会到目前为止&#xff0c;DARPA&#xff08;美国国防部高级研究计划局&#xff09;的神经科学项目部&#xff08;也称为国防部疯狂科学部门&#xff09;一直专注于可服务于那些因身体或大脑残疾回国的士兵的技术&#xff0c;例如&#xff…
阅读更多...
2018年全球自动驾驶法律政策研究 | 附报告下载

2018年全球自动驾驶法律政策研究 | 附报告下载

来源&#xff1a;腾讯研究院摘要&#xff1a;2018年9月13日&#xff0c;在中国法学会研究部、腾讯研究院联合举办的“‘法律人的互联网思维’系列研修会第二期——自动驾驶汽车的技术、产业和法律维度”上&#xff0c;腾讯研究院发布《2018年全球自动驾驶法律政策研究报告》。0…
阅读更多...
全球最具影响力AI机构TOP100排名：中国5所高校1所研究院入围

全球最具影响力AI机构TOP100排名：中国5所高校1所研究院入围

来源&#xff1a;学术头条&#xff08;SciTouTiao&#xff09;现在“人工智能”&#xff08;ArtificialIntelligence&#xff09;一词时常“做客”各大媒体平台&#xff0c;成为人们所关注的热点话题&#xff0c;而在学术圈&#xff0c;AI技术同样也是最具活力与吸引力的研究课…
阅读更多...
安卓开源库之动画篇

安卓开源库之动画篇

本文主要介绍收集了笔者所用过的开源动画库&#xff0c;达到一些比较好看的效果。 一个富有动感的 Sheet 链接&#xff1a; zzz40500/AndroidSweetSheet: 一个富有动感的Sheet(选择器) 效果如下 示例代码 package com.zj.testsheet;import android.os.Bundle; import andr…
阅读更多...
《Python 黑科技》代理ip奇技淫巧

《Python 黑科技》代理ip奇技淫巧

点赞 ➕ 评论 ➕ 收藏 三连再看你最帅 目录 &#x1f41b; 1、什么是住宅动态ip&#xff1f; &#x1f98b; 1.1 动态ip优点是什么&#xff1f; &#x1f40c; 1.2 环境准备 &#x1f41e; 1.3 获取代理ip &#x1f41c; 2、使用代理IP &#x1f424; 2.1 浏览器使用代理…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023