UI统一--Material Design

转载请注明出处：UI统一--Material Design_统一ui_Mr_Leixiansheng的博客-CSDN博客

多的不说，先上效果图

      

主要功能简介：

一、ToolBar : 类似于ActionBar但功能更强大

二、DrawerLayout : 侧滑菜单 （需要配合 NavigationView使用）

三、 FloatingActionButton : 悬浮按钮

四、SnackBar: 带按钮的提示（加强版Toast）

五、CircleImageView : 图片圆形化 工具

六、RecyclerView : 列表（相当于ListView）

七、CardView ：立体效果

八、Glide ： 图片加载（会自行对图片进行压缩，防止内存溢出）
九、AppBarLayout :防止RecyclerView把Toolbar遮挡
十、SwipeRefreshLayout ：下拉刷新

代码如下：

添加依赖文件

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.1'
    testCompile 'junit:junit:4.12'

    //robolectric 依赖
    testCompile "org.robolectric:robolectric:3.0"
    //assertj 依赖
    testCompile 'org.assertj:assertj-core:1.7.1'
    //图片圆形化 依赖
    compile 'de.hdodenhof:circleimageview:2.1.0'
    //design 材料设计 依赖
    compile 'com.android.support:design:25.0.1'
    //recyclerview 依赖
    compile 'com.android.support:recyclerview-v7:25.0.1'
    //cardview 立体效果 依赖
    compile 'com.android.support:cardview-v7:25.0.1'
    //glide 图片加载 依赖
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

style.xml中屏蔽自带的ActionBar

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

添加以下layout

<?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">
    <!--图片圆形化CircleImageView-->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/pic2"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="user name"
        android:textColor="#FFF"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="user mail"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/people_pic"
            android:layout_width="match_parent"
            android:layout_height="100dp" />

        <TextView
            android:id="@+id/people_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

添加菜单布局

<?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/backup"
        android:icon="@drawable/pic2"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/pic3"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

     <item
        android:id="@+id/setting"
        android:icon="@drawable/pic4"
        android:title="Setting"
        app:showAsAction="never"/>
</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="@mipmap/ic_launcher"
            android:title="call"/>

        <item
            android:id="@+id/nav_friend"
            android:icon="@mipmap/ic_launcher"
            android:title="friend"/>

        <item
            android:id="@+id/nav_location"
            android:icon="@mipmap/ic_launcher"
            android:title="location"/>

        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/ic_launcher"
            android:title="mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@mipmap/ic_launcher"
            android:title="task"/>
    </group>
</menu>

添加People类及适配器

package com.leixiansheng.materialdesigns;

/**
 * Created by Leixiansheng on 2017/9/2.
 */

public class People {
    private String name;
    private int id;

    public People(int id, String name) {
        this.id = id;
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

package com.leixiansheng.materialdesigns;

import android.content.Context;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

/**
 * Created by Leixiansheng on 2017/9/2.
 */

public class PeopleAdapter extends RecyclerView.Adapter<PeopleAdapter.ViewHolder> {

    private Context context;
    private List<People> peopleList;

    static class ViewHolder extends RecyclerView.ViewHolder {
        CardView cardView;
        ImageView imageView;
        TextView textView;

        public ViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            imageView = (ImageView) itemView.findViewById(R.id.people_pic);
            textView = (TextView) itemView.findViewById(R.id.people_name);
        }
    }

    public PeopleAdapter(Context context, List<People> peopleList) {
        this.context = context;
        this.peopleList = peopleList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (context == null) {
            context = parent.getContext();
        }
        View view = LayoutInflater.from(context).inflate(R.layout.people_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(PeopleAdapter.ViewHolder holder, int position) {
        People people = peopleList.get(position);
        holder.textView.setText(people.getName());
        Glide.with(context).load(people.getId()).into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return peopleList.size();
    }

}

主活动布局及代码

<?xml version="1.0" encoding="utf-8"?>
<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/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <!--CoordinatorLayout:加强版Fragment       使在内的控件不会被遮挡-->
  <android.support.design.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <!--Toolbar:标题栏修改
              1、去掉Manifest主题的ActionBar
              2、xml中添加设置Toolbar
              3、活动中添加Toolbar-->
      <android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

    <!--  下滑自动隐藏，上滑自动显示  app:layout_scrollFlags="scroll|enterAlways|snap"-->
          <android.support.v7.widget.Toolbar
              android:id="@+id/too_bar"
              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.v7.widget.Toolbar>
      </android.support.design.widget.AppBarLayout>

      <!--下拉刷新：SwipeRefreshLayout-->
      <!-- 空出Toolbar位置，防止遮挡  app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
      <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">
          </android.support.v7.widget.RecyclerView>
      </android.support.v4.widget.SwipeRefreshLayout>

      <!--悬浮按钮  阴影：elevation-->
      <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/pic1"
          app:elevation="25dp"/>
  </android.support.design.widget.CoordinatorLayout>

    <!--用于滑动菜单-->
    <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.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

package com.leixiansheng.materialdesigns;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

/**
 * 要点：（都是UI）
 * 1、Toolbar：相当于ActionBar，但功能更强大
 * 2、DrawerLayout：（空白的）侧滑菜单
 * 3、NavigationView： 侧滑菜单布局 ，需要引入库 compile 'com.android.support:design:25.0.1'
 * 4、FloatingActionButton： 悬浮按钮
 * 5、SnackBar： 带按键的提示控件，相当于更强大的Toast
 * 6、CoordinatorLayout:  加强版Fragment，使在内的控件不会被遮挡
 * 7、CircleImageView ：图片圆形化
 * 8、RecyclerView :  列表（相当于ListView）
 * 9、CardView ：立体效果
 * 10、Glide ： 图片加载（会自行对图片进行压缩，防止内存溢出）
 * 11、AppBarLayout :防止RecyclerView把Toolbar遮挡
 * 12、SwipeRefreshLayout ：下拉刷新
 */

public class MainActivity extends AppCompatActivity implements
        NavigationView.OnNavigationItemSelectedListener, View.OnClickListener {

    private DrawerLayout drawerLayout;               //侧滑菜单
    private Toolbar toolbar;                          //标题栏
    private NavigationView navigationView;           //侧滑菜单布局
    private FloatingActionButton fab;                 //悬浮按钮

    private RecyclerView recyclerView;               //列表
    private SwipeRefreshLayout swipeRefresh;          //下拉刷新

    private People[] peoples = {new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2")
            ,new People(R.drawable.pic3,"pic_3"),new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5")
            ,new People(R.drawable.pic6,"pic_6"),new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2"),new People(R.drawable.pic3,"pic_3")
            ,new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5"),new People(R.drawable.pic6,"pic_6")
            ,new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2"),new People(R.drawable.pic3,"pic_3")
            ,new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5"),new People(R.drawable.pic6,"pic_6")};

    private List<People> peopleList = new ArrayList<>();

    private PeopleAdapter peopleAdapter;

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

        initView();
        //添加Toolbar
        setSupportActionBar(toolbar);
        
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //设置打开侧滑菜单按键
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);
        }

        initPeople();
        initRecyclerView();
        initRefresh();

        setOnclickListener();
    }

    /**
     * 下拉刷新初始化
     */
    private void initRefresh() {
        swipeRefresh.setColorSchemeResources(R.color.colorPrimary);             //下拉颜色设置
        //下拉监听
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshPeople();
            }
        });
    }

    /**
     * 下拉刷新
     */
    private void refreshPeople() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);             //模拟耗时操作
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                //切换回主线程刷新数据
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initPeople();
                        peopleAdapter.notifyDataSetChanged();
                        swipeRefresh.setRefreshing(false);
                        toast("refresh succeed");
                    }
                });
            }
        }).start();
    }

    /**
     * RecyclerView初始化
     */
    private void initRecyclerView() {
        GridLayoutManager manager = new GridLayoutManager(this, 2);             //设置一行显示几个元素
        recyclerView.setLayoutManager(manager);
        peopleAdapter = new PeopleAdapter(this, peopleList);                 //配置适配器
        recyclerView.setAdapter(peopleAdapter);
    }

    /**
     * 数据初始化
     */
    private void initPeople() {
        peopleList.clear();
        for (int i = 0; i < peoples.length; i++) {
            Random random = new Random();
            int index = random.nextInt(peoples.length);
            peopleList.add(peoples[index]);
        }
    }

    /**
     * 按键监听
     */
    private void setOnclickListener() {
        navigationView.setNavigationItemSelectedListener(this);
        fab.setOnClickListener(this);
    }

    /**
     * 控件初始化
     */
    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.too_bar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        navigationView = (NavigationView) findViewById(R.id.nav_view);
        fab = (FloatingActionButton) findViewById(R.id.fab);

        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);

        navigationView.setCheckedItem(R.id.nav_call);
    }

    /**
     * 菜单添加
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    /**
     * 菜单点击响应
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.backup:
                toast("backup");
                break;
            case R.id.delete:
                toast("delete");
                break;
            case R.id.setting:
                toast("setting");
                break;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }

    private void toast(String str) {
        Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
    }

    /**
     * 侧滑菜单点击响应
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        drawerLayout.closeDrawers();                //关闭侧滑菜单
        return true;
    }

    /**
     *按键点击响应
     */
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.fab:
//                toast("FAB clicked");
                //新型提示，带按键
                Snackbar.make(view, "删除数据", Snackbar.LENGTH_SHORT)
                        .setAction("确定", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                toast("数据已删除");
                            }
                        }).show();
                break;
        }
    }
}

参考于：第一行代码