【移动应用开发技术】Android中怎么构建一个Material Design应用

【移动应用开发技术】Android中怎么构建一个MaterialDesign应用

这篇文章将为大家详细讲解有关Android中怎么构建一个MaterialDesign应用，文章内容质量较高，因此在下分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。1.Toolbar1.基本的ToolbarToolbar控件是由appcompat-v7库提供的，使用需要添加依赖：compile

'com.android.support:appcompat-v7:25.3.1'我们使用Toolbar来替代ActionBar，因此需要指定一个不带ActionBar的主题，通常有Theme.AppCompat.NoActionBar(深色)主题或者Theme.AppCompat.Light.NoActionBar(淡色)主题这两种主题可选。Theme：<!--

Base

application

theme.

-->

<style

name="AppTheme"

parent="Theme.AppCompat.Light.NoActionBar">

<!--

Toolbar的颜色

-->

<item

name="colorPrimary">@color/colorPrimary</item>

<!--

通知栏的颜色

-->

<item

name="colorPrimaryDark">@color/colorPrimaryDark</item>

<!--

悬浮图标等颜色，更多的表达了一种强调的意思，比如一些控件的选中状态也会使用该颜色

-->

<item

name="colorAccent">@color/colorAccent</item>

</style>Layout：<android.support.design.widget.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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</android.support.design.widget.AppBarLayout>AppBarLayout是一个垂直方向的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些MaterialDesign的设计理念，AppBarLayout解决了在FrameLayout中Toolbar被遮挡的问题。Activity：Toolbar

toolbar

=

(Toolbar)

findViewById(R.id.toolbar);

setSupportActionBar(toolbar);2.RecyclerView向上滚动隐藏ToolbarToolbar添加一行代码app:layout_scrollFlags="scroll|enterAlways|snap"即可。Layout：<android.support.design.widget.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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_scrollFlags="scroll|enterAlways|snap"/>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>app:layout_behavior="@string/appbar_scrolling_view_behavior"属性则保证了RecyclerView遮挡Toolbar的问题。2.悬浮按钮和可交互提示1.FloatingActionButtonFloatingActionButton是由designsupport库提供的，使用需要添加依赖：compile

'com.android.support:design:25.3.1'Layout：<android.support.design.widget.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_circle"/>2.SnackbarSnackbar是由designsupport库提供的。Snackbar的第一个参数需要传入一个View，可以是当前界面布局的任意一个View，然后会使用这个View来自动查找最外层的布局，用于展示Snackbar。Activity：Snackbar.make(view,

"This

is

Snackbar.",

Snackbar.LENGTH_SHORT)

//

设置动作

.setAction("ok",

new

View.OnClickListener()

{

@Override

public

void

onClick(View

view)

{

Toast.makeText(context,

"onClick",

Toast.LENGTH_SHORT);

}

}).show();不过有一个bug，Snackbar和悬浮按钮同时使用并且悬浮按钮在界面右下角时，弹出的Snackbar会将悬浮按钮给遮住，这种用户体验是不友好的，要解决这个问题只需要借助CoordinatorLayout就可以轻松解决。3.CoordinatorLayoutSnackbar是由designsupport库提供的，CoordinatorLayout可以说是加强版的FrameLayout，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮我们做出最为合理的响应，就比如刚才说的Snackbar那个bug，借助CoordinatorLayout，就可以使得Snackbar向上偏移，从而确保不会被Snackbar遮挡住。Layout：<android.support.design.widget.CoordinatorLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

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"/>

<android.support.design.widget.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_circle"/>

</android.support.design.widget.CoordinatorLayout>另外，由于CoordinatorLayout本身就是加强版的FrameLayout，所以替换FrameLayout也不会有任何的副作用。3.卡片式布局1.CardViewCardView控件是由cardview-v7库提供的，用于实现一个立体的卡片，提供了圆角、阴影等效果。使用需要添加依赖：compile

'com.android.support:cardview-v7:25.3.1'Layout：<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:cardCornerRadius

=

"10dp"

app:elevation="5dp"

app:cardBackgroundColor="#71C3DE">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_margin="20dp"

android:text="CardView控件，可以设置阴影和圆角效果"/>

</android.support.v7.widget.CardView>运行后效果图如下：4.全透明状态栏需要Android5.0及以上。public

class

MainActivity

extends

AppCompatActivity

{

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

if(Build.VERSION.SDK_INT

>=

Build.VERSION_CODES.LOLLIPOP)

{

Window

window

=

getWindow();

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS

|

WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

|

View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

|

View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

window.setStatusBarColor(Color.TRANSPARENT);

window.setNavigationBarColor(Color.TRANSPARENT);

}

setContentView(R.layout.activity_main);

}

}5.Material效果Dialog1.AlertDialog样式效果向下兼容到Android2.1new

android.support.v7.app.AlertDialog.Builder(context)

.setTitle("AlertDialog")

.setMessage("Something

importan