Material Design 控件 (一)

时间  2020-08-10 标签 material design 控件

Toolbar

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是Design Support 库中提供的一个控件。他严格按照了Material Design 的要求来进行设计。

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

  2. 右击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>

  3. 编写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>

  4. 把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();
        }
    });

联系我们 沪ICP备13005482号-10