Android構建Material Design應用詳解
長久以來。Android的UI并不算美觀，以至于很多IT公司在進行界面設計的時候，為了保證雙平臺的統(tǒng)一性，強烈要求Android端的界面風格必須與iOS端一致，我認為這里非常不合理的，同一操作系統(tǒng)中各個應用之間的界面統(tǒng)一性要遠比一個應用在雙平臺的界面統(tǒng)一性重要的多，只有這樣，才能給使用者帶來更好的用戶體驗。為了解決這個問題，Google公司在2014年IO大會上推出了一套全新的界面設計語言——Material Design（材料設計語言），這次Google在界面設計上確實下足了功夫，一個詞，好看。并且在2015年IO大會上推出了一個Design Support庫，這個庫將Material Design中最具代表性的一些控件和效果進行了封裝，使得開發(fā)者在不了解Material Design的情況下也可以輕松地將自己的應用Material化。
1.Toolbar
1.基本的Toolbar
Toolbar 控件是由 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> <!-- 懸浮圖標等顏色，更多的表達了一種強調的意思，比如一些控件的選中狀態(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，它在內部做了很多滾動事件的封裝，并應用了一些 Material Design 的設計理念，AppBarLayout 解決了 在 FrameLayout 中 Toolbar 被遮擋的問題。
Activity：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);
2.RecyclerView向上滾動隱藏Toolbar
Toolbar 添加一行代碼 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.FloatingActionButton
FloatingActionButton 是由 design support 庫提供的，使用需要添加依賴：
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.Snackbar
Snackbar 是由 design support 庫提供的。Snackbar 的第一個參數(shù)需要傳入一個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.CoordinatorLayout
Snackbar 是由 design support 庫提供的，CoordinatorLayout 可以說是加強版的 FrameLayout，CoordinatorLayout 可以監(jiān)聽其所有子控件的各種事件，然后自動幫我們做出最為合理的響應，就比如剛才說的 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.CardView
CardView 控件是由 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控件，可以設置陰影和圓角效果"/> </android.support.v7.widget.CardView>
運行后效果圖如下：
4.全透明狀態(tài)欄
需要 Android 5.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效果Dialog
1.AlertDialog
樣式效果向下兼容到 Android 2.1
new android.support.v7.app.AlertDialog.Builder(context)
.setTitle("AlertDialog")
.setMessage("Something important.")
.setCancelable(false) //設置點擊Dialog以外的界面不消失，按返回鍵也不起作用
.setPositiveButton("OK", new android.content.DialogInterface.OnClickListener() {
@Override
public void onClick(android.content.DialogInterface dialogInterface, int i) {
}
})
.setNegativeButton("Cancel", null)
.show();
2.ProgressDialog
樣式效果向下兼容到 Android 5.0
ProgressDialog progressDialog = new ProgressDialog(context);
progressDialog.setTitle("ProgressDialog");
progressDialog.setMessage("Loading..");
progressDialog.setCancelable(true);
progressDialog.show();
3.ripple_drawable資源
Android5.0 推出的 “水波漣漪”效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
一般情況下我們在flutter中搭建的app基本上都是用的是MaterialApp這種設計模式，MaterialApp中為我們接下來使用的按鈕，菜單等提供了統(tǒng)一的樣式，那么這種樣式能不能進行修改或者自定義呢？答案是肯定的，一起來看看吧2023-03-03
這篇文章主要介紹了kotlin 官方學習教程之基礎語法詳解的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細介紹了android自定義環(huán)形統(tǒng)計圖動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細介紹了Android仿IOS UIAlertView對話框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了Android LitePal的使用，幫助大家更好的進行Android開發(fā)，感興趣的朋友可以了解下2020-12-12
Android 使用AsyncTask實現(xiàn)斷點續(xù)傳
這篇文章主要介紹了Android 使用AsyncTask實現(xiàn)斷點續(xù)傳的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
Android ViewPager實現(xiàn)無限循環(huán)輪播廣告位Banner效果
這篇文章主要為大家詳細介紹了Android ViewPager實現(xiàn)無限循環(huán)輪播廣告位Banner效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
單例模式，可以說是GOF的23種設計模式中最簡單的一個。接下來通過本文給大家實例講解android設計模式系列之單例模式的相關知識，感興趣的朋友一起看看吧2016-09-09
Android的內存優(yōu)化是性能優(yōu)化中很重要的一部分，本文將詳細介紹Android性能優(yōu)化之內存優(yōu)化。2021-06-06
這篇文章主要介紹了Android中創(chuàng)建多線程管理器實例,著重講解需要做的哪些事情,每一步都配有代碼例子,需要的朋友可以參考下2014-06-06