MaterialDesign的学习

来源：互联网发布：淘宝店铺规划方案编辑：程序博客网时间：2024/06/06 02:30

最近学习了一下MaterialDesign，打算梳理一遍知识点。MaterialDesign主要是解决androidUI的美观的问题。
下面我先大致说一下其中常用的控件和布局，然后最后把我的项目传上去。
1：首先来说一下ToolBar。
先看一下toolBar在布局中

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

注意：(1)在其父布局中要加上： xmlns:app = "http://schemas.android.com/apk/res-auto"    (2)这里用app:attribute是为了兼容5.0之前的系统，app:popupTheme是将弹出的菜单设置成淡色的主题在Java代码中使用toolBarToolBar继承Action的所有功能，并且灵活性比较高。      Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);      setSupportActionBar(toolbar); 2：Drawerlayout滑动菜单    <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/draw_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    ......   </android.support.v4.widget.DrawerLayout>   DrawerLayout，首先他是一个布局，在布局中允许放入两个直接子控件，第一个控件是主屏幕中的显示内容，第二个空间是滑动菜单中显示的内容。   注意：  (1) 在第二个控件滑动菜单中，layout_gravity属性必须指定，left表示滑动菜单在左边，right表示滑动菜单在右边；如果指定是start，表示系统语言如果是从左往右的。如：英语，汉语等，则滑动菜单就在左边;如果系统语言是从右往左的，如：阿拉伯语，则滑动菜单就在右边。  (2)如果在导航栏上的最左侧加一个按钮，点击按钮来弹出滑动菜单的话，则HomeAsUp也就是该按钮的id永远是android.R.id.home;

//onCreate()函数中    drawerLayout =(DrawerLayout) findViewById(R.id.draw_layout);     ActionBar actionBar = getSupportActionBar();        if (actionBar != null){            actionBar.setDisplayHomeAsUpEnabled(true);            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);        } @Override public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case android.R.id.home:                drawerLayout.openDrawer(GravityCompat.START);                break;                ....                }          return  true;       }

3：NavigationView 美化滑动菜单    在dependencies中添加依赖    compile 'com.android.support:design:23.2.1' //designSupport支持库    compile 'de.hdodenhof:circleimageview:2.1.0'//实现图片圆形话功能(1)首先创建一个menu布局用于滑动菜单的下部分

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_call"            android:icon="@drawable/ic_call"            android:title="Call"/>        <item            android:id="@+id/nav_friends"            android:icon="@drawable/ic_friends"            android:title="Friends"/>        <item            android:id="@+id/nav_mail"            android:icon="@mipmap/ic_email"            android:title="Email"/>        <item            android:id="@+id/nav_task"            android:icon="@drawable/ic_task"            android:title="Task"/>    </group></menu>

在准备一个headerLayout用于滑动菜单的上部分

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="180dp"    android:padding="10dp"    android:background="?attr/colorPrimary">    <de.hdodenhof.circleimageview.CircleImageView        android:layout_width="70dp"        android:layout_height="70dp"        android:id="@+id/icon_header"        android:src="@drawable/nav_header"        android:layout_centerInParent="true"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:id="@+id/username"        android:text="zhengpengfei@email.com"        android:textColor="#fff"        android:textSize="14sp"/>    <TextView        android:id="@+id/email"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/username"        android:text="zhengpengfei"        android:textColor="#fff"        android:textSize="14sp"/></RelativeLayout>

然后用navigationView将他们组合到滑动菜单中

<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/draw_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    ......    <android.support.design.widget.NavigationView     android:id="@+id/nav_view"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_gravity="start"     app:menu="@menu/nav_menu"     app:headerLayout="@layout/nav_header"     />     </android.support.v4.widget.DrawerLayout>

在Java代码中绑定id设置监听事件

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);  navigationView.setCheckedItem(R.id.nav_call);        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){            @Override            public boolean onNavigationItemSelected(MenuItem item) {                drawerLayout.closeDrawers();                return true;            }        });

(4)悬浮按钮floatingActionButton

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

注意：其实这个floatingActionButton还有一哥属性： app：elevation用来指定高度的，高度越大，投影范围越大，但是投影效果越不明显。在这里在说一下 Snackbar类似与Toast但是比Toast可以提升用户体验。在Java代码中如下

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

(5)CoordinatorLayout
CoordinatorLayout是FrameLayout的加强版，他可以监听到所有子控件的各种事件，比如说：在上面的floatingActionBUtton，弹出的SnackBar会遮挡住将其挡住，但是加上coordinateLayout布局后，就不会出现这种情况了。

<android.support.design.widget.CoordinatorLayout    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout   android:layout_width="match_parent"    android:layout_height="wrap_content">  <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.v4.widget.SwipeRefreshLayout        android:id="@+id/swipe_refresh"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">    <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"/>    </android.support.v4.widget.SwipeRefreshLayout>    <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>

(6)cardView卡片式布局直接上代码吧

<android.support.v7.widget.CardView    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="wrap_content"    android:layout_margin="5dp"    app:cardCornerRadius="4dp"//指定卡片圆角    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">        <ImageView            android:layout_width="match_parent"            android:layout_height="100dp"            android:id="@+id/fruit_iamge"            android:scaleType="centerCrop"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:textSize="16sp"            android:layout_margin="5dp"            android:id="@+id/fruit_name"            />    </LinearLayout></android.support.v7.widget.CardView>

下面是我的源码可以下载看一下http://u.download.csdn.net/upload/success

0 0