【移動應(yīng)用開發(fā)技術(shù)】Android中怎么構(gòu)建一個Material Design應(yīng)用

【移動應(yīng)用開發(fā)技術(shù)】Android中怎么構(gòu)建一個MaterialDesign應(yīng)用

這篇文章將為大家詳細講解有關(guān)Android中怎么構(gòu)建一個MaterialDesign應(yīng)用，文章內(nèi)容質(zhì)量較高，因此在下分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。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>

<!--

懸浮圖標等顏色，更多的表達了一種強調(diào)的意思，比如一些控件的選中狀態(tài)也會使用該顏色

-->

<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，它在內(nèi)部做了很多滾動事件的封裝，并應(yīng)用了一些MaterialDesign的設(shè)計理念，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的第一個參數(shù)需要傳入一個View，可以是當前界面布局的任意一個View，然后會使用這個View來自動查找最外層的布局，用于展示Snackbar。Activity：Snackbar.make(view,

"This

is

Snackbar.",

Snackbar.LENGTH_SHORT)

//

設(shè)置動作

.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可以監(jiān)聽其所有子控件的各種事件，然后自動幫我們做出最為合理的響應(yīng)，就比如剛才說的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庫提供的，用于實現(xiàn)一個立體的卡片，提供了圓角、陰影等效果。使用需要添加依賴：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控件，可以設(shè)置陰影和圓角效果"/>

</android.support.v7.widget.CardView>運行后效果圖如下：4.全透明狀態(tài)欄需要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