Material Design 控件 (一)

時間 2020-08-10

標籤 material design 控件简体版

原文原文鏈接

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

使用Toolbar來代替ActionBar，Toolbar不只繼承了ActionBar的全部功能，並且靈活性更高，能夠配合其餘控件來完成Material Design的效果。android

首先在建立工程的時候，咱們的主題一般是 android:theme="@style/AppTheme"這個，而這個的主題是帶ActionBar的，app

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

因此在使用Toolbar代替時，應該將主題設成： android:theme="@style/AppTheme.NoActionBar"，只要是NoActionBar的主題就能夠。ide

若是這裏沒有設置，在用Toolbar代替時會報如下的錯：佈局

java.lang.RuntimeException: Unable to start activity ComponentInfo	{com.android50materialdesign/com.android50materialdesign.ToorBarActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false 	in your theme to use a Toolbar instead.

新建一個Activity，那麼佈局中就能夠直接使用Toolbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_toor_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
	android:background="@color/colorPrimaryDark"
    android:layout_height="?attr/actionBarSize" />


</LinearLayout>

在這裏咱們能夠引入xmlns:app="http://schemas.android.com/apk/res-auto"
，這這個xmlns:app命名空間上咱們可使用一些新屬性。爲何不直接使用xmlns:android這個命名空間呢？由於Material Design是在Android 5.0 中才出現的，使用爲了兼容老版本，咱們更應該使用app命名空間下的屬性。this

在Activity中使用Toolbar。

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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
	//把Toolbar設置成ActionBar
    setSupportActionBar(toolbar);
}

運行就以下圖所示：設計

如普通的ActionBar是同樣的。code

若是要更改上面的title。能夠在AndroidManifest.xml文件在修改.xml

<activity android:name=".ToorBarActivity"
   		android:theme="@style/AppTheme.NoActionBar"
    	android:label="Change">

那麼標題就改爲了Change。繼承

一樣咱們能夠在Toolbar上添加按鈕。

右擊res目錄 New->Directory,建立memu文件夾。而後點擊menu文件夾 New->Menu resource file 建立toolbar.xml文件，並編寫代碼.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/first"
    android:icon="@drawable/button_emoji_press"
    android:title="first"
    app:showAsAction="always" />
<item
    android:id="@+id/second"
    android:icon="@drawable/ic_comment_love_yellow"
    android:title="second"
    app:showAsAction="ifRoom" />
<item
    android:id="@+id/third"
    android:icon="@drawable/button_mic_press"
    android:title="third"
    app:showAsAction="never" />
</menu>

在代碼中有這個 app:showAsAction="" . 這個用於指定按鈕顯示的位置的。使用app命名也是爲了兼容舊版本。

showAsAction有如下屬性(一般使用的爲如下三個)

always ：表示永遠顯示在Toolbar上，若是屏幕空間不夠則不顯示。
ifRoom ：表示屏幕空間足夠的狀況下顯示在Toolbar上，若是不夠就顯示在菜單上
never ：永遠顯示在菜單上

設置了菜單後就要讓Toolbar應用上。

在Activity上編寫

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar,menu);
    return  true;
}

同時咱們也能夠爲這些按鈕加上點擊事件：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.first:
            Toast.makeText(ToorBarActivity.this,"first",Toast.LENGTH_SHORT).show();
            break;
        case R.id.second:
            Toast.makeText(ToorBarActivity.this,"second",Toast.LENGTH_SHORT).show();
            break;
        case R.id.third:
            Toast.makeText(ToorBarActivity.this,"third",Toast.LENGTH_SHORT).show();
            break;
    }
    return true ;
}

效果以下（上面已經修改了標題爲Change）

DrawerLayout

咱們常見的菜單。

DrawerLayout是一個佈局，在佈局中容許放入兩個直接子控件，第一個控件是主屏幕中顯示的內容，第二個是滑動菜單中顯示的內容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_dawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="主\n頁\n面"
        android:textSize="150sp" />

    <Button
        android:id="@+id/btn_open"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="21dp"
        android:text="打開菜單" />
