Unit12：Material Design

1. 标题栏（ToolBar、menu）
2. 滑动窗口（DrawerLayout、NavigationView）
3. 悬浮钮（CoordinatorLayout、FloatingActionButton、Snackbar）
4. 卡片布局（AppBarLayout、CardView、Glide）
5. 下拉刷新（SwipeRefreshLayout）
6.折叠标题栏

Material Design简介

  安卓UI的统一风格。Design Support库封装了代表性的控件和效果。

1.标题

res中：

        <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:id="@+id/tool_bar"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"  // ToorBar使用深色主题，组件自动使用浅色主题
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"          // Material Design新出现的属性兼容Android 5.0之前版本写法，使菜单单独使用浅色主题
        />

java中：

        Toolbar toolbar = findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);

配合Menu使用

<item
        android:id="@+id/back"
        android:title="返回"
        android:icon="@drawable/back"
        app:showAsAction="ifRoom"         // 自动识别是否显示到主屏幕上
    />

2.滑动窗口

DrawerLayout

DrawerLayout布局，可以放两个子控件，第一个主屏幕内容，第二个滑动窗口内容
res中：

<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:id="@+id/tool_bar"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
    </LinearLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="滑动窗口测试"
        android:layout_gravity="start"
        android:background="#fff"
        />

</androidx.drawerlayout.widget.DrawerLayout>

java中：

//       在桌面显示滑动按钮
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.home);

        drawerLayout = findViewById(R.id.drawer_layout);

-----------------------------------------------------
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);           // 开启桌面显示，配置左边滑动开启

NavigationView

.gradle中：

    //noinspection GradleCompatible
    implementation \'com.android.support:design:28.0.0\'                //    NavigationView
    implementation \'de.hdodenhof:circleimageview:2.1.0\'               //    圆框

res中：
1.自定义head_layout和item_layout
2.使用NavigationView集合

<com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"              // 重要属性，不能缺少
        app:menu="@menu/nav_menu"                   // 引入按钮              
        app:headerLayout="@layout/nav_header"/>     // 引入头像

java中：

        NavigationView navigationView = findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }

3.悬浮按钮

CoordinatorLayout

  FrameLayout加强版本，可以监听子控件的所有事件，做出合理响应。

FloatingActionButton

Sanackbar

res中：

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:id="@+id/tool_bar"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/float_button"
            android:layout_gravity="bottom|right"
            android:src="@drawable/floatbutton"
            />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

java中：

       FloatingActionButton floatingActionButton = findViewById(R.id.float_button);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v,"下弹框",Snackbar.LENGTH_SHORT)
                        .setAction("确认",new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "已确认", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });

4.卡片布局

    //noinspection GradleCompatible
    implementation \'com.android.support:recyclerview-v7:24.2.1\'
    //noinspection GradleCompatible
    implementation \'com.android.support:cardview-v7:24.2.1\'           //    卡片
    implementation \'com.github.bumptech.glide:glide:3.7.0\'            //    图片处理

AppBarLayout

  嵌套TooBar使用，控制滑动布局和标题栏的关系。

       <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:id="@+id/tool_bar"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                />
        </com.google.android.material.appbar.AppBarLayout>


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

CardView

  实质上是一个FrameLayout布局，额外提供了圆角和阴影效果

<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="40dp"              // 值越大，弧度越大
    app:cardElevation="5dp">                 // 值越大，范围大，投影淡

Glide

  Glide.with(context).load(fruit.getFruitImage()).into(holder.fruitImage);

5.下拉刷新

res中：

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/swipe_refresh"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    >
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_view"
        />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

java中：

        final SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.swipe_refresh);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            Thread.sleep(2000);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                init();
                                adapter.notifyDataSetChanged();
                                swipeRefreshLayout.setRefreshing(false);
                            }
                        });
                    }
                }).start();
            }
        });

6.折叠标题栏

CoordinatorLayout->AppBarLayout->CollapsingToolbarLayout
CollapsingToolbarLayout作用：自定义一个标题栏

<androidx.coordinatorlayout.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=".FruitActivity"
    android:fitsSystemWindows="true">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appBar"
        android:fitsSystemWindows="true">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/fruit_image_view"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"           //  指定折叠模式
                android:fitsSystemWindows="true">
            </ImageView>
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"/>               // 表示折叠过程中位置始终保持不变
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

NestedScrollView和ScrollView一样，只允许有一个直接子布局

本文链接：https://www.cnblogs.com/ssy197/p/13725156.html

Unit12：Material Design

Material Design简介

1.标题

2.滑动窗口

DrawerLayout

NavigationView

3.悬浮按钮

CoordinatorLayout

FloatingActionButton

Sanackbar

4.卡片布局

AppBarLayout

CardView

Glide

5.下拉刷新

6.折叠标题栏

Unit12：Material Design的更多相关文章

随机推荐

热门专题

目录导航