一、什么是Android Material Design
Android Material Design是Google推出的一套全新的UI设计语言。它借鉴了现实物品并运用了高级视觉效果,使人可以获得更好的用户体验。这套设计语言适用于Android系统上各种设备,包括智能手机、平板电脑、电视、智能手表和汽车。 在Android Material Design中,设计元素和规则被分离成了5个重要的模块:Environment、Surfaces、Layout、Bold graphic design和Meaningful motion。每个模块都有着不同的设计基础和规则要求。
二、Android Material Design的优势
1. 更好的用户交互性和体验:Android Material Design为用户提供更简单的、更自然的交互方式,其可预测性和一致性可以在各个设备上获得相同的用户体验。
2. 更加清晰的层次结构和导航设计:应用利用颜色和图标等方式增强了层次感和导航设计,用户可以更加快速、准确地找到自己需要的东西。
3. 提高了设计效率和开发效率:在Material Design中,设计和开发人员可以利用已经定义好的UI元素和组件,以快速实现应用程序的UI设计和开发。
三、如何实现Android Material Design
Android Material Design可以通过以下几种方式来实现:
1、使用Support Design Library
Android Support Design Library为开发者提供了丰富的Material Design风格组件和样式,包括DrawerLayout、FloatingActionButton、Snackbar等,可以快速实现Material Design效果。
dependencies { implementation 'com.android.support:design:28.0.0' }
2、自定义View
在Android Material Design中,自定义View的方式仍然有效。我们可以从标准样式和规范中获得灵感,并使用自定义View实现特定的设计需求。
public class MyCustomView extends View { ... }
3、使用Material Design主题
Android Material Design主题是一种专门设计用于Android应用程序的主题,可以帮助开发者在应用程序中快速实现Material Design效果。
<style name="AppTheme" parent="Theme.MaterialComponents.Light"> ... </style>
四、实现一个Material Design风格的Android应用程序
现在我们将从头开始创建一个Material Design风格的Android应用程序,该应用程序将包括以下功能:
1. 应用程序面板:应用程序面板包括了应用程序的抽屉式导航栏(侧边栏)。
2. 应用程序栏:应用程序栏包括了应用程序的导航栏和顶部的应用程序标题。
3. 内容列表:内容列表包括了应用程序的主要内容。
1、创建新项目
在Android Studio中选择“File”->“New”->“New Project”创建一个新项目。在弹出的窗口中选择“Empty Activity”,然后单击“Next”按钮。在“Activity Name”中输入“MainActivity”,并单击“Finish”按钮创建新项目。
2、引入Design Library
在app/build.gradle文件中的依赖项中添加Design Library:
dependencies { implementation 'com.android.support:design:28.0.0' }
3、创建应用程序面板
在activity_main.xml文件中添加以下代码:
<android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:menu="@menu/nav_menu" />
在res/menu文件夹下创建nav_menu.xml文件,并添加以下内容:
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkedItem="@+id/nav_camera"> <item android:id="@+id/nav_camera" android:icon="@drawable/ic_camera" android:title="Camera" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_gallery" android:title="Gallery" /> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_slideshow" android:title="Slideshow" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_share" android:title="Share" /> <item android:id="@+id/nav_send" android:icon="@drawable/ic_send" android:title="Send" /> </menu> </item> </menu>
4、创建应用程序栏
在activity_main.xml文件中添加以下代码:
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:elevation="4dp" app:title="My App" />
在MainActivity.java文件中添加以下代码:
Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar);
5、创建内容列表
在activity_main.xml文件中添加以下代码:
<ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="?attr/actionBarSize" android:clipToPadding="false" />
在MainActivity.java文件中添加以下代码:
ListView listView = findViewById(R.id.listView); String[] items = new String[]{"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}; ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items); listView.setAdapter(adapter);
完整代码示例:
activity_main.xml文件:
<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"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:popupTheme="@style/ThemeOverlay.AppCompat.Light"> <ImageView android:id="@+id/logo" android:layout_width="150dp" android:layout_height="30dp" android:src="@drawable/ic_launcher" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="?attr/actionBarSize" android:clipToPadding="false"/> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:menu="@menu/nav_menu" /> </android.support.v4.widget.DrawerLayout>
MainActivity.java文件:
public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private NavigationView navigationView; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawerLayout = findViewById(R.id.drawer_layout); navigationView = findViewById(R.id.nav_view); toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawerLayout.addDrawerListener(toggle); toggle.syncState(); ListView listView = findViewById(R.id.listView); String[] items = new String[]{"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}; ArrayAdapteradapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items); listView.setAdapter(adapter); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { int id = item.getItemId(); if (id == R.id.nav_camera) { // Handle the camera action } else if (id == R.id.nav_gallery) { // Handle the gallery action } else if (id == R.id.nav_slideshow) { // Handle the slideshow action } else if (id == R.id.nav_send) { // Handle the send action } else if (id == R.id.nav_share) { // Handle the share action } drawerLayout.closeDrawer(GravityCompat.START); return true; } }); } @Override public void onBackPressed() { if (drawerLayout.isDrawerOpen(GravityCompat.START)) { drawerLayout.closeDrawer(GravityCompat.START); } else { super.onBackPressed(); } } }
nav_menu.xml文件:
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkedItem="@+id/nav_camera"> <item android:id="@+id/nav_camera" android:icon="@drawable/ic_camera" android:title="Camera" /> <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_gallery" android:title="Gallery" /> <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_slideshow" android:title="Slideshow" /> </group> <item android:title="Communicate"> <menu> <item android:id="@+id/nav_share" android:icon="@drawable/ic_share" android:title="Share" /> <item android:id="@+id/nav_send" android:icon="@drawable/ic_send" android:title="Send" /> </menu> </item> </menu>
nav_header.xml文件:
<RelativeLayout 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="150dp" android:background="@drawable/background_material" android:paddingLeft="16dp" android:paddingTop="16dp" android:paddingRight="16dp"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:id="@+id/imageView" android:layout_marginTop="25dp" android:scaleType="centerCrop" android:layout_alignParentStart="true" android:layout_alignParentLeft="true" android:src="@drawable/ic_launcher"/> <TextView android:id="@+id/textViewUsername" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Administrator" android:textColor="@android:color/white" android