文档章节

低版本实现Material Design 的两种方式

Typer
 Typer
发布于 2015/04/13 13:30
字数 1252
阅读 321
收藏 3
点赞 1
评论 0

    转载请注明出处:http://my.oschina.net/witype716/blog/399966

    预览

    本文要说的内容是通过两种方式实现Material Design风格中状态栏样式,也就是下面这种效果。

    

    实现这种效果百度上也有许多单独的例子,例如:

    兼容 Android 4.4 透明状态栏与导航栏  只是状态栏透明

    AppCompat 21实现低版本手机使用Material Design   

    百度可以参考的内容有很多,而我这里只是将他们的集中方法集合在一起实现了状态栏的样式。

    一、SystemBarTint

    好了,现在开始第一种方式实现,我使用的是Android Studio,Eclipse的朋友请自行脑补。其实SystemBarTint的实现原理就相当于将系统的SystemBar更新透明后在设置Actionbar的颜色,达到以上的效果。

    配置

    在Module的Build.Gradle中添加如下依赖项目:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.readystatesoftware.systembartint:systembartint:1.0.4'
    compile 'com.android.support:appcompat-v7:22.0.0'
}

    注:

compile 'com.readystatesoftware.systembartint:systembartint:1.0.4'

    以上是项目依赖的systembartint Library,会自动从mvn中导入到项目当中。

    代码

    然后我们看看在MainActivity:

public class MainActivity extends ActionBarActivity {

    private LinearLayout linearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = (LinearLayout) findViewById(R.id.linear);
        initSystenBar();
        getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.color.primary));
    }

    //判断android 版本然后设置Systembar颜色
    public void initSystenBar(){
        // 只支持android >= KITKAT的版本
        if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            setTranslucentStatus(true);
            SystemBarTintManager tintManager = new SystemBarTintManager(this);
            tintManager.setStatusBarTintEnabled(true);//开启SystembarTint
            tintManager.setStatusBarTintResource(R.color.primary_dark);//设置Systembar颜色
            //因为使用此种方式会导致整个activity的位置向上移动了Systembar的高度,因此需要设置你activity中             //控件的padinntTop避免这个问题
            SystemBarTintManager.SystemBarConfig config = tintManager.getConfig();
            linearLayout.setPadding(0, config.getPixelInsetTop(true), 0, config.getPixelInsetBottom());
        }
    }

    //设置systembar透明
    private void setTranslucentStatus(boolean status){
        Window win = getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        if(status)
            winParams.flags |= bits;
        else
            winParams.flags &= ~bits;
        win.setAttributes(winParams);
    }
}

    这个时候基本效果是有了,但也有一个小问题,就是创建项目时默认的TextView不见了,那是整个activity的位置向上移动了Systembar的高度,我们只需要将内容向下移动一定的距离就可以了。

    

    我们可以通过如下方法纠正它:

            SystemBarTintManager.SystemBarConfig config = tintManager.getConfig();
            linearLayout.setPadding(0, config.getPixelInsetTop(true), 0, config.getPixelInsetBottom());

    

    至此,通过SystemBarTint的方法设置到此结束了,有问题的同学可留言!

    源代码在这https://github.com/Witype/SystemBarTintDemo

   


  二、Toolbar

    通过toolbar实现之前我们应该了解什么是toolbar,actionbar是android3.0推出的控件,与其说是空间还不如说的系统的一部分,它不属于View,而是系统的一部分,而toolbar则是和actionbar独立开的,功能是比actinbar多,而且更自由,我们可以将它放在任何你想放的地方,它的使用和一般的控件一样,通过在布局文件中使用。

    actionbar实现效果相当于就是将systembar变为透明,Toolbar我们可以理解为包含了systembar的一部分,当系统的systembar为透明时,Toolbar就顶到了上面,实现了效果!

    更多详情请移步:Android:ToolBar详解

  配置

    因为Material Design是android5.0以上版本的内容,Google虽然推出了兼容包但某些内容还是只能在android4.4以上的版本才能使用,就是本文这种效果。我们需要在res目录新建如下文件夹和文件。

    对于安卓版本为19及的版本

   + values-v19     

        - style.xml

    对应android版本为5.0及以上的版本

    +values-v21     

        -style.xml

    这样做的好处是,不同版本找到适合自己版本的资源主题文件,达到更好的兼容性。

    XML

    我们先看看style样式配置文件,通过既定parent为

Theme.AppCompat.NoActionBar

    就可以达到不使用系统的actionbar。

     res/values/style.xml

<resources>
    <style name="BaseTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="android:windowBackground">@android:color/white</item>
    </style>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="BaseTheme">
        <!-- Customize your theme here. -->
    </style>
</resources>

    res/values-v19/style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="BaseTheme">
        <!-- Customize your theme here. -->
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

    布局文件

    res/layout/activity_main.xml

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary"
        android:elevation="4dp"
        android:paddingTop="@dimen/toolbar_padding"
        android:transitionName="actionbar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/activity_horizontal_margin"
        android:orientation="vertical">

        <TextView
            android:text="@string/hello_world"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"/>
    </LinearLayout>

</LinearLayout>

    其中就是actionbar的背景颜色同时也是systembar的背景颜色。

android:background="@color/primary"

    代码

    然后看看代码中的设置:

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        toolbar.setEnabled(true);
    }
}

  效果

    

    源代码在这:https://github.com/Witype/ToolbarStatusDemo

    以上是android低版本中实现部分Material Deisign的效果,更多的请自行脑补或者我们共同研究。

    最后留下几个比较不错的网站

    Material Design 样式生成器 http://www.materialpalette.com/

    Material Design 中文文档 http://www.ui.cn/Material/