</RelativeLayout>

<TextView
	android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:background="#00FF00"
    android:gravity="center"
    android:text="菜\n單"
    android:textSize="150sp" />

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

注意的是：第二個子控件 android:layout_gravity="" 這個屬性必須指定。
這個實現是告訴DraweLayout滑動菜單是在屏幕的左邊仍是右邊。

left ：屏幕的左邊
right ：屏幕的右邊
start ：根據系統的語言來選擇，若是系統的語言是從左往右的，就在左邊滑出。反之...

能夠用代碼控制菜單的打開與關閉

private DrawerLayout dl;

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

    dl = (DrawerLayout) findViewById(R.id.activity_dawer_layout);
    Button btnOpen = (Button) findViewById(R.id.btn_open);
    TextView tv = (TextView) findViewById(R.id.tv);

    btnOpen.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
			//打開菜單
            dl.openDrawer(GravityCompat.START);
        }
    });

    tv.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
				//關閉菜單
              dl.closeDrawers();
          }
      }
    );
}

NavigationView

NavigationView是Design Support 庫中提供的一個控件。他嚴格按照了Material Design 的要求來進行設計。

要使用它首先要添加依賴：
compile 'com.android.support:design:23.4.0'

右擊res目錄 New->Directory,建立memu文件夾。而後點擊menu文件夾 New->Menu resource file 建立menu.xml文件，並編寫代碼.

<?xml version="1.0" encoding="utf-8"?>
 	<menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
 	    <item
 	        android:id="@+id/first"
 	        android:icon="@drawable/ic_comment_love_yellow"
 	        android:title="first" />
 	    <item
 	        android:id="@+id/second"
 	        android:icon="@drawable/ic_comment_love_yellow"
 	        android:title="second" />
 	    <item
 	        android:id="@+id/third"
 	        android:icon="@drawable/ic_comment_love_yellow"
 	        android:title="third" />
 	</menu>

編寫headlayout：

<?xml version="1.0" encoding="utf-8"?>
 	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center"
     android:orientation="vertical">
 
     <ImageView
         android:layout_width="50dp"
         android:layout_height="50dp"
         android:src="@color/colorAccent" />
 
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="菜單"
         android:textSize="25sp" />
 
 	</LinearLayout>

把NavigationView設置成菜單

<android.support.design.widget.NavigationView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="left"
         android:background="#00FF00"
         app:menu="@menu/menu"
         app:headerLayout="@layout/headlayout"
         />

一樣放置在drawerlayout中。 app:menu="@menu/menu"、app:headerLayout="@layout/headlayout"引入了剛剛的所寫的菜單和佈局。

能夠用如下代碼對NavigationView中的item進行操做：

NavigationView  nv = (NavigationView) findViewById(R.id.nv);
    nv.setNavigationItemSelectedListener(new
     NavigationView.OnNavigationItemSelectedListener() {
         @Override
         public boolean onNavigationItemSelected(MenuItem item) {
             switch (item.getItemId()){
                 case R.id.first:
                     //處理點擊事件
					..........
                     break;
				...........
             }
             return true;
         }
     });

效果以下：

FloatingActionButton

這個控件能夠是咱們輕鬆的實現懸浮按鈕的效果。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_comment_love_yellow"
	app:elevation="4dp"
    android:layout_centerInParent="true"/>

app:elevation="4dp"：高度值，高度值越大，投影範圍越大，可是投影效果越淡；高度值越小，投影範圍越小，可是投影效果越濃。

添加點擊事件（與普通的按鈕是同樣的）：

FloatingActionButton  btn  = (FloatingActionButton) findViewById(R.id.btn);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(FloatingActionButtonActivity.this,"點擊",Toast.LENGTH_SHORT).show();
        }
    });

相關標籤/搜索

retrotfit2.1+material

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。