总结Android中MD风格相关控件

要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如:

compile 'com.android.support:design:24.1.1'

一、CoordinatorLayout

1、CoordinatorLayout + AppBarLayout

布局文件代码如下:

<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.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:layout_scrollFlags="scroll|enterAlways"
      app:popupTheme="@style/AppTheme.PopupOverlay"
      app:title="MdView" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tablayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

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

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    ................
</android.support.design.widget.CoordinatorLayout>

看一下效果:


CoordinatorLayout_1

配合CoordinatorLayout、AppBarLayout,我们实现了这样的效果,向上滚动列表时,Toolbar隐藏,TabLayout置顶,再向下滚动Toolbar则显示。

Toolbar之所以可以滚动隐藏\显示,是通过如下属性实现的:app:layout_scrollFlags="scroll|enterAlways"

相关属性值解释如下:

scroll:需要滚动出屏幕的view需要设置该flag, 没有设置则view将被固定在屏幕顶部。

enterAlways: 使用该flag,则向下的滚动会使view变为可见状态。

为Toolbar设置layout_scrollFlags属相只是第一步,还需要在CoordinatorLayout 中提供一个可滚动的View,我们使用ViewPager,并在里边嵌套RecyclerView。同时需要为ViewPager设置如下属性:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

这里简单说下Tablayout的用法:

 //设置TabLayout可滚动,保证Tab数量过多时也可正常显示
    mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    //两个参数分别对应Tab未选中的文字颜色和选中的文字颜色
    mTabLayout.setTabTextColors(Color.WHITE, Color.RED);
    //绑定ViewPager
    mTabLayout.setupWithViewPager(mViewPager);
    //设置TabLayout的布局方式(GRAVITY_FILL、GRAVITY_CENTER)
    mTabLayout.setTabMode(TabLayout.MODE_FIXED);
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    //设置TabLayout的选择监听
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      //点击Tab时回调
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
        mViewPager.setCurrentItem(tab.getPosition());
      }
      @Override
      public void onTabUnselected(TabLayout.Tab tab) {

      }
      //重复点击Tab时回调
      @Override
      public void onTabReselected(TabLayout.Tab tab) {
        scrollToTop(mFragments.get(tab.getPosition()).getTypeList());
      }
    });

2、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout

布局文件代码如下:

<?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"
  android:id="@+id/detail_content"
  tools:context="com.othershe.mdview.DetailActivity">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
      android:id="@+id/toolbar_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      app:contentScrim="?attr/colorPrimary"
      app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <ImageView
        android:id="@+id/detail_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:scaleType="fitXY"
        app:layout_collapseMode="parallax"
        app:layout_collapseParallaxMultiplier="0.7" />

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

    <WebView
      android:id="@+id/webview"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

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

看一下效果:


CoordinatorLayout_2

结合CollapsingToolbarLayout,我们向上滑动时ImageView隐藏、Toolbar显示,向下滑动则反之,类似折叠展开的效果。
在CollapsingToolbarLayout中通过app:contentScrim="?attr/colorPrimary"属相设置Toolbar折叠到顶部的背景,同时设置了app:layout_scrollFlags="scroll|exitUntilCollapsed"属相,其中scroll的=含义已经解释过了,exitUntilCollapsed的含义如下:

exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端

同时AppBarLayout的高度需要时第一个固定值,这样CollapsingToolbarLayout就有了折叠的效果。

折叠后Toolbar可以固定在顶部是因为使用了app:layout_collapseMode="pin"属性,属性值除了pin还有一个parallax:

pin:固定模式,在折叠的时候最后固定在顶端

parallax:视差模式,在折叠时会有个视差折叠的效果

同时在ImageView中使用了app:layout_collapseMode="parallax"属相,来产生视差渐变的效果,使用app:layout_collapseParallaxMultiplier="0.7"可以控制视差的变化,属性值的范围是[0.0, 1.0],值越大视察越大。

最后还需要在NestedScrollView中设置app:layout_behavior="@string/appbar_scrolling_view_behavior属性。

3、CoordinatorLayout + FloatingActionButton

看一下布局文件代码:

<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.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_menu_share" />

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

FloatingActionButton的父View是CoordinatorLayout,在屏幕右下角显示,在java代码中我们可以这样使用:

mFab.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(mCoordinatorLayout, "点我分享哦!", Snackbar.LENGTH_SHORT).show();
      }
    });

看效果:


CoordinatorLayout_3

在Snackbar展示的时候FloatingActionButton上移,隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。

CoordinatorLayout_2的gif效果中,我们上滑时FloatingActionButton会折叠消失,其实只需要如下两个属性就可以

app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"

第一个属性使FloatingActionButton显示在AppBarLayout的区域,第二个属性确定显示的具体位置。