© 著作权归作者所有

共有 人打赏支持
Typer
粉丝 0
博文 3
码字总数 3869
作品 0
渝中
在低版本android系统上实现Material设计应用

Material Design真的很好看,动画效果真的很实用。前面也写了一些文章介绍如何编写Material风格的程序,但是很多都是一些新的api,低版本上面没有这些api,我们没办法使用。但是不用气馁,g...

码农明明
2014/11/17
0
12
Android最佳的开源库(四)

网络 OkHttp:Android的HTTP客户端库。 AndroidAsync:异步通信库。 通知推送 PubNub:用来处理推送通知的通信服务。 Gandalf:给用户发送更新或维护消息库。 支付 Android In-App Billing v...

博为峰教研组
2016/11/15
44
0
Bootstrap Material 0.2.1 发布

Bootstrap Material 0.2.1 已经发布,是个Bug修复版本。 Bootstrap Material 不是个新的项目,它自从今年8月以来就一直在活跃发展中。 最新的版本号为0.2.1,于2014年12月5日发布。 官方简介...

Fang2hou
2014/12/13
4.3K
5
创建Material Design风格的Android应用--应用主题

昨天正式发布了android 5,同时android developer网站也更新了,增加了创建Material Design风格的Android应用指南,也更新了Support Library,在support library增加了一些Material Design风格...

码农明明
2014/10/19
0
8
Material Design 控件知识梳理(7) - BottomNavigationBar

Material Design 控件知识梳理(1) - Android Design Support Library 是什么 Material Design 控件知识梳理(2) - AppBarLayout & CollapsingToolbarLayout Material Design 控件知识梳理(3)......

泽毛
2017/04/15
0
0
聊聊 Material Design 里,阴影的那些事儿!

当你的设计师要求你在某个 View 上增加阴影效果,那你只需要认真阅读本文,阴影的问题就不再是问题。 一、前言 设计师的世界,与常人不同,有时候想要扁平化的风格,有时候又想要拟物化的风格...

承香墨影
2017/11/01
0
0
Material Design实现的美观的登录界面

官方介绍学习:https://material.google.com/英文版基于Material Design的登录界面:http://sourcey.com/beautiful-android-login-and-signup-screens-with-material-design/翻译版基于Mater......

pearl2015
2016/07/26
184
0
Material UI 1.0.0 正式发布,Material Design 实现框架

历时两年,经过 20 多个 alpha 版本,40 多个 beta 版本和 2 个 rc 版本,Material UI 终于迎来 1.0.0 正式版本。 开发团队表示希望 Material-UI 成为应用开发过程中十分有用的东西,Materia...

王练
05/19
0
3
Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名
05/15
0
0
Google Material Design设计语言的HTML/CSS/JS部分实现

Material Design Lite简介 本文主要介绍Google Material Design设计语言的HTML/CSS/JS部分实现。 博客地址:http://my.oschina.net/u/2275217/blog/496411 一、设计语言 github项目地址:htt...

笔阁
2015/09/28
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式

1.装饰器模式 概念 允许向一个现有的对象添加新的功能,同时又不改变其结构。装饰者可以在所委托被装饰者的行为之前或之后加上自己的行为,以达到特定的目的。 实现 增加一个修饰类包裹原来的...

EasyProgramming
12分钟前
1
0
用python2和opencv进行人脸识别

一、安装cv2 sudo apt-get install python-opencv opencv-data 二、 Haar特征分类器 Haar特征分类器就是一个XML文件,该文件中会描述人体各个部位的Haar特征值。包括人脸、眼睛、嘴唇等等。 ...

wangxuwei
12分钟前
0
0
python模板中循环字典

{% for k,v in user.items %} {{ k}} {{ v}} {% endfor %}

南桥北木
41分钟前
0
0
Java8系列之重新认识HashMap

简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap、Hashtable、LinkedHashMap和TreeMap,类继承关系如下图所示: 下面针对各个实现类...

HOT_POT
45分钟前
0
0
获取调用方的className

/** * 获取调用方的class * @return */private static String getInvoke() { StackTraceElement[] stackTrace = Thread.currentThread().getStackTrace(); S......

iborder
今天
0
0
深入了解一下Redis的内存模型!

一前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时,会接触Redis的5种对象类型(字符...

Java填坑之路
今天
1
0
从实践出发:微服务布道师告诉你Spring Cloud与Spring Boot他如何选择

背景 随着公司业务量的飞速发展,平台面临的挑战已经远远大于业务,需求量不断增加,技术人员数量增加,面临的复杂度也大大增加。在这个背景下,平台的技术架构也完成了从传统的单体应用到微...

老道士
今天
1
0
大数据学习的各个阶段

第一阶段:Linux课程讲解Linux基础操作,讲的是在命令行下进行文件系统的操作,这是Hadoop学习的基础,后面的所有视频都是基于linux操作的。鉴于很多学员没有linux基础,特增加该内容,保证零linux...

董黎明
今天
0
0
CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
今天
7
0
CISCO VPN Client Reason 442 WIN8/10错误解决方案

http://jdkleo.iteye.com/blog/2163493 引用 http://my.oschina.net/cloudcoder/blog/220391?p={{currentPage 1}} 在使用cisco VPN 客户端登录时,产生Reason 442:Failedto enable Virtual......

chenfj_fer
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部