ANDROID L——Material Design综合应用(Demo)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持!
Material Design:
Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化。
我将Material Design分为例如以下四部分:
主题和布局——ANDROID
L——Material Design具体解释(主题和布局)
视图和阴影——ANDROID
L——Material Design具体解释(视图和阴影)
UI控件——ANDROID
L——Material Design具体解释(UI控件)
动画——ANDROID
L——Material Design具体解释(动画篇)
而以下这个样例就是之前上面所介所绍的一个综合应用,废话不多说直接看图:
Demo简单介绍:
左边的图:
1.RecyclerView,CardView
首先使用了Material Desgin新增的两个控件RecyclerView,CardView。
知识点參考:ANDROID L——RecyclerView,CardView导入和使用(Demo)
2. Floating Action Button & 视图阴影轮廓
这里和上篇文章不同的是我加了一个Floating Action Button(悬浮动作button)去控制CardView在RecyclerView中的加入和删除。
而且在蓝色的悬浮button上设置了阴影了轮廓(黑色背景不是非常清楚)
知识点參考:ANDROID
L——Material Design具体解释(视图和阴影)
3. Reveal Effect
在点击蓝色button时会有一个缩小的动画是使用了Reveal effect动画
知识点參考:ANDROID
L——Material Design具体解释(动画篇)
右面的图:
1. Activity transitions
在点击单个条目时会跳转到一个新的Acitivty,跳转时运行Activity transitions动画,大家会看到第二个Activity中的视图会有一个向中央扩展的效果(Explode)
2. Shared Elements Transition
在从第一个Activity跳转到第二个Activity时,会有一个共享元素的动画效果使图片和悬浮button在两个Activity跳转时移动(控件间距离有些近效果不是特别明显)
3. Reveal effect和动画监听
通过Reveal effect和动画监听实现类似“眨眼睛”的切换视图效果
1、2、3知识点參考:ANDROID
L——Material Design具体解释(动画篇)
代码介绍:
主Activity——MyActivity:
public class MyActivity extends Activity { private RecyclerView mRecyclerView; private MyAdapter myAdapter; ImageButton button; Context context; public static List<Actor> actors = new ArrayList<Actor>(); private static String[] names = {"朱茵", "张柏芝", "张敏", "莫文蔚", "黄圣依", "赵薇", "如花"}; private static String[] pics = {"p1", "p2", "p3", "p4", "p5", "p6", "p7"}; private static String[] works = {"大话西游", "喜剧之王", "p3", "p4", "p5", "p6", "p7"}; private static String[] role = {"紫霞仙子", "柳飘飘", "p3", "p4", "p5", "p6", "p7"}; private static String[][] picGroups = {{"p1","p1_1", "p1_2", "p1_3"},{"p2","p2_1", "p2_2", "p2_3"},{"p3"},{"p4"},{"p5"},{"p6"},{"p7"}}; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set Explode enter transition animation for current activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode().setDuration(1000));
setContentView(R.layout.main_layout); // init data
this.context = this;
actors.add(new Actor(names[0], pics[0], works[0], role[0], picGroups[0]));
getActionBar().setTitle("那些年我们追的星女郎"); // init RecyclerView
mRecyclerView = (RecyclerView) findViewById(R.id.list);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
// set adapter
myAdapter = new MyAdapter(this, actors);
mRecyclerView.setAdapter(myAdapter); // set outline and listener for floating action button
button = (ImageButton) this.findViewById(R.id.add_button);
button.setOutlineProvider(new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
int shapeSize = (int) getResources().getDimension(R.dimen.shape_size);
outline.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);
}
});
button.setClipToOutline(true);
button.setOnClickListener(new MyOnClickListener()); } public class MyOnClickListener implements View.OnClickListener {
boolean isAdd = true; @Override
public void onClick(View v) {
// start animation
Animator animator = createAnimation(v);
animator.start(); // add item
if (myAdapter.getItemCount() != names.length && isAdd) { actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()], works[myAdapter.getItemCount()], role[myAdapter.getItemCount()], picGroups[myAdapter.getItemCount()]));
mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
myAdapter.notifyDataSetChanged();
}
// delete item
else {
actors.remove(myAdapter.getItemCount() - 1);
mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
myAdapter.notifyDataSetChanged();
} if (myAdapter.getItemCount() == 0) {
button.setImageDrawable(getDrawable(android.R.drawable.ic_input_add));
isAdd = true;
}
if (myAdapter.getItemCount() == names.length) {
button.setImageDrawable(getDrawable(android.R.drawable.ic_delete));
isAdd = false;
}
}
} /**
* start detail activity
*/
public void startActivity(final View v, final int position) { View pic = v.findViewById(R.id.pic);
View add_btn = this.findViewById(R.id.add_button); // set share element transition animation for current activity
Transition ts = new ChangeTransform();
ts.setDuration(3000);
getWindow().setExitTransition(ts);
Bundle bundle = ActivityOptions.makeSceneTransitionAnimation((Activity) context,
Pair.create(pic, position + "pic"),
Pair.create(add_btn, "ShareBtn")).toBundle(); // start activity with share element transition
Intent intent = new Intent(context, DetailActivity.class);
intent.putExtra("pos", position);
startActivity(intent, bundle); } /**
* create CircularReveal animation
*/
public Animator createAnimation(View v) {
// create a CircularReveal animation
Animator animator = ViewAnimationUtils.createCircularReveal(
v,
v.getWidth() / 2,
v.getHeight() / 2,
0,
v.getWidth());
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(500);
return animator;
} }
第二个Activity——DetailActivity:
public class DetailActivity extends Activity { ImageView pic; int position; int picIndex = 0; Actor actor; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set Explode enter transition animation for current activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode().setDuration(1000));
getWindow().setExitTransition(null); setContentView(R.layout.detail_layout); position = getIntent().getIntExtra("pos", 0);
actor = MyActivity.actors.get(position);
pic = (ImageView) findViewById(R.id.detail_pic); TextView name = (TextView) findViewById(R.id.detail_name);
TextView works = (TextView) findViewById(R.id.detail_works);
TextView role = (TextView) findViewById(R.id.detail_role);
ImageButton btn = (ImageButton) findViewById(R.id.detail_btn); // set detail info
pic.setTransitionName(position + "pic");
pic.setImageDrawable(getDrawable(actor.getImageResourceId(this)));
name.setText("姓名:" + actor.name);
works.setText("代表作:" + actor.works);
role.setText("饰演:" + actor.role);
// set action bar title
getActionBar().setTitle(MyActivity.actors.get(position).name); // floating action button
btn.setImageDrawable(getDrawable(android.R.drawable.ic_menu_gallery));
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// set first animation
Animator animator = createAnimation(pic, true);
animator.start();
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) { } @Override
public void onAnimationEnd(Animator animation) {
picIndex++;
if (actor.getPics() != null) {
if (picIndex >= actor.getPics().length) {
picIndex = 0;
}
// set second animation
doSecondAnim();
}
} @Override
public void onAnimationCancel(Animator animation) { } @Override
public void onAnimationRepeat(Animator animation) { }
});
}
});
} /**
* exec second animation for pic view
*/
private void doSecondAnim() {
pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.getPics()[picIndex])));
Animator animator = createAnimation(pic, false);
animator.start();
} /**
* create CircularReveal animation with first and second sequence
*/
public Animator createAnimation(View v, Boolean isFirst) { Animator animator; if (isFirst) {
animator = ViewAnimationUtils.createCircularReveal(
v,
v.getWidth() / 2,
v.getHeight() / 2,
v.getWidth(),
0);
} else {
animator = ViewAnimationUtils.createCircularReveal(
v,
v.getWidth() / 2,
v.getHeight() / 2,
0,
v.getWidth());
} animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(500);
return animator;
} @Override
public void onBackPressed() {
super.onBackPressed();
pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.picName)));
finishAfterTransition();
} }
RecyclerView的Adapter:
public class MyAdapter
extends RecyclerView.Adapter<MyAdapter.ViewHolder>
{ private List<Actor> actors; private Context mContext; public MyAdapter( Context context , List<Actor> actors)
{
this.mContext = context;
this.actors = actors;
} @Override
public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
{
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
return new ViewHolder(v);
} @Override
public void onBindViewHolder( ViewHolder viewHolder, int i )
{
Actor p = actors.get(i);
viewHolder.mContext = mContext;
viewHolder.mTextView.setText(p.name);
viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
} @Override
public int getItemCount()
{
return actors == null ? 0 : actors.size();
} public static class ViewHolder
extends RecyclerView.ViewHolder
{
public TextView mTextView; public ImageView mImageView; public Context mContext; public ViewHolder( View v )
{
super(v);
mTextView = (TextView) v.findViewById(R.id.name);
mImageView = (ImageView) v.findViewById(R.id.pic); v.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
((MyActivity)mContext).startActivity(v, getPosition());
}
});
}
}
}
剩余的Layout文件和一些烂七八糟的东西大家能够通过下方的Github连接找到。
Github下载地址:https://github.com/a396901990/AndroidDemo (AndroidL_MaterialDesgin_Demo)
写在最后:
代码写的比較搓,仅仅为了高速完毕功能,非常多不规范的大家忽略好了。
而且代码中仅仅有一些简单的注解,并没有具体解说,由于我认为也没什么可讲的,当中内容都是我之前文章中样例的应用。
大家能够对比上面的Demo简单介绍中的知识点去对应的文章中寻找相关的具体信息。
ANDROID L——Material Design综合应用(Demo)的更多相关文章
- [转]ANDROID L——Material Design详解(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
- ANDROID L——Material Design具体解释(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- ANDROID L——Material Design详解(UI控件)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- ANDROID L——Material Design详细解释(UI控制)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- ANDROID L——Material Design具体解释(主题和布局)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- Android实现Material Design风格的设置页面(滑动开关控件)
前言 本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处 參考了这篇文章 Material Design 风格的设 ...
- Android UI Material Design
Material Design 中文版: http://wiki.jikexueyuan.com/project/material-design/ Material Design开发文章系列1:App ...
- Material Design综合实例
背景知识 drawlayout的使用 recycleView的使用 CardView的使用 一些开源动画库的使用 ImageView的scaleType属性与adjustViewBounds属性 ,参 ...
- ANDROID L——RecyclerView,CardView进口和使用(Demo)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 这篇文章是ANDROID L--Material Design具体解释(UI控 ...
随机推荐
- 获取浏览器版本Asp.Net
public static string GetBrowser() { HttpBrowserCapabilities bc = HttpContext.Current.Request.Browser ...
- 嵌入式环境:CentOS下添加用户并且让用户获得root权限
CentOS下添加用户并且让用户获得root权限 http://www.centoscn.com/CentOS/config/2014/0810/3471.html 1.添加用户,首先用adduser ...
- javascript笔记整理(概述,变量,数据类型)
A.概述 1.输出工具: document.write()---可以是html alert()---字符串 prompt(text,defaultText) text---可选.要在对话框中显示的纯文 ...
- Java读写Word文件常用技术
Java操作操作Word文件,最近花了几天时间解决使用Word模板导出数据的问题,收集到一些资料分享下. 常见的技术如下: 1.POI(兼容doc.docx文件) 官方网站:http://poi. ...
- Ubuntu下SVN命令行递归加入文件夹文件(免去一个一个的加入 --force)
因为在Linux下一直没有找到好的svn工具(类似于TortiseSVN的).当然eSVN这些也不错,但就是使用上认为还不是很习惯.终于还是选择了svn原始的命令行工具来进行版本号控制操作. 命令行的 ...
- EasyUI - Datatable转Json and Json转Datatable
using System; using System.Data; using System.Linq; using System.Collections; using System.Collectio ...
- 1.1.0-学习Opencv与MFC混合编程之---全屏截图,保存为BMP图像(并增加快捷键)
源代码:http://download.csdn.net/detail/nuptboyzhb/3961677 Ø 添加全屏截图菜单项,菜单项的属性如下; Ø 为该菜单项建立类向导. 编辑消息处理函 ...
- 上一篇括号配对让人联想起catalan数,顺便转载一篇归纳的还不错的文章
转载请注明来自souldak,微博:@evagle 怎么样才是合法的组合? 只要每一时刻保证左括号的数目>=右括号的数目即可. 直接递归就行,每次递归加一个括号,左括号只要还有就能加,右括号要保 ...
- cocos2d-x 精灵移动
在HelloWorldScene.h中声明 class HelloWorld : public cocos2d::CCLayer { public : ...... CCPoin ...
- 【小白的java成长系列】——javakeyword
准备出一个系列的内容啦,今天就从keyword開始说起吧~ 类型 keyword 说明 keyword 说明 訪问控制权限 public 公共的.公开的. protected 受保护的.用来修饰属性或 ...