[Android] 03 - UI and Material Design

時間  2019-11-13
標籤 android material design 欄目 Android 简体版
原文   原文鏈接

背景

 

Ref: Lecture 2: UI and Layout [Android 2016]android

Ref: chenyangcun/MaterialDesignExamplegit

Ref: 加載圖片助手：https://www.fresco-cn.org/github

"5.0系統最大的改變就是Material Design了，所以新書中也是花了很是大的篇幅來詳細講解Material Design." ----《第一行代碼 第2版》app

 

Material Design的重要性

若是是 色彩盲，請自行收藏這個網站： Material Design Color Palette Generator
從一開始起就嚴格按照material design寫， Material Design
 

控件使用建議

不要自定義一堆padding margin,但你須要邊框，邊距的時候，請看看 ?android:attr/裏面有木有你需求的（因爲android studio強大的補全功能，你通常只需打幾個關鍵詞就有提示了），好比你須要給一個ImageButton加點擊效果， 不要傻不拉幾的去寫一個selector了，你只須要輸入 item select這些關鍵詞，自動補全就會給你提示了。

不要定義一大堆亂七八糟的 字體大小了，materail design上的幾種基本字體大小能夠知足你！

再也 不要使用ListView了，改爲RecycleView吧！

再也 不要尋找第三方下拉刷新控件了，SwipeRefreshLayout確定符合你的要求（不信你看，知乎Android客戶端都是用的這個(●ˇ∀ˇ●)）。

再也 不要使用第三方側滑欄了,DrawerLayout能知足你！

再也 不要使用ViewPagerTabStripe這一類的第三方Tab控件了，請使用TabLayout!

再也 不用找圓形頭像控件，圓角控件了，其餘的Univeral Image Loader /Picasso也不用看了，直接上Fresco | Fresco 中文說明吧，它都有！不如用省下的時間看看Fresco的源碼。
 
 
 
 
 
本篇以《第一行代碼 第2版》的內容爲主，先複習基本UI，再瞭解material design
  
 

 

UI控件 

 

2.2.1 LinearLayout(線性佈局)
2.2.2 RelativeLayout(相對佈局)
2.2.3 TableLayout(表格佈局)
2.2.4 FrameLayout(幀佈局)
2.2.5 GridLayout(網格佈局)
2.2.6 AbsoluteLayout(絕對佈局)
2.3.1 TextView(文本框)詳解
2.3.2 EditText(輸入框)詳解
2.3.3 Button(按鈕)與ImageButton(圖像按鈕)
2.3.4 ImageView(圖像視圖)
2.3.5.RadioButton(單選按鈕)&Checkbox(複選框)
2.3.6 開關按鈕ToggleButton和開關Switch
2.3.7 ProgressBar(進度條)
2.3.8 SeekBar(拖動條)
2.3.9 RatingBar(星級評分條)
2.4.1 ScrollView(滾動條)
2.4.2 Date & Time組件(上)
2.4.3 Date & Time組件(下)
2.4.4 Adapter基礎講解
2.4.5 ListView簡單實用
2.4.6 BaseAdapter優化
2.4.7ListView的焦點問題
2.4.8 ListView之checkbox錯位問題解決
2.4.9 ListView的數據更新問題
2.5.0 構建一個可複用的自定義BaseAdapter
2.5.1 ListView Item多佈局的實現
2.5.2 GridView(網格視圖)的基本使用
2.5.3 Spinner(列表選項框)的基本使用
2.5.4 AutoCompleteTextView(自動完成文本框)的基本使用
2.5.5 ExpandableListView(可摺疊列表)的基本使用
2.5.6 ViewFlipper(翻轉視圖)的基本使用
2.5.7 Toast(吐司)的基本使用
2.5.8 Notification(狀態欄通知)詳解
2.5.9 AlertDialog(對話框)詳解
2.6.0 其餘幾種經常使用對話框基本使用
2.6.1 PopupWindow(懸浮框)的基本使用
2.6.2 菜單(Menu)
2.6.3 ViewPager的簡單使用
2.6.4 DrawerLayout(官方側滑菜單)的簡單使用
控件列表

 

基本上用法都很類似,框架

    1. 給控件定義一個 id,
    2. 再指定下控件的寬度和高度,
    3. 而後再適當加入些控件特有的屬性就差很少了

 

button點擊事件觸發ide

給button添加監聽事件，因此參數就是個監聽器的類，並重寫了其中的onClick方法。佈局

以上是匿名類方法，或者使用activity的接口實現方法，也就是重寫activty中的onClick方法，並需判斷傳來的是該activity下的哪一個button。post

 

EditText默認提醒文字學習

android:hint="Type something here"

 

獲取控件對象的兩種方式字體

1.
private EditText editText;
String inputText = editText.getText().toString();

2.
editText = (EditText) findViewById(R.id.edit_text);

 

AlertDialog小窗口提醒

AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle     ("This is Dialog");
dialog.setMessage   ("Something important.");
dialog.setCancelable(false);
dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
　　@Override
　　public void onClick(DialogInterface dialog, int which) {
　　...
　　}
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
　　@Override
　　public void onClick(DialogInterface dialog, int which) {
　　...
　　}
});
dialog.show();

  

四種基本佈局

Ref: Android 基礎：經常使用佈局 介紹 & 使用

框架佈局　繼承    線性佈局

約束佈局　優於　相對佈局

絕對佈局　不適合手機類型多樣化

網格佈局GridLayout　優於　tablelayout，詳見：Android 4.0新增的網格佈局GridLayout

 

 

一些建議學習

a. 再也 不要使用ListView了，改爲RecycleView吧！
b. 再也 不要尋找第三方下拉刷新控件了，SwipeRefreshLayout確定符合你的要求。

Goto：一篇博客理解Recyclerview的使用【有預覽圖】

Goto：RecyclerView使用徹底指南，是時候體驗新控件了

以及，上述二者的結合，構成列表拖動刷新：使用SwipeRefreshLayout和RecyclerView實現仿「簡書」下拉刷新和上拉加載【有代碼】


c. 再也 不要使用第三方側滑欄了,DrawerLayout能知足你！

Ref: DrawerLayout和NavigationView使用詳解


d. 再也 不要使用ViewPagerTabStripe這一類的第三方Tab控件了，請使用TabLayout!

Ref: Design庫-TabLayout屬性詳解


e. 再也 不用找圓形頭像控件，圓角控件了，其餘的Univeral Image Loader /Picasso也不用看了，直接上Fresco | Fresco 中文說明吧，它都有！不如用省下的時間看看Fresco的源碼。

Goto: 專門爲ANDROID加載圖片

 

 

 

 

Material Design

 

Ref: https://material.io/guidelines/

Ref: Material Design 中文版 

Ref: Material Design 是一種什麼樣的設計風格？

 

1. ActionBar (Default) ----> Toolbar

Action Bar取代了傳統的tittle bar和menu，在程序運行中一直置於頂部，對於Android平板設備來講屏幕更大它的標題使用Action Bar來設計能夠展現更多豐富的內容，方便操控。

不過ActionBar因爲其設計的緣由，被限定只能位於活動的頂部，從而不能實現一些Material Design的效果，所以官方如今已經再也不建議使用ActionBar了。 

Toolbar的強大之處在於，它不只繼承了ActionBar的全部功能，並且靈活性很高，能夠配合其餘控件來完成一些Material Design的效果。

 

AndroidManifest.xml文件

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    ...
</application> 

res/values/styles.xml文件

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

指定一個不帶ActionBar的主題，一般有兩種主題可選。

    • Theme.AppCompat.NoActionBar　　　　　　　　表示深色主題，它會將界面的主體顏色設成深色，襯托顏色設成淡色。
    • Theme.AppCompat.Light.NoActionBar　　　　　  表示淡色主題，它會將界面的主體顏色設成淡色，襯托顏色設成深色。　　----> as following

 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

 

已經將ActionBar隱藏起來了，那麼接下來看一看如何使用Toolbar來替代ActionBar。

Toolbar的調用：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

 

Toolbar的定義：

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5 
 6     <android.support.v7.widget.Toolbar  7         android:id            = "@+id/toolbar"
 8         android:layout_width  = "match_parent"
 9         android:layout_height = "?attr/actionBarSize"
10         android:background    = "?attr/colorPrimary"
11         android:theme         = "@style/ThemeOverlay.AppCompat.Dark.ActionBar"
12         app:popupTheme        = "@style/ThemeOverlay.AppCompat.Light" />
13 
14 </FrameLayout>

 

 

第2行，這裏使用xmlns:app 指定了一個新的命名空間。

思考一下，正是因爲每一個佈局文件都會使用xmlns:android 來指定一個命名空間，所以咱們才能一直使用android:id 、android:layout_width 等寫法，

那麼這裏指定了xmlns:app ，也就是說如今可使用app:attribute 這樣的寫法了。

可是爲何這裏要指定一個xmlns:app 的命名空間呢？

這是因爲Material Design是在Android 5.0系統中才出現的，而不少的Material屬性在5.0以前的系統中並不存在，那麼爲了可以兼容以前的老系統，咱們就不能使用android:attribute 這樣的寫法了，而是應該使用app:attribute 

 

第６行，定義了一個Toolbar控件，這個控件是由appcompat-v7庫提供的。

這裏咱們給Toolbar指定了一個id，將它的寬度設置爲match_parent ，高度設置爲actionBar的高度，背景色設置爲colorPrimary。

不過下面的部分就稍微有點難理解了，因爲咱們剛纔在styles.xml中將程序的主題指定成了淡色主題，所以Toolbar如今也是淡色主題，而Toolbar上面的各類元素就會自動使用深色系，這是爲了和主體顏色區別開。可是這個效果看起來就會不好，以前使用ActionBar時文字都是白色的，如今變成黑色的會很難看。那麼爲了能讓Toolbar單獨使用深色主題，這裏咱們使用android:theme 屬性，將Toolbar的主題指定成了ThemeOverlay.AppCompat.Dark.ActionBar。

可是這樣指定完了以後又會出現新的問題，若是Toolbar中有菜單按鈕（咱們在2.2.5小節中學過），那麼彈出的菜單項也會變成深色主題，這樣就再次變得十分難看，因而這裏使用了app:popupTheme 屬性單獨將彈出的菜單項指定成了淡色主題。

之因此使用app:popupTheme ，是由於popupTheme 這個屬性是在Android 5.0系統中新增的，咱們使用app:popupTheme 的話就能夠兼容Android 5.0如下的系統了。

 

如此，咱們便有了一個material design風格的title bar。

 

 

2. 滑動側邊欄 + NavigationView

參見本篇上述的 DrawerLayout 。

 

 

FloatingActionButton 是Design Support庫中提供的一個控件，這個控件能夠幫助咱們比較輕鬆地實現懸浮按鈕的效果。它默認會使用colorAccent來做爲按鈕的顏色，咱們還能夠經過給按鈕指定一個圖標。 

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

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

    ...
</android.support.v4.widget.DrawerLayout>

設置點擊事件：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

    ...

}

 

 

4. Snackbar

首先要明確，Snackbar並非Toast的替代品，它們二者之間有着不一樣的應用場景。

    • Toast的做用是告訴用戶如今發生了什麼事情，但同時用戶只能被動接收這個事情，由於沒有什麼辦法能讓用戶進行選擇。
    • Snackbar則在這方面進行了擴展，它容許在提示當中加入一個可交互按鈕，當用戶點擊按鈕的時候能夠執行一些額外的邏輯操做。

　　打個比方，若是咱們在執行刪除操做的時候只彈出一個Toast提示，那麼用戶要是誤刪了某個重要數據的話確定會十分抓狂吧，

　　可是若是咱們增長一個Undo按鈕，就至關於給用戶提供了一種彌補措施，從而大大下降了事故發生的機率，提高了用戶體驗。

 

<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_done"
    app:elevation="8dp" />

 

設置點擊事件：

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ... ...

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "Data restored",Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });
    }

    ...

}

 

 

5. CoordinatorLayout 自動將懸浮按鈕上移

增強版的FrameLayout，這個佈局也是由Design Support庫提供。

CoordinatorLayout能夠監聽其全部子控件的各類事件，而後自動幫助咱們作出最爲合理的響應。例如：

若是咱們能讓CoordinatorLayout監聽到Snackbar的彈出事件，那麼它會自動將內部的FloatingActionButton向上偏移，從而確保不會被Snackbar遮擋到。

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

 

 

其餘，卡片式佈局，下拉刷新等，暫略。

基本上，material design在Android系統上就表現爲一些專門設計的優美控件。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程