Android基础知识——Material Design实战
Posted ABded
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android基础知识——Material Design实战相关的知识，希望对你有一定的参考价值。
文章目录
1.什么是Material Design
Material Design是由谷歌的设计工程师们基于传统的优秀设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉，运动，互动效果等特性。而事实上，Material Design更像是一种设计思想和理念，而本节我们并不是要以设计师的角度去学习Material Design，而是以一个开发者的角度去学习使用一些符合Material Design理念的一些控件。
2.Toolbar
Toolbar继承了ActionBar的所有功能，而且灵活性很高，可以配合其他控件来完成一些Material Design的效果。
基本使用步骤：
1.更改程序的标题栏主题。
2.在布局中加入Toolbar。
3.在活动中替换标题栏。
示例：
//步骤一，values下的styles文件
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">//因为我们要引入toolbar，所以这里选择无标题栏主题
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
//步骤二
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<androidx.appcompat.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" />//令标题栏中的菜单项为浅色主题
</LinearLayout>
//步骤三
public class MainActivity extends AppCompatActivity
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//将标题栏替换为toolbar
更改toolbar上显示的文字：
我们可以在活动中加入android：label属性来指定toolbar上显示的文字。
给toolbar添加菜单项：
使用步骤与给普通的actionbar添加菜单项类似。
示例：
//菜单布局
<?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/back"
android:icon="@drawable/back"
android:title="Back"
app:showAsAction="always" />//始终以图片的形式存在于标题栏
<item
android:id="@+id/setting"
android:icon="@drawable/setting"
android:title="Setting"
app:showAsAction="ifRoom" />//如果空间允许则以图片的形式存在于标题栏，否则以文字的形式
<item
android:id="@+id/delete"
android:icon="@drawable/delete"
android:title="Delete"
app:showAsAction="never" />//始终以文字的形式存在于标题栏
</menu>
//活动
public class MainActivity extends AppCompatActivity
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
@Override
public boolean onCreateOptionsMenu(Menu menu) //引入菜单布局
getMenuInflater().inflate(R.menu.toolbra,menu);
return true;
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) //给菜单中的各个菜单项设置点击事件
switch (item.getItemId())
case R.id.back:
finish();
break;
case R.id.setting:
Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
break;
default:
break;
return true;
3.滑动菜单
就是我们手机上常见的侧拉栏。
3.1DrawerLayout
使用方法：
DrawerLayout布局只允许其下有两个直接子布局，第一个是主界面的布局，第二个是侧拉栏的布局。
示例：
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.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" />
</FrameLayout>
<TextView
android:id="@+id/text_view"
android:text="This is menu"
android:background="#fff"
android:textSize="30sp"
android:layout_gravity="start"//侧拉栏的布局必须声明这一属性，left表示侧拉栏在左，right表示侧拉栏在右，start则会根据系统语言来自动选择
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.drawerlayout.widget.DrawerLayout>
一个小问题：
这里可能存在一个问题，用户可能并不知道你的程序会有侧拉栏的功能，所以这里谷歌建议我们在标题栏中添加一个侧拉栏对应的按钮，用于打开侧拉栏。
示例：
public class MainActivity extends AppCompatActivity
private DrawerLayout drawerLayout;
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
setSupportActionBar(toolbar);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null)
actionBar.setDisplayHomeAsUpEnabled(true);//toolbar的最左侧有一个系统默认存在的按钮，而该方法能让该按钮显示出来
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//这个按钮本身的图案是一个返回的箭头，而这里我们可以更改它的图案
@Override
public boolean onCreateOptionsMenu(Menu menu)
getMenuInflater().inflate(R.menu.toolbra,menu);
return true;
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item)
switch (item.getItemId())
case android.R.id.home://给这个系统默认存在的按钮添加点击事件
drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.back:
finish();
break;
case R.id.setting:
Toast.makeText(MainActivity.this,"setting",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();
break;
default:
break;
return true;
3.2NavigationView
在上节中我们侧拉栏中的内容有些单薄，而NavigationView可以帮助我们很轻松的丰富侧拉栏中的内容。
使用步骤：
1.声名依赖。
2.准备好NavigationView的menu项。
3.准备好NavigationView的headerLayout
4.在布局中加入NavigationView。
5.可以在活动中给NavigationView的各个菜单项设置点击事件。
示例：
//步骤一
dependencies
implementation 'com.google.android.material:material:1.2.1'//material design的相关库
implementation 'de.hdodenhof:circleimageview:3.1.0'//这是一个开源项目，可以帮助我们很轻松的实现图片圆形化的功能。
//步骤二
<?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/call"
android:title="Call"
android:icon="@drawable/nav_call" />
<item
android:id="@+id/friends"
android:title="Friends"
android:icon="@drawable/nav_friends" />
<item
android:id="@+id/location"
android:title="Location"
android:icon="@drawable/nav_location" />
<item
android:id="@+id/mail"
android:title="Mail"
android:icon="@drawable/nav_mail" />
<item
android:id="@+id/task"
android:title="Task"
android:icon="@drawable/nav_task" />
</group>
</menu>
//步骤三
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="180dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/image_view"
android:src="@drawable/nav_icon"
android:layout_centerInParent="true"
android:layout_width="70dp"
android:layout_height="70dp" />
<TextView
android:id="@+id/mail"
android:textColor="#fff"
android:text="mail: 1938796569@qq.com"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/username"
android:textColor="#fff"
android:text="username: yangxu"
android:layout_above="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
//步骤四
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.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" />
</FrameLayout>
<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:menu="@menu/nav_menu"
app:headerLayout="@layout/header_layout"/>
</androidx.drawerlayout.widget.DrawerLayout>
//步骤五
final DrawerLayout drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView=(NavigationView) findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.call);//将call菜单项设置为选中状态
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener()
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) //可以在这里使用switch语句区分各个菜单项
drawerLayout.closeDrawers();
return true;
);
4.悬浮按钮和可交互提示
4.1FloatingActionButton
该控件可以帮助我们很轻松的实现悬浮按钮的效果。
示例：
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.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" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:src="@drawable/ic_done"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"//此处的end同样也是根据系统语言来自动选择left或right
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="8dp"/>//该属性可以调整悬浮按钮下的阴影状态
</FrameLayout>
//我们还可以给这个悬浮按钮注册一个点击事件
FloatingActionButton fab=(FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View view)
Toast.makeText(MainActivity.this,"ok",Toast.LENGTH_SHORT).show();
);
4.2Snackbar
在此之前我们向用户发送提示信息时最常用的便是Toast了，但是Toast仅仅只能通知用户一些简单的信息，而用户则只能被动接收，因为没有什么办法能让用户来进行选择。
现在让我们设想一个场景当用户在删除文件时，如果不小心删除了几个重要的文件，假设我们只是用Toas来提示用户而没有给出取消的方法时，相信用户肯定会抓狂吧。而Snackbar则可以很好的解决这个问题。
示例：
fab.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View view)
Snackbar.make(view,"you delete some import data",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() //setAction()方法的第一个参数是按钮名，第二个是监听器
@Override
public void onClick(View view) a
Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
).show();
);
4.3CoordinatorLayout
如果你已经运行了我们在上面讲的代码的话，那你一定会发现Snackbar的提示信息将我们的悬浮按钮给遮挡住了，这样是十分影响界面的美观的，而我们本节要讲的CoordinatorLayout就可以解决这个问题了。
CoordinatorLayout是一个升级版的FrameLayout，它可以监听其所有子控件的各种事件，然后帮助我们做出最为合理的响应。
示例：
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.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" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:src="@drawable/ic_done"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="8dp"/Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)