Days40 MaterialDesign（一）

最新推荐文章于 2022-03-03 19:53:33 发布

转载最新推荐文章于 2022-03-03 19:53:33 发布 · 458 阅读

Android小菜专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了MaterialDesign中的Snackbar、FloatingActionButton、TextInputLayout、DrawerLayout及NavigationView等组件的使用方法及注意事项。

Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度。
使用时要导入design支持包。
备注：如果需要使用控件的自定义属性，需要添加（如果有很多控件需要添加自定义属性，可以在父布局中添加）：
xmlns:app=”http://schemas.android.com/apk/res-auto”
（一）Snackbar：
简介：
一个类似Toast的控件，可以添加点击事件，并且可以支持手势滑动消除。
SnackBar最好是CoordinatorLayout一起使用，否则滑动删除的功能将失效
要想支持Swipe手势的话,这个view需要是一个CoordinatorLayout

注意：
make()方法的第一个参数的view,不能是有一个ScrollView.因为SnackBar的实现逻辑是往这个View去addView.而ScrollView我们知道,是只能有一个Child的.否则会Exception

//        i am snack info 为snackbar显示的信息
//        submit相当于一个可点击的TextView上的提示信息
//        setAction的第二个参数为点击事件
        Snackbar.make(view,"i am snack info",Snackbar.LENGTH_LONG).setAction("submit", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d("test","we are info");
            }
        }).show();
    }

（二）FloatingActionButton
可以增加onClick属性，当点击后可实现回到顶部或提示导航等功能。

<!--
    app:elevation，控件悬浮的高度
    app:layout_anchorGravity,控件显示的位置
    app:layout_anchor：悬浮参考位置
    app:fabSize：设置控件的大小
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="5dp"
        app:fabSize="mini"
        app:layout_anchorGravity="bottom|right"
        app:layout_anchor="@id/app_bar"
        android:src="@android:drawable/ic_input_add" />

（三）TextInputLayout
extends LinearLayout
一个文本输入框的容器，输入的时候提示信息hint不会消失，而是会收起到上方
这里写图片描述
布局文件：

 <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:hint="行百里者半九十"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>

备注：
返回当前获得焦点的View和关闭软键盘的方法

 //getCurrentFocus()是获取当前activity中获得焦点的view
        View v = getCurrentFocus();
        if(v != null){
            //隐藏软键盘
            ((InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(v.getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);
        }

（四）DrawerLayout 抽屉对比SlidingMenu
extends ViewGroup
这里写图片描述
布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sign.days39md01.draw.DrawLayoutActivity">

    <!--最外层节点为DrawerLayout，要把margin属性删掉，不然边距的空白部分会覆盖住内容-->
    <!--通过设置内层节点的android:layout_gravity="left"或"right",设置左边/右边抽屉-->
    <!--抽屉的width属性即使为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:textColor="#0fc"
            android:textSize="26sp"
            android:onClick="content"
            android:text="this is content"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#07e7e7"
        android:layout_gravity="left">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textColor="#df1a1a"
            android:onClick="left"
            android:textSize="26sp"
            android:text="this is left menu"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#fac21a">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="this is right menu"
            android:textSize="26sp"
            android:onClick="right"
            android:textColor="#bc07c2"/>
    </RelativeLayout>

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

代码：

public class DrawLayoutActivity extends AppCompatActivity {

    private DrawerLayout drawLayout = null;

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

        initView();
    }

    private void initView() {
        drawLayout = (DrawerLayout) findViewById(R.id.activity_draw_layout);
    }

    public void right(View view) {
//      关闭抽屉;左边抽屉（Gravity.LEFT）,右边抽屉（Gravity.RIGHT）
        drawLayout.closeDrawer(Gravity.RIGHT);
    }

    public void left(View view) {
        drawLayout.closeDrawer(Gravity.LEFT);
    }

    public void content(View view) {
//        打开抽屉
        drawLayout.openDrawer(Gravity.LEFT);
    }
}

（五）NavigationView 导航栏
功能：打开左边抽屉，里面包含导航栏，点击导航栏的菜单条目后，根据所点击条目进行相应操作
这里写图片描述
布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_navdraw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sign.days39md01.navdraw.NavigationDrawerLayoutActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="this is content"/>
    </RelativeLayout>

    <!--打开抽屉为一个NavigationView   导航栏-->
    <!--注意两个属性：app:headerLayout="@layout/my_header"代表导航栏的头部-->
    <!--app:menu="@menu/my_menu"代表导航栏的菜单条目部分-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvShow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:headerLayout="@layout/my_header"
        app:menu="@menu/my_menu"
        android:layout_gravity="left"/>
</android.support.v4.widget.DrawerLayout>

menu：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/itSetting"
        android:title="setting"/>
    <item android:id="@+id/itAbout"
        android:title="about us"/>
    <item android:id="@+id/itClear"
        android:title="clear cache"/>
</menu>

代码：

public class NavigationDrawerLayoutActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout = null;
    private NavigationView nvShow = null;

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

        initView();

//        获得头部视图************************重要
        View v = nvShow.getHeaderView(0);
        TextView txt = (TextView) v.findViewById(R.id.txtHeader);
        txt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(NavigationDrawerLayoutActivity.this,"行百里者半九十",Toast.LENGTH_LONG).show();
            }
        });


//        设置NavigationView的菜单条目点击监听
        nvShow.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.itAbout:
                        Toast.makeText(NavigationDrawerLayoutActivity.this,"i am about us",Toast.LENGTH_LONG).show();
                        break;
                    case R.id.itClear:
                        Toast.makeText(NavigationDrawerLayoutActivity.this,"i am clear cache",Toast.LENGTH_LONG).show();
                        break;
                    case R.id.itSetting:
                        Toast.makeText(NavigationDrawerLayoutActivity.this,"i am setting",Toast.LENGTH_LONG).show();
                        break;
                }

//                点击菜单条目后关闭抽屉
                drawerLayout.closeDrawer(Gravity.LEFT);
                return false;
            }
        });
    }
    private void initView() {
        drawerLayout = (DrawerLayout) findViewById(R.id.activity_navdraw_layout);
        nvShow = (NavigationView) findViewById(R.id.nvShow);
    }
}