二、Toolbar

使用Toolbar首先要隐藏原有的ActionBar,我们可以增加一个主题

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>

也可以扩展原有的主题,

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

colorPrimary:对应ActionBar的颜色。

colorPrimaryDark:对应状态栏的颜色

colorAccent:对应EditText编辑时、FloatingActionButton背景等颜色。

在布局文件中的用法可以参考上边的代码,之后在java代码中得到Toolbar,通过setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。

接下来看一张图:


Toolbar

标出了一些Toolbar常用的扩展方法,这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践课参考源码。

三、NavigationView

先看一下效果:


NavigationView

其实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:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <include
    layout="@layout/content_main"
    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="true"
    app:menu="@menu/menu_drawer"
    app:headerLayout="@layout/nav_head_main" />

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

以DrawerLayout作为根布局,content_main作为主界面布局,最后是NavigationView,通过android:layout_gravity="start"设置为左侧滑菜单,同理android:layout_gravity="end"代表右侧滑菜单。

其中

app:menu="@menu/menu_drawer"
app:headerLayout="@layout/nav_head_main"

两个属性分别代表NavigationView的顶部header布局以及下边的menu item布局,具体可以参考源代码。

准备好了布局文件,接下来就是初始化工作:

private void initNavigationView() {
    //初始化NavigationView顶部head的icon和name
    ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon);
    icon.setImageResource(R.mipmap.ic_launcher);
    TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name);
    name.setText("VipOthershe");
    //设置NavigationView对应menu item的点击事情
    mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
      @Override
      public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()) {
          case R.id.nav_item1:
            break;
          case R.id.nav_item2:
            break;
          case R.id.nav_set:
            break;
          case R.id.menu_share:
            break;
          case R.id.nav_about:
            break;
        }
        //隐藏NavigationView
        mDrawerLayout.closeDrawer(GravityCompat.START);
        return true;
      }
    });
  }

很简单,就是初始化NavigationView的顶部header和Menu Item。

接下来看一下如何将右滑菜单和Toolbar结合使用:

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    mDrawerLayout.addDrawerListener(toggle);
    //设置左上角显示三道横线
    toggle.syncState();

通过设置将两者绑定在一起,同时Toolbar左上角显示三道横线,左上角可打开左滑菜单。

还可以采用另外一种方式:

 //设置Toolbar左上角图标
    mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        mDrawerLayout.openDrawer(GravityCompat.START);
      }
    });

先设置Toolbar左上角图标,并绑定事件,通过mDrawerLayout.openDrawer(GravityCompat.START);打开左滑菜单。

以上两个方法,分别对应打开和关闭左滑菜单:

mDrawerLayout.openDrawer(GravityCompat.START);
mDrawerLayout.closeDrawer(GravityCompat.START);

如果使用右滑菜单则将GravityCompat.START改成GravityCompat.END,即可实现右滑菜单的开关。

以上就是Android中MD风格相关控件的总结,文章利用实例介绍的很详细,希望对大家在Android开发App中有所帮助。

(0)

