低版本实现Material Design 的两种方式
博客专区 > Typer 的博客 > 博客详情
低版本实现Material Design 的两种方式
Typer 发表于3年前
低版本实现Material Design 的两种方式
  • 发表于 3年前
  • 阅读 284
  • 收藏 3
  • 点赞 1
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 在低版本中实现 Material Design 的两两种方式: 一种是通过SystemBarTint实现; 一种是通过Toolbar实现。

    转载请注明出处: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/

共有 人打赏支持
粉丝 0
博文 3
码字总数 3869
×
Typer
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: