本文预计阅读:10分钟
听说谷歌Baba的IO大会更新了一些新奇的小玩意~
新东西忒多,这里先重点关注下有关:Material UI。
最近的状态啊,真是千万头草泥马奔腾而过。。。
来瓶哇哈哈,精神抖擞来一波~
简单回顾
Material Design,是谷歌在14年的IO大会上提出的一种新的理念,也被称为新的设计语言(也被称为“原材料设计”),称它为设计语言不为过,但是实际上,这仅仅是谷歌提倡的一种新的设计风格、理念以及设计基本原则。
脑图呈现文本重点
前期配置
当初LZ前期配置遇了不少坑,这里我们一起回顾下:
Step 1:打开工程目录下的build.gradle文件,并添加maven引用
allprojects {
repositories {
google()
jcenter()
// 1.添加Google Maven地址
maven {
url "https://maven.google.com"
}
}
}
Step 2:修改编译版本
// 2.修改编译版本为 android - P
compileSdkVersion 'android-P'
Step 3:移除项目工程中依赖的v7包以及添加material依赖
dependencies {
// 3.移除项目工程中依赖的v7包
implementation fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
// 4.添加material依赖
implementation 'com.google.android.material:material:1.0.0-alpha1'
}
当然,你可以使用
com.android.support:design:28.0.0-alpha1
但是主要注意的是design包和material二者只能选一。
Step 4: 使用 androidx.appcompat.app.AppCompatActivity
注意:使用的是androidx。
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
本文说明
由于阅读在公众号内,在此LZ简单挑出几个比较有意思的说明一下,具体详情可点击原文大屏观看,怎一个爽字了得~
举几个栗子
首先放个小姐姐镇楼~
1. Bottom App Bar
Material Design的一个重要特征是设计 BottomAppBar。可适应用户不断变化的需求和行为,So,BottomAppBar是一个从标准物质指导的演变。它更注重功能,增加参与度,并可视化地锚定UI。
先来一个什么鬼样式都没有的:
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimaryDark" // 设置背景色
app:navigationIcon="@android:drawable/ic_menu_call" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
效果当然比较Low咯~
下面引用一个官方内置样式:
style=”@style/Widget.MaterialComponents.BottomAppBar”:
相对来说,效果还是不错的~
当然下面还有一些其他的属性:
可以通过FabAlignmentMode,FabAttached,FabCradleMargin,FabCradleRoundedCornerRadius和FabCradleVerticalOffset来控制FAB的放置;
当然,我们还可以通过fabAttached属性去设置FloatingActionButton以及BottomAppBar是否粘合,效果如下:
2. Bottom Navigation
BottomNavigationView创建底部导航栏,用户只需轻点一下即可轻松浏览和切换顶级内容视图。
当项目有3到5个顶层(底部)目的地导航到时,可以使用此模式。
使用也是很Easy,如下:
那下面按照步骤操作一次:
Step 1:在布局中添加BottomNavigationView:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/colorPrimaryDark"
app:menu="@menu/bottom_navigation_menu" />
Step 2:定义menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="@android:drawable/ic_menu_info_details"
android:orderInCategory="100"
android:title="你" />
<item
android:icon="@android:drawable/ic_menu_info_details"
android:orderInCategory="100"
android:title="我" />
<item
android:icon="@android:drawable/ic_menu_help"
android:orderInCategory="100"
android:title="他" />
</menu>
Step 3: 运行一波,走起~
当然,内置了一些其他样式,感兴趣可原文查阅~
3. Bottom Sheets
BottomSheetBehavior应用于CoordinatorLayout的一个子类, 使其成为持久的底部工作表。
持久性底部页面是从屏幕底部出现的视图,在主要内容上升高。他们可以垂直拖动以暴露他们的内容列表。
注意:如果要使用模态(对话框)的底页,请使用 BottomSheetDialogFragment。
下面着撸起实现:
Step 1:搞个布局玩玩
外层使用CoordinatorLayout包裹,底部导航栏采用BottomNavigationView,中间内容区域,很Easy咯~
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/cl_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:onClick="showBehavior"
android:text="测试" />
<androidx.core.widget.NestedScrollView
android:id="@+id/show_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="true"
app:behavior_peekHeight="300dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="300dp"
app:cardBackgroundColor="@color/colorAccent" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="300dp"
app:cardBackgroundColor="@color/colorPrimaryDark" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="300dp"
app:cardBackgroundColor="@color/colorAccent" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
style="@style/Widget.Design.BottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/colorPrimaryDark"
app:menu="@menu/bottom_navigation_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 2:实现效果,主要是BottomSheetBehavior使用
package com.hlq.materialstudy;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.bottomsheet.BottomSheetBehavior;
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
public class MainActivity extends AppCompatActivity {
private CoordinatorLayout mCoordinatorLayout;
BottomSheetBehavior behavior;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCoordinatorLayout = findViewById(R.id.cl_layout);
View bottomSheetView = mCoordinatorLayout.findViewById(R.id.show_list);
behavior = BottomSheetBehavior.from(bottomSheetView);
behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(View view, int i) {
// 这里是bottomSheet 状态的改变,根据slideOffset可以做一些动画
}
@Override
public void onSlide(View view, float v) {
// 这里是拖拽中的回调,根据slideOffset可以做一些动画
}
});
}
public void showBehavior(View view) {
behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
Step 3:效果如下
俩步走,666没毛病。
这里再次简单描述相关细节:
Bottom Sheets具有五种状态:
如果已经在Activity使用CoordinatorLayout,添加底部表单很简单:
听说,有人想来点赞赏?
最后,觉得不错,来波转发~比心~