相关推荐

  • 分析Android多主题颜色的相关问题

    如果您通过以下的代码来获取定义的颜色值 context.getResources().getColor(R.color.some_color_resource_id); 在 Android Studio 中会有一个 lint 警告,提示您 Resources#getColor(int) 在 Marshmallow 中被废弃了,建议使用主题可知的 Resources#getColor(int, Theme) 函数. 为了避免该警告,则可以使用 ContextCompat: ContextCompa

  • 基于android样式与主题(style&theme)的详解

    android 中的样式和 CSS 样式作用相似,都是用于为界面元素定义显示风格,它是一个包含一个或者多个view 控件属性的集合.如:需要定义字体的颜色和大小.在 CSS 中是这样定义的:<style>    .itcast{COLOR:#0000CC;font-size:18px;}</style>可以像这样使用上面的 css 样式: <div class="itcast"> 传智播客 </div>在 Android 中可以这样定义样

  • Android编程应用风格和主题详解

    本文实例讲述了Android编程应用风格和主题.分享给大家供大家参考,具体如下: 当你设计你的程序的时候,你可以用风格和主题来统一格式化各种屏幕和UI元素. 风格是一个包含一种或者多种格式化属性的集合,你可以将其用为一个单位用在布局XML单个元素当中.比如,你可以定义一种风格来定义文本的字号大小和颜色,然后将其用在View元素的一个特定的实例. 主题是一个包含一种或者多种格式化属性的集合,你可以将其为一个单位用在应用中所有的Activity当中或者应用中的某个Activity当中.比如,你可以定

  • Android主题切换之探究白天和夜间模式

    智能手机的迅速普及,大大的丰富了我们的娱乐生活.现在大家都喜欢晚上睡觉前玩会儿手机,但是应用的日间模式往往亮度太大,对眼睛有较为严重的伤害.因此,如今的应用往往开发了 日间和夜间 两种模式供用户切换使用,那日间和夜间模式切换究竟是怎样实现的呢? 在文字类的App上面基本上都会涉及到夜间模式.就是能够根据不同的设定.呈现不同风格的界面给用户.而且晚上看着不伤眼睛.实现方式也就是所谓的换肤(主题切换).对于夜间模式的实现网上流传了很多种方式.这里先分享一个方法给大家.通过设置背景为透明的方法.降低屏

  • Android中应用界面主题Theme使用方法和页面定时跳转应用

    主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类:  复制代码 代码如下: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式 android:theme="@android:style/Theme.NoTitleBar"

  • Android Studio设置主题与字体大小图文教程

    一.Android Studio 主题的设置 1.1 设置Android Studio 自带的主题及包名字体大小 1.2 导入第三方主题: 下载了第三方的主题,然后执行: File-->Import Settings-->下载jar包所在位置 即可 二.Android Studio 字体的设置 2.1 编辑界面字体设置 Appearance-->Editor -->Colors&Fonts-->Font-->Save As - --> 总结 以上就是And

  • Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)

    虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

  • Android App仿QQ制作Material Design风格沉浸式状态栏

    一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图: 恩,接下来正题. 首先只有大于等于4.4版本支持这个半透明状态栏的效果,但是4.4和5.0的显示效果有一定的差异,所有本文内容为: 1.如何实现半透明状态栏效果在大于4.4版本之上. 2.如何让4.4的效果与5.0的效果尽可能一致. 先贴下模拟器效果图,以便和实现过程中做下对比 4.4 模拟器 5.x 真机 二.实现半透明状态栏 因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛

  • android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源之IOS_Dialog_Library

    先给大家展示下效果图,喜欢的朋友可以下载源码哦. 完成这个效果的是使用了 IOS_Dialog_Library 下载地址:http://xiazai.jb51.net/201509/yuanma/IOS_Dialog_Library(jb51.net) 下载后导入到Eclipse中,然后作为Library引入到自己的工程中,直接作为第三方控件使用. 测试代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

  • Android2.3实现Android4.0风格EditText的方法

    本文实例讲述了Android2.3实现Android4.0风格EditText的方法.分享给大家供大家参考,具体如下: 效果如下: 思路:在源码里找到4.0风格的图片作为背景,xml文件定义点击时候边框变化 步骤: 1.在 D:\Android\android-sdk-windows\android-sdk-windows\platforms\android-14\data\res\drawable-xhdpi 目录下找到图片文件: textfield_disabled_holo_light.9

  • Android自定义ViewGroup打造各种风格的SlidingMenu

    上篇给大家介绍QQ5.0侧滑菜单的视频课程,对于侧滑的时的动画效果的实现有了新的认识,似乎打通了任督二脉,目前可以实现任意效果的侧滑菜单了,感谢鸿洋大大!! 用的是HorizontalScrollView来实现的侧滑菜单功能,HorizontalScrollView的好处是为我们解决了滑动功能,处理了滑动冲突问题,让我们使用起来非常方便,但是滑动和冲突处理都是android中的难点,是我们应该掌握的知识点,掌握了这些,我们可以不依赖于系统的API,随心所欲打造我们想要的效果,因此这篇文章我将直接

  • Android入门教程之创建样式与主题

    一.前言 作为一个安卓开发者,我们一般把焦点放在app的功能上.但是仅仅有功能是不够的,界面和功能一样重要.有两种方法可以改变app的外观.第一种就是直接在xml中直接修改View的属性.这种方法只适合于只有几个View和Activity的简单app.第二种方法就是创建自定义的样式和主题.如果你对web开发熟悉,第一种方法类似于使用内联的CSS样式,而第二种类似于使用style sheets. 这篇文章我们将介绍如何创建自定义的样式和主题. 二.创建Styles 样式显然是应用到UI控件上面的.

  • Android使用Dialog风格弹出框的Activity

    在Android中经常会遇到需要使用Dialog风格弹出框的activity,首先我们可能会首先想到的是在XML布局文件中设置android:layout_height="wrap_content"属性,让activity的高度自适应,显然这还不行,我们还需要为其DialogActivity设置自定义一个样式 <style name="dialogstyle"> <!--设置dialog的背景--> <item name="a

  • 修改Android App样式风格的方法

    android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/values目录下新建一个styles.xml的文件,在这个文件里面有resource根节点,在根节点里面添加item项,item项的名字就是属性的名字,item项的值就是属性的值,如下所示: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><resou

  • Android自定义状态栏颜色与APP风格保持一致的实现方法

    我们知道iOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现此功能有两种方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActionBa

随机推荐