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> <!-- 懸浮圖標等顏色，更多的表達了一種強調(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)部做了很多滾動事件的封裝，并應用了一些 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 推出的 “水波漣漪”效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Flutter 透明狀態(tài)欄及字體顏色的設置方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Android程序開發(fā)之使用Design包實現(xiàn)QQ動畫側滑效果和滑動菜單導航
這篇文章主要介紹了Android程序開發(fā)之使用Design包實現(xiàn)QQ動畫側滑效果和滑動菜單導航的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
使用過word的都會知道，在文字排版的時候經(jīng)常要設置首行縮進，這樣才會使排版更整齊，那么在Android中當需要設置首行縮進的時候該腫么辦呢，下面一起來看看。2016-08-08
這篇文章主要介紹了Android編程設計模式之責任鏈模式,詳細分析了Android設計模式中責任鏈模式的概念、原理、應用場景、使用方法及相關操作技巧,需要的朋友可以參考下2017-12-12
一開始，相信很多人都以為myThread中的run()方法會在一個新的線程中運行，但事實并非如此。以下代碼中的handler并沒有調(diào)用線程myThread的start()方法，而是直接調(diào)用了run()方法，這也就意味著實際上并沒有創(chuàng)建一個新的線程，只是在當前線程中調(diào)用run()方法而已2013-10-10
android studio使用教程，主要為大家介紹的是android studio快捷鍵，如果我們掌握了一些常用快捷鍵，那么在使用android studio的過程中會達到事半功倍的效果哦2016-01-01
Android SDK 百度地圖通過poi城市內(nèi)檢索簡介接口的使用
這篇文章主要介紹了Android SDK 百度地圖通過poi城市內(nèi)檢索簡介接口的使用的相關資料,需要的朋友可以參考下2016-02-02
Android Studio4.0導入OpenCv4.3.0的方法步驟
這篇文章主要介紹了Android Studio4.0導入OpenCv4.3.0的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要為大家介紹了RxJava?觸發(fā)流基本原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Android實現(xiàn)ViewPager無限循環(huán)效果（一）
這篇文章主要為大家詳細介紹了Android實現(xiàn)ViewPager無限循環(huán)效果的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05