有关Material Design新特性的详解。

最新推荐文章于 2020-12-14 14:56:19 发布
最新推荐文章于 2020-12-14 14:56:19 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： android Android 文章标签： 源码 Material Design android L M
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heinika/article/details/49429201
版权
源码地址： https://github.com/chrisbanes/cheesesquare
自己添加备注后的地址： https://github.com/heinika/DrawerLayoutDemo
主要包含： 
DrawerLayout
NavigationView
CoordinatorLayout
AppBarLayout
Toolbar
TabLayout
ViewPager
FloatingActionButton
CollapsingToolbarLayout
NestedScrollView
CardView
RecyclerView

具体使用：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/drawer_layout"
    tools:context=".MainActivity">
    <!--DrawerLayout里的第一个为 content -->
    <include layout="@layout/include_list_viewpager" />

    <!--DrawerLayout里的第二个为drawer
     headerLayout为标题的布局
     menu为list的配置文件
     颜色都是从主题中提取的，可用如下属性改变
     app:itemIconTint=""
     app:itemBackground=""
     app:itemTextColor=""
     -->
    <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="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"
        >

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //设置actionbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        //设置actionbar的图片并设置为可点击
        final ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.ic_menu);
        ab.setDisplayHomeAsUpEnabled(true);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        //drawer菜单
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            //设置菜单可选择，并且选择后关闭
            setupDrawerContent(navigationView);
        }

        //设置ViewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        if (viewPager != null) {
            setupViewPager(viewPager);
        }

        //设置tablayout，viewpager上的标题
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorPrimaryDark));  //设置tab下方颜色

        //设置点击对勾后，触发的提示
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    //设置点击图标拉出抽屉
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);   //设置打开的方向
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    //actionbar省略号的设置
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.sample_actions, menu);
        return true;
    }

    /**
     * 设置菜单可选择，并且选择后关闭
     * @param navigationView drawer菜单
     */
    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
    }

    /**
     * 设置item
     * @param viewPager
     */
    private void setupViewPager(ViewPager viewPager) {
        Adapter adapter = new Adapter(getSupportFragmentManager());
        adapter.addFragment(new CheeseListFragment(), "Category 1");
        adapter.addFragment(new CheeseListFragment(), "Category 2");
        adapter.addFragment(new CheeseListFragment(), "Category 3");
        viewPager.setAdapter(adapter);
    }

    //自定义adapter
    static class Adapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

        public Adapter(FragmentManager fm) {
            super(fm);
        }

        public void addFragment(Fragment fragment, String title) {
            mFragments.add(fragment);
            mFragmentTitles.add(title);

        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitles.get(position);
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright (C) 2015 The Android Open Source Project
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
-->

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
            <!-- 设置图片-->
            <!--添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView，出现和消失会有过度-->
            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />
            <!-- 设置标题-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                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">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                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">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Related"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <!--app:layout_anchor="@id/appbar" 固定到appbar上 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

public class CheeseDetailActivity extends AppCompatActivity {

    public static final String EXTRA_NAME = "cheese_name";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);

        Intent intent = getIntent();
        final String cheeseName = intent.getStringExtra(EXTRA_NAME);

        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        /**
         * 设置CollapsingToolbarLayout的标题文字
         */
        collapsingToolbar.setTitle(cheeseName);
        //设置CollapsingToolbarLayout的背景图
        loadBackdrop();
    }

    /**
     * 设置CollapsingToolbarLayout的图片
     */
    private void loadBackdrop() {
        final ImageView imageView = (ImageView) findViewById(R.id.backdrop);
        Glide.with(this).load(Cheeses.getRandomCheeseDrawable()).centerCrop().into(imageView);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.sample_actions, menu);
        return true;
    }
}



heinika
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Material Design设计（Android5.0新特性）
flying_brid的博客
06-27 1717
Material Design应用的设计 Material Design的概念Material Design可以理解为一门视觉设计语言，以构建跨平台和超越设备尺寸的统一体验，遵循基本的移动设计定则，支持触摸、语音、鼠标、键盘等输入方式为目标。通过设计方式来达到实体表面和边缘的真实感，借鉴传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。构建出视觉层级、视觉意义以及视
Android手势操作（双击，长按，滑动，滚动，多点触控）
heinika的专栏
09-24 7293
源码分享：https://github.com/heinika/GestureListener 主要使用到GestureDetector 这个类：在实际使用中一般使用他们的子类GestureDetector.SimpleOnGestureListener() 下面自定义一个View实现手势操作： public class MyButton extends Button { pr
Material Design的特性
weixin_43325818的博客
05-28 356
Material Design 1. 简洁、纯净、扁平化 2. 三维效果(动态移动“纸片“顺序或者改变纸片大小、悬浮按钮的阴影效果) 3. 视觉连贯性、动画丰富(进场、退场);响应式交互,提高用户体验感 ...
material_designer风格介绍
q874355274的博客
06-25 799
Material Designer风格介绍android 自推出以来，一直没有固定的风格，于是国内的产品与设计师大量的抄袭了IOS的风格，但是有些风格是不应该在android 手机上面出现的，因此android开发者被抄袭风格弄的苦不堪言。为了统一风格，Google I/O 2014 推出了一个Material Designer的风格，建议android应用都按照这个风格进行开发，Material
浅谈setOnClickListener使用方法
热门推荐
Kaisekai的博客
12-14 1万+
setOnClickListener是Android开发中常用的点击事件监听器，多用于页面按钮调用。它的实现方法比较特殊，是通过回调实现的。下面看看它的源码 /** * Register a callback to be invoked when this view is clicked. If this view is not * clickable, it becomes clickable. * * @param l The callback that w
DrawerLayoutDemo:有关Material Design新特性的详解
04-30
DrawerLayoutDemo有关Material Design新特性的详解。源码地址：自己添加备注后的地址：英文教程：中文教程：主要包含：...
Android构建Material Design应用详解
08-29
主要为大家详细介绍了Android构建Material Design应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序之MaterialDesign--input组件详解
08-31
本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
详解Android Material Design自定义动画的编写
01-05
新的动画Api，让你在UI控件里能创建触摸反馈，改变View的状态，切换activity的一系列自定义动画 具体有： 响应View的touch事件的触摸反馈动画 隐藏和显示View的循环展示动画 两个Activity间的切换动画 更自然的...
Material Design 最全解析_2 设计篇
Maybe
06-23 5496
简介    上篇概述讲了Material Design整体的知识点，从这篇文章开始正式分章讲解，之前说过，设计篇对于开发人员不是很重要，所以就用这一篇文章讲完，后面的应用篇会很详细地讲解每一个知识点。    这篇文章会把Material Design设计的一些重点的东西拎出来讲，学完这些，对于开发人员已经足够了，如果你还想了解更细节的东西。请阅读Material Design官方文档。 从下篇文章
Material-Design-sample
06-09
材料设计样品 带有浮动操作按钮，如收件箱
Material Design介绍
小董同学的博客
05-12 2038
Material Design介绍转载请注明出处，如果有问题的话可以在下面评论，我都会一一回复。或者直接上我的主页给我回复。http://ibat.xyz背景在Google I/O大会上Google引入了Material Design。Material Design是一门用户界面视觉设计语言。可以基于智能手机，平板，电视等等设备。从我的角度理解，Material Design其实就是Google为我
Material Design使用总结
坚持是一种品质
05-20 1万+
Material Design是在Android5.0时新推出的一种设计规范，现在绝大部分的app都已经使用这种新的设计规范来进行界面设计。其主要是强调材质和层次感在设计中的应用，Android中也做了一些原生态的支持，但是要使用这些都必须最小兼容到Android5.0，也就是API 21，或者是添加Material Design的一个支持库。关于详细的Material Design的解释和说明，
Android Design Support Library使用详解
weixin_33984032的博客
06-04 374
Android Design Support Library使用详解 Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控...
使用DrawerLayout实现侧滑菜单（两种写法都实现一样的布局）完美！
zhangmanyuan111的博客
08-31 1172
此处，先奉上效果图，这个效果是使用DrawerLayout和Listview相结合实现的，是不是和DrawerLayout和NavigationView相结合的一模一样。话不多说，上代码： 主要代码部分做一下讲解，之后奉上完整小案例， MainActivity： package com.example.administrator.mydrawapplication; import an
Gson解析（详解）
heinika的专栏
11-08 4621
先介绍一下Android原生的解析 在Android中包含四个与JSON相关的类和一个Exceptions： JSONObject    JSONArray             JSONStringer JSONTokener JSONException 1，JSONObject   {“JSON”: “Hello, World”}，key和velu
listview实现自动向上滚动，快速滚动，和滚动条的一些设置
heinika的专栏
08-29 3158
在使用listView显示聊天窗口时，弹出输入法，listview不会自动向上滚动，会遮盖内容，在manifest中的Activity加入：1 android:windowSoftInputMode=”adjustResize” 也无法解决问题。 通过博客，在listview中添加以下三个属性，可行： 继承于view android:scrollbarStyle=”insideInset”
qq聊天界面七：表情的发送接收（用富文本现实）
heinika的专栏
09-01 2719
先预览一下效果先定义一个包含反射的ImageGettter/** * 用于解析富文本中的表情图片 */ mImageGetter = new Html.ImageGetter() { @Override public Drawable getDrawable(String source) { Class clazz = R.mipmap.class; try {
materialdesign demo
最新发布
01-27
Material Design 是由 Google 推出的设计语言，旨在统一用户界面的外观和操作方式。Material Design Demo 是一种展示 Material Design 设计语言特点和功能的演示程序。 Material Design Demo 通常包括了一系列展示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值