UI统一--Material Design

转载请注明出处：http://blog.csdn.net/mr_leixiansheng/article/details/77773793

多的不说，先上效果图

      

主要功能简介：

一、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;        }    }}

参考于：第一行代码