Material Design 新组件

原质化设计中文网：http://wiki.jikexueyuan.com/project/material-design/patterns/app-structure.html
android 界面的新3D效果新风格；下面总结一下常用的几个组件。

1、TextInputLayout

特点：保留EditText的提示内容

              <android.support.design.widget.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <EditText
                        android:hint="username"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />
                </android.support.design.widget.TextInputLayout>

2、LinearLayoutCompat

特点：自带分割线的LinearLayout

            <android.support.v7.widget.LinearLayoutCompat
                android:orientation="vertical"
                android:layout_gravity="center_horizontal"
                android:gravity="center_horizontal|center"
                app:divider="@drawable/line"
                app:dividerPadding="10dp"
                app:showDividers="middle|beginning|end"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/tv1"
                    android:clickable="true"
                    android:focusable="true"
                    android:text="Material Design Dialog"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                <TextView
                    android:id="@+id/tv2"
                    android:clickable="true"
                    android:focusable="true"
                    android:text="ListPopupWindow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                <Spinner
                    android:id="@+id/tv4"
                    android:clickable="true"
                    android:focusable="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.LinearLayoutCompat>

3、SwipeRefreshLayout

特点：原生的上拉刷新组件

<android.support.v4.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal|center_vertical"
            android:paddingTop="20dp"
            android:id="@+id/sw">
</android.support.v4.widget.SwipeRefreshLayout>

代码中

        sw.setProgressViewOffset(true,20,40);
        //设置进度条的颜色
        sw.setColorSchemeColors(Color.BLUE,Color.RED,Color.GRAY);
        //设置圆形进度条大小
        sw.setSize(SwipeRefreshLayout.LARGE);
        //设置进度条背景颜色
        sw.setProgressBackgroundColorSchemeColor(Color.MAGENTA);
        //设置下拉多少距离之后开始刷新数据
        sw.setDistanceToTriggerSync(30);
        //设置下拉刷新监听事件
        sw.setOnRefreshListener(null);

4、DrawerLayout+Toolbar+NavigationView 打造侧拉菜单

屏幕快照 2018-01-23 下午4.00.09.png

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:gravity="center_vertical"
            app:layout_collapseMode="pin"
            android:fitsSystemWindows="true">
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="测试"
            />
        </android.support.v7.widget.Toolbar>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!--第一个，显示的布局-->
        <android.support.v4.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal|center_vertical"
            android:paddingTop="20dp"
            android:id="@+id/sw">
        </android.support.v4.widget.SwipeRefreshLayout>

        <!--第二个，抽屉布局-->
       <!--android:layout_gravity="start"为左侧拉出-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigation_header"
            app:menu="@menu/drawer" />
    </android.support.v4.widget.DrawerLayout>

其中的headerLayout和menu分别是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <ImageView
        android:id="@+id/profile_image"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="测试账号"
        android:gravity="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        />
</LinearLayout>

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_book"
            android:title="测试" />
        <item
            android:id="@+id/navigation_item_example"
            android:title="测试" />
        <item
            android:id="@+id/navigation_item_blog"
            android:title="测试" />

    </group>
    <!--通过group可以添加分割线-->
    <group android:id="@+id/g1">
        <item
            android:id="@+id/navigation_item_about"
            android:title="测试" />
    </group>
</menu>

代码中

        mToolbar = findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();
        mDrawerLayout = findViewById(R.id.drawer_layout);
        mDrawerLayout.addDrawerListener(mDrawerToggle);

        navigationView = findViewById(R.id.navigation_view);
        //头部监听
        navigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"I am NavigationView`s header Layout",Toast.LENGTH_SHORT).show();
            }
        });
        //菜单item监听
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Toast.makeText(MainActivity.this,"I am MenuItem"+item.getItemId(),Toast.LENGTH_SHORT).show();

                return true;
            }
        });

5、新风格Dialog

      AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
      builder.setMessage(" ^_^ 让我们一起飞，我带着你，你带着钱，来一场说走就走的旅行")
      .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Toast.makeText(MainActivity.this, "the position is PositiveButton", Toast.LENGTH_SHORT).show();
                            }
                        })
       .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {

                            }
                        })
       .setNeutralButton("好的", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Toast.makeText(MainActivity.this, "the position is NeutralButton", Toast.LENGTH_SHORT).show();

                            }
         }).show();

6、ListPopupWindow 这个其实不算

                String[] items = {"item1","item2","item3","item4","item5"};
                final ListPopupWindow listPopupWindow = new ListPopupWindow(MainActivity.this);
                listPopupWindow.setAdapter(new ArrayAdapter<>(MainActivity.this,android.R.layout.simple_list_item_1,items));
                listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                        Toast.makeText(MainActivity.this, "the position is" + position, Toast.LENGTH_SHORT).show();
                        listPopupWindow.dismiss();
                    }
                });
                //设置ListPopupWindow的锚点,也就是弹出框的位置是相对当前参数View的位置来显示
                listPopupWindow.setAnchorView(tv2);
                //ListPopupWindow 距锚点的距离，也就是相对锚点View的位置
                listPopupWindow.setHorizontalOffset(100);
                listPopupWindow.setVerticalOffset(100);
                //设置对话框的宽高
                listPopupWindow.setWidth(300);
                listPopupWindow.setHeight(600);
                listPopupWindow.setModal(false);
                listPopupWindow.show();