一.配置:
1.Material Design的控件大多都放在design库中
implementation 'com.android.support:design:30.0.3'
2.Circleimageview的配置:
implementation 'de.hdodenhof:circleimageview:2.1.0'
3.使用三方框架Glide的配置:
implementation 'com.github.bumptech.glide:glide:4.3.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.3.1'
二:控件介绍和使用:
(一).Toolbar:顶替系统标题栏,能引入更精致的设计风格
替换系统标题栏步骤:
1.将style.xml的主题改成
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
2.主函数加入(还需要在layout中添加该控件)
Toolbar toolbal = findViewById(R.id.toolbal);
setSupportActionBar(toolbal);
3.若要开启标题栏的导航按钮(固定id值为: android.R.id.home) 则添加:
ActionBar actionBar = getSupportActionBar();
if(actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
(二)DrawerLayout–滑动菜单
使用说明:
1.可像LinearLayout一样单独使用
2.最好只有俩个直接子控件,第一个是用于主屏幕中显示的内容,第二个是用于菜单的显示内容
3.第二个子控件的layout_gravity属性一定要,否则会覆盖在主屏幕中
属性值"start"表示左边滑出菜单,”end“则表示右边滑出菜单
4.若要加第三个直接子控件,那么第三个直接子控件也会以菜单的形式出现
且layout_gravity属性值不能与第二个子控件一样,否则报错
(三)NavigationView----谷歌官方推荐DrawerLayout的菜单页面中填充的最佳控件
使用说明:
1.有俩个关键属性:app:menu 还有 app:headerlayout
2.上述俩个属性的值都是相应的menu布局文件与layout布局文件
3.有监听事件:
navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
mDrawerLayout.closeDrawers();
return true;
}
});
(四)FloatingActionButton----悬浮按钮
使用说明:
1.有src属性可以放置图标
2.跟button一样有监听功能
3.使用layout_gravity去适配它的位置
4.有投影:使用elevation属性去调整它的高度,高度越高,投影范围越大,投影效果越淡。反而反之
(五)Snackbar----可交互提示
使用说明:
1.比Toast多了一个setaction,目的就是在开启事件时你还可以有取消的动作,防止误删数据等
2.多了一个监听功能除了1的作用外逻辑是可以自己写的,跟button的监听一样
3.利用上述的FloatingActionBar的监听功能来体会Snackbar的用法
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"Delete Data",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MyApplication.getContext(),"Data is restored",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
(六)CoordinatorLayout----加强版的FrameLayout
使用说明:
1.普通功能与FrameLayout基本一样
2.特殊功能在于它可以监听所有子控件的各种事件,然后做出最合理的响应
3.比如在(五)点击了悬浮按钮FloatingActionButton后下面的效果图会遮挡住FloatingActionButton,而若将FloatingActionButton置于CoordinatorLayout中就能轻松解决,因为它会让我们的FloatingActionButton知道上浮防止被覆盖到,使用户体验更加。
(七)AppBarLayout----使toolbar变得更灵活
使用说明:
为了解决在CoordinatorLayout中加入滚动布局例如RecyclerView造成toolbar被RecyclerView遮挡覆盖
1.将toolbar置为AppBarLayout的子控件
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</com.google.android.material.appbar.AppBarLayout>
2.为含有RecyclerView等滚动布局的最外层控件指定一个布局行为:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
例:
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
这样就可以很好的解决toolbar被遮挡的问题了
(七)SwipeRefreshLayout—下拉刷新
使用说明:
1.将想实现下拉刷新的控件放置到SwipeRefreshLayout中就可以实现下拉刷新了
例:
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
2.可以设置刷新的监听功能
swipeRefresh = findViewById(R.id.swipeRefresh);
swipeRefresh.setColorSchemeColors(R.color.colorPrimary);
swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
refreshAnimals();
}
});
二之七控件的结合使用:
<androidx.drawerlayout.widget.DrawerLayout android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<com.google.android.material.floatingactionbutton.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="@drawable/ic_done"
app:elevation="8dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>
(八)CardView----卡片式布局
使用说明:它其实也是一个FrameLayout
1.最好直接子控件来一个LinearLayout或者另外的其他布局,然后再嵌套子控件,不然多个控件显示的效果就还是跟FrameLayout一样
例:
<androidx.cardview.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
app:cardCornerRadius="4dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/animal_image"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/animal_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="16sp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
假如最外层的LinearLayout去掉,那显示的效果就完全不一样了,可以试试看
app:cardCornerRadius="4dp"
这个属性是来显示 卡片边缘的圆弧的弧度
(九)CollapsingToolbarLayout----可折叠式标题栏
使用说明:
1.CollapsingToolbarLayout必须作为AppBarLayout的直接子布局
2.AppBarLayout必须作为CoordinatorLayout的子布局
3.CollapsingToolbarLayout中可以放置图片资源 + toolbar作为标题栏,这就使标题栏更加的好看
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collasping_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/animal_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
属性分析:
1.这个是将图片按原来的比例进行缩放,然后填充到它的指定width和height
android:scaleType="centerCrop"
2.表示折叠过程中的折叠模式:
“parallax”表示在折叠的过程中产生一定的错位偏移,能达到更好的视觉效果
"pin"表示在折叠过程中位置始终保持不变
app:layout_collapseMode="parallax"
app:layout_collapseMode="pin"
注:下面这个属性是配置 用UI布局填充掉系统状态栏所用的
用法:
1.将所需要填充的控件以及它的外层到最外层的控件都加入这一属性
android:fitsSystemWindows="true"
2.将系统状态栏变成透明,透明这一属性只有 API为21开始才有,所以需要配置values-21的文件,不配置也可以,直接在style里这样子:
即声明了21的api
<item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>
这样就可以充分的利用系统状态栏,达到更好的UI效果
(十)ScrollView与NestedScrollView–滚动的View
作用:可以以滚动的方式来查看屏幕以外的数据(数据多的时候)
使用说明:
1.只允许存在一个子布局,所以一般用嵌套结构
2.NestedScrollView 比 ScrollView多了嵌套响应滚动事件的功能,CoordinatorLayout也具备
3.也有app:layout_behavior的属性
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/animal_content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
我使用过的Material Design的控件到这就总结结束了,之后有遇到更好的控件会继续补充。