Material Design

最新推荐文章于 2022-08-31 10:44:50 发布

gkk000

最新推荐文章于 2022-08-31 10:44:50 发布

阅读量362

点赞数

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

本文链接：https://blog.csdn.net/gkk000/article/details/76232539

版权

Android 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Material Design

Google在2014年的I/O大会上提出了Material Design，Material Design是Google设计师为了统一Android的风格设计的一整套完整的界面设计语言，包含了视觉、运动、互动效果等特性。

在标题栏上显示图标：Toolbar

1、更改主题：

name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"

2、定义显示的菜单：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/backup"
        android:icon="@mipmap/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@mipmap/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/settings"
        android:icon="@mipmap/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>

</menu>

3、定义布局文件：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" <--设置Toolbar单独使用深色系，上面的字体不使用深色系-->
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"         <--设置弹出菜单是浅色系-->
    app:layout_scrollFlags="scroll|enterAlways|snap"/>

4、使用

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar, menu);
    return true;
}

滑动菜单：DrawerLayout

允许在该布局中放入两个直接子布局

一个是主屏幕显示的布局，另一个是滑动时显示的布局

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

使用

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu);
}

滑动

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawerLayout.openDrawer(GravityCompat.START);
            break;
    }
    return true;
}

使用NavigationView丰富滑动之后的页面

加入依赖

compile 'com.android.support:design:24.2.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

设置NavigationView的头布局和具体菜单：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@mipmap/nav_call"
            android:title="Call" />
        ......
    </group>
</menu>

使用CircleImageView可以设置显示的图片更加圆形化

...
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/nav_icon" />
    ...

设置NavigationView组件：

......
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity = "start"
    app:menu="@menu/nav_menu"
    app:headerLayout="@layout/nav_header">
......

使用NavigationView组件：

navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return true;
    }
});

悬浮按钮FloatingActionButton：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@mipmap/ic_done"/>

使用

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

可交互提示Snackbar:

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v, "Data deleted", Snackbar.LENGTH_SHORT)
                .setAction("Uudo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, "Cancle", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

加强版的FrameLayout——CoordinatorLayout：

监听所有的子控件，从而做出更加合理的响应。

卡片式布局：CardView，设置显示的布局顶角的弧度

添加依赖：

compile 'com.android.support:cardview-v7:24.2.1'

使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
       ……
       <ImageView
    android:id="@+id/fruit_image"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:scaleType="centerCrop" />   <-- 为了使长宽不一致的图片填充整个 ImageView-->
       ...
    </LinearLayout>

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

AppBarLayout

实现向上滚动遮挡Toolbar，向下滚动显示Toolbar
将Toolbar嵌套到AppBarLayout中：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>

设置需要显示的组件的行为：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

下拉刷新SwipeRefreshLayout：

需要注意的API:

1. setOnRefreshListener(OnRefreshListener listener) 设置下拉监听，当用户下拉的时候会去执行回调
2. setColorSchemeColors(int... colors) 设置进度条的颜色变化，最多可以设置4种颜色
3. setProgressViewOffset(boolean scale, int start, int end) 调整进度条距离屏幕顶部的距离
4. setRefreshing(boolean refreshing) 设置SwipeRefreshLayout当前是否处于刷新状态，一般是在请求数据的时候设置为true，在数据被加载到View中后，设置为false。

使用SwipeRefreshLayout组件包裹需要下拉刷新的组件：

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swip_refresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

使用

swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        refreshFruit();
    }
});

可折叠式标题栏collapsingtoolbarlayout:

向上滑动的时候逐渐折叠标题栏，向下滑动的时候显示标题栏
只能用作AppBarLayout的子布局使用

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">  <--设置滚动效果以及滚动完成之后显示的效果-->

        <ImageView
            ...
            app:layout_collapseMode="parallax" />            <--在折叠过程中产生错位偏移-->

        <android.support.v7.widget.Toolbar
            ...
            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
        ...
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>