Android5.0新特性之MaterialDesign

最新推荐文章于 2024-07-30 10:15:20 发布

不二周同学

最新推荐文章于 2024-07-30 10:15:20 发布

阅读量1.8k

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/weixin_37292229/article/details/70599879

版权

Android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

MaterialDesign英文官方文档：http://www.google.com/design/spec/material-design/
MaterialDesign极客学院文档：http://wiki.jikexueyuan.com/project/material-design/
谷歌在推出Android5.0之际，推出全新的Android Design Support Library。现在，咱们介绍一下常用的Material Design设计风格的控件，本文主要讲解一下几个方面的内容；
1.使用TextInputLayout实现登录界面
2.用TabLayout结合ViewPager实现选项卡的动态滑动效果
3.用CoordinatorLayout实现Toolbar的隐藏
4.用CoordinatorLayout实现Toolbar的折叠
5.用NavigationView实现抽屉菜单界面
6.FloatingActionButton的使用
7.Snackbar的使用

**源码GitHub地址：**https://github.com/zxlabo/MvpDemo

首先在build.gradle中添加依赖

    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'

1.使用TextInputLayout实现登录界面
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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="com.labo.mvpsample.LoginActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tl_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="username"
            android:maxLength="20"
            android:maxLines="1"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tl_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="password"
            android:maxLength="20"
            android:maxLines="1"/>
    </android.support.design.widget.TextInputLayout>
    <Button
        android:text="login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

2.用TabLayout结合ViewPager实现选项卡的动态滑动效果
效果如下：
这里写图片描述
2.1布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mvpdemo.UI.MaterialDemo.MaterialDemoActivity">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#adbe107e"
            app:tabMode="scrollable"
            />
    </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"
        />
</LinearLayout>

AppBarLayout主要用来将Toolbar和Tablayout组合起来作为一个整体。
1.要注意设置tab的模式为可滑动的。 app:tabMode=“scrollable”， app:tabMode="fixed"表示不可滑动；
2.使用toolbar的时候注意
需要设置主题Theme，否则会报错

This Activity already has an action bar supplied by the window decor.
 Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme 
 to use a Toolbar instead.
 解决错误：
 需要设置一个Style
   <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 然后在清单文件AndroidManifest.xml中设置主题为AppTheme.NoActionBar

接下来我们在java代码中使用这个布局文件

public class MaterialDemoActivity extends AppCompatActivity {

    ViewPager mViewpager;
    private TabLayout mTablayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_demo);
        Toolbar toolbar = findViewById(R.id.toolbar);
        mViewpager = findViewById(R.id.viewpager);
        mTablayout = findViewById(R.id.tabs);
        setSupportActionBar(toolbar);
        initViewPager();
    }

    private void initViewPager() {
        List<String> titles = new ArrayList<>();
        for (int i=1;i<13;i++){
            titles.add(i + "月");
        }
        for (int i = 0; i < titles.size(); i++) {
            mTablayout.addTab(mTablayout.newTab().setText(titles.get(i)));
        }
        List<Fragment> listFragments = new ArrayList<>();
        for (int i = 0; i < titles.size(); i++) {
            listFragments.add(new ListFragment());
        }
        FragmentAdapter fragmentAdapter = new FragmentAdapter(getSupportFragmentManager(),listFragments,titles);
        mViewpager.setAdapter(fragmentAdapter);
        mTablayout.setupWithViewPager(mViewpager);
        mTablayout.setTabsFromPagerAdapter(fragmentAdapter);
    }


}

3.用CoordinatorLayout实现Toolbar的隐藏
xml代码如下

<?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"
    tools:context="com.mvpdemo.UI.MaterialDemo.TablayoutDemoActivity">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

注意：
代码的关键是
1.使用CoordinatorLayout，因为用错了，导致上滑toolbar不隐藏。找了半天的bug是因为把CoordinatorLayout错写成了
ConstraintLayout。
2.代码的关键是：app:layout_scrollFlags=“scroll|enterAlways”，和 app:layout_behavior="@string/appbar_scrolling_view_behavior"
这样view滑动的时候，toolbar才会隐藏。
4.用CoordinatorLayout实现Toolbar的折叠
xml布局如下:

<?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"
    tools:context="com.mvpdemo.UI.MaterialDemo.toolbarfold.ToolbarFoldActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

java代码：

public class ToolbarFoldActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar_fold);
        Toolbar toolbar=findViewById(R.id.toolbar);
        CollapsingToolbarLayout layout=findViewById(R.id.coll_layout);
        RecyclerView recyclerView=findViewById(R.id.recyclerview);
        setSupportActionBar(toolbar);
        layout.setTitle("toolbar折叠");
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(new MyRecyclerViewAdapter(this));
    }
}

app:contentScrim="?attr/colorPrimary":用来设置CollapsingToolbarLayout折叠后最顶部的颜色
**app:collapsedTitleGravity=""**表示CollapsingToolbarLayout完全展开后，title所在的位置，默认是left+bottom
**app:layout_scrollFlags=“scroll|exitUntilCollapsed”**用来设置滚动事件，属性中启用scroll，这样view才会滚动出屏幕，否则它一直固定在顶部；设置scroll|exitUntilCollapsed能实现折叠效果，设置scroll|enterAlways能实现隐藏效果；
**app:layout_behavior="@string/appbar_scrolling_view_behavior"**用来通知APPBarLayout发生了滚动事件。这个behavior需要设置在触发滑动事件view上，设置了这个属性和layout_scrollFlags形成对应，然后接受到滑动事件。
5.用NavigationView实现抽屉菜单界面
详情见此文章：https://blog.csdn.net/weixin_37292229/article/details/70045617
6.Snackbar的使用

   private void showSnackBar() {
        Snackbar.make(mLlSnack, "标题", Snackbar.LENGTH_LONG)
                .setAction("点击事件", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Log.e("===", "aaa");
                    }
                }).setDuration(Snackbar.LENGTH_LONG).show();
    }

7.FloatingActionButton的使用

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="18dp"
        android:clickable="true"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="#FFCB2929"
        app:elevation="3dp"
        app:pressedTranslationZ="5dp"/>

backgroundTint用来设置背景色
elevation用来设置正常状态的阴影大小
pressedTranslationZ用来设置点击时阴影的大小