提升應用美觀度的秘訣——Android Material Design

一、什麼是Android Material Design

Android Material Design是Google推出的一套全新的UI設計語言。它借鑒了現實物品並運用了高級視覺效果，使人可以獲得更好的用戶體驗。這套設計語言適用於Android系統上各種設備，包括智能手機、平板電腦、電視、智能手錶和汽車。

在Android Material Design中，設計元素和規則被分離成了5個重要的模塊：Environment、Surfaces、Layout、Bold graphic design和Meaningful motion。每個模塊都有着不同的設計基礎和規則要求。

二、Android Material Design的優勢

1. 更好的用戶交互性和體驗：Android Material Design為用戶提供更簡單的、更自然的交互方式，其可預測性和一致性可以在各個設備上獲得相同的用戶體驗。

2. 更加清晰的層次結構和導航設計：應用利用顏色和圖標等方式增強了層次感和導航設計，用戶可以更加快速、準確地找到自己需要的東西。

3. 提高了設計效率和開發效率：在Material Design中，設計和開發人員可以利用已經定義好的UI元素和組件，以快速實現應用程序的UI設計和開發。

三、如何實現Android Material Design

Android Material Design可以通過以下幾種方式來實現：

1、使用Support Design Library

Android Support Design Library為開發者提供了豐富的Material Design風格組件和樣式，包括DrawerLayout、FloatingActionButton、Snackbar等，可以快速實現Material Design效果。

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

2、自定義View

在Android Material Design中，自定義View的方式仍然有效。我們可以從標準樣式和規範中獲得靈感，並使用自定義View實現特定的設計需求。

public class MyCustomView extends View {
    ...
}

3、使用Material Design主題

Android Material Design主題是一種專門設計用於Android應用程序的主題，可以幫助開發者在應用程序中快速實現Material Design效果。

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
</style>

四、實現一個Material Design風格的Android應用程序

現在我們將從頭開始創建一個Material Design風格的Android應用程序，該應用程序將包括以下功能：

1. 應用程序面板：應用程序面板包括了應用程序的抽屜式導航欄（側邊欄）。

2. 應用程序欄：應用程序欄包括了應用程序的導航欄和頂部的應用程序標題。

3. 內容列表：內容列表包括了應用程序的主要內容。

1、創建新項目

在Android Studio中選擇“File”->“New”->“New Project”創建一個新項目。在彈出的窗口中選擇“Empty Activity”，然後單擊“Next”按鈕。在“Activity Name”中輸入“MainActivity”，並單擊“Finish”按鈕創建新項目。

2、引入Design Library

在app/build.gradle文件中的依賴項中添加Design Library：

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

3、創建應用程序面板

在activity_main.xml文件中添加以下代碼：

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu" />

在res/menu文件夾下創建nav_menu.xml文件，並添加以下內容：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkedItem="@+id/nav_camera">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_camera"
            android:title="Camera" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_slideshow"
            android:title="Slideshow" />
    </group>
    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_send"
                android:title="Send" />
        </menu>
    </item>
</menu>

4、創建應用程序欄

在activity_main.xml文件中添加以下代碼：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    app:title="My App" />

在MainActivity.java文件中添加以下代碼：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

5、創建內容列表

在activity_main.xml文件中添加以下代碼：

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize"
    android:clipToPadding="false" />

在MainActivity.java文件中添加以下代碼：

ListView listView = findViewById(R.id.listView);
String[] items = new String[]{"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, items);
listView.setAdapter(adapter);

完整代碼示例：

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">
    
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/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:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                
                <ImageView
                    android:id="@+id/logo"
                    android:layout_width="150dp"
                    android:layout_height="30dp"
                    android:src="@drawable/ic_launcher" />

            </android.support.v7.widget.Toolbar>

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

        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="?attr/actionBarSize"
            android:clipToPadding="false"/>

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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

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

MainActivity.java文件：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    private Toolbar toolbar;

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

        drawerLayout = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.nav_view);
        toolbar = findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        ListView listView = findViewById(R.id.listView);
        String[] items = new String[]{"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, items);
        listView.setAdapter(adapter);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();

                if (id == R.id.nav_camera) {
                    // Handle the camera action
                } else if (id == R.id.nav_gallery) {
                    // Handle the gallery action
                } else if (id == R.id.nav_slideshow) {
                    // Handle the slideshow action
                } else if (id == R.id.nav_send) {
                    // Handle the send action
                } else if (id == R.id.nav_share) {
                    // Handle the share action
                }

                drawerLayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }

    @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
}

nav_menu.xml文件：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkedItem="@+id/nav_camera">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_camera"
            android:title="Camera" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_slideshow"
            android:title="Slideshow" />
    </group>
    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_send"
                android:title="Send" />
        </menu>
    </item>
</menu>

nav_header.xml文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="150dp"

android:background="@drawable/background_material"

android:paddingLeft="16dp"

android:paddingTop="16dp"

android:paddingRight="16dp">
 <ImageView
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:id="@+id/imageView"
 android:layout_marginTop="25dp"
 android:scaleType="centerCrop"
 android:layout_alignParentStart="true"
 android:layout_alignParentLeft="true"
 android:src="@drawable/ic_launcher"/>
 <TextView
 android:id="@+id/textViewUsername"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Administrator"
 android:textColor="@android:color/white"
 android
原創文章，作者：CHXL，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/147443.html

提升應用美觀度的秘訣——Android Material Design

一、什麼是Android Material Design

二、Android Material Design的優勢

三、如何實現Android Material Design

1、使用Support Design Library

2、自定義View

3、使用Material Design主題

四、實現一個Material Design風格的Android應用程序

1、創建新項目

2、引入Design Library

3、創建應用程序面板

4、創建應用程序欄

5、創建內容列表

完整代碼示例：

相關推薦

發表回復