Material Design入门

本文主要包括以下内容

  1. ToolBar的使用
  2. RecyclerView的定义与使用

ToolBar

风格 (style)
界面 (layout)
程序 (java)

首先自定义一个theme,并将AppTheme的parent改成我们自定义的theme

(style.xml)
<resources><style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/primary</item><item name="colorPrimaryDark">@color/primary_dark</item><item name="colorAccent">@color/accent</item><item name="android:windowBackground">@color/window_background</item></style><style name="AppTheme" parent="BaseAppTheme" /></resources>

其中,colorPrimaryDark是状态栏底色
App bar 底色
navigationBarColor 导航栏底色
主视窗底色:windowBackground

在这里定义整个界面的底色

在layout中定义toolbar

<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar>

在java代码中

有以下方法

setNavigationIcon:
即设定 up button 的图标,因为 Material 的介面,在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。

setLogo
APP 的图标。

setTitle
主标题。

setSubtitle
副标题。

setOnMenuItemClickListener
设定菜单各按鈕的动作。

效果如下

这里写图片描述

实现

 protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar=(Toolbar)findViewById(R.id.toolbar);mRecyclerView= (RecyclerView) findViewById(R.id.recyclerView);// App Logotoolbar.setLogo(R.drawable.ic_launcher);
// Titletoolbar.setTitle("My Title2");
// Sub Titletoolbar.setSubtitle("Sub title");setSupportActionBar(toolbar);// Navigation Icon 要設定在 setSupoortActionBar 才有作用
// 否則會出現 back buttontoolbar.setNavigationIcon(R.drawable.ab_android);toolbar.setOnMenuItemClickListener(onMenuItemClick);}

在menu中定义菜单

<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"tools:context=".MainActivity"><item android:id="@+id/action_edit"android:title="edit"android:orderInCategory="80"android:icon="@drawable/ab_edit"app:showAsAction="ifRoom" /><item android:id="@+id/action_share"android:title="share"android:orderInCategory="90"android:icon="@drawable/ab_share"app:showAsAction="ifRoom" /><item android:id="@+id/action_settings"android:title="setting"android:orderInCategory="100"app:showAsAction="never"/>
</menu>

设置图标与图标响应事件

  1. 并且在onCreateOptionsMenu方法中绑定,
  2. 然后用OnMenuItemClickListener 设置监听
  3. toolbar.setOnMenuItemClickListener(onMenuItemClick),将监听赋给toolbar
 private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem menuItem) {String msg = "";switch (menuItem.getItemId()) {case R.id.action_edit:msg += "Click edit";break;case R.id.action_share:msg += "Click share";break;case R.id.action_settings:msg += "Click setting";break;}if(!msg.equals("")) {Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();}return true;}};@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.menu_main,menu);return super.onCreateOptionsMenu(menu);}

参考链接:

android:ToolBar详解(手把手教程) - 泡在网上的日子

RecycleView的使用

RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用。
据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView、GridView。

那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。

  • 你想要控制其显示的方式,请通过布局管理器LayoutManager
  • 你想要控制Item间的间隔(可绘制),请通过ItemDecoration
  • 你想要控制Item增删的动画,请通过ItemAnimator
  • 你想要控制点击、长按事件,请自己写

基本使用

mRecyclerView = findView(R.id.id_recyclerview);
//设置布局管理器
mRecyclerView.setLayoutManager(layout);
//设置adapter
mRecyclerView.setAdapter(adapter)
//设置Item增加、移除动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//添加分割线
mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.HORIZONTAL_LIST));

简单实现

package com.zj.material2recy;import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {RecyclerView recyclerView;private List<String> mDatas;private HomeAdapter mAdapter;Toolbar toolbar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar= (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);setTitle("KSFHFSSF");initData();recyclerView= (RecyclerView) findViewById(R.id.id_recyclerview);recyclerView.setHasFixedSize(true);//recyclerView.setLayoutManager(new LinearLayoutManager(this));//recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this,3));recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));mAdapter = new HomeAdapter();recyclerView.setAdapter(mAdapter);recyclerView.setItemAnimator(new DefaultItemAnimator());}public void add(View view){mAdapter.add(view);}public void remove(View view){mAdapter.remove(view);}List<Integer> mHeights;protected void initData(){mDatas = new ArrayList<String>();for (int i = 'A'; i < 'z'; i++){mDatas.add("" + (char) i);}mHeights = new ArrayList<Integer>();for (int i = 0; i < mDatas.size(); i++){mHeights.add( (int) (100 + Math.random() * 300));}}class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder>{public void add(View view){mDatas.add(2,"insert");notifyItemInserted(2);}public void remove(View view){mDatas.remove(8);notifyItemRemoved(8);}@Overridepublic HomeAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {MyViewHolder holder=new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item_main,parent,false));return holder;}@Overridepublic void onBindViewHolder(HomeAdapter.MyViewHolder holder, int position) {int temp= (int) (Math.random()*5+10);//holder.tv.setHeight(temp);ViewGroup.LayoutParams lp =  holder.tv.getLayoutParams();lp.height = mHeights.get(position);holder.tv.setLayoutParams(lp);holder.tv.setText(mDatas.get(position));}@Overridepublic int getItemCount() {return mDatas.size();}class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{TextView tv;public MyViewHolder(View view){super(view);tv = (TextView) view.findViewById(R.id.id_num);view.setOnClickListener(this);}@Overridepublic void onClick(View view) {String text=tv.getText().toString();int positon=recyclerView.getChildAdapterPosition(view);Snackbar.make(view, text+positon, Snackbar.LENGTH_SHORT).show();}}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.menu_main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();//noinspection SimplifiableIfStatementif (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"><android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:title="afbd"android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar><LinearLayout
        android:layout_below="@id/toolbar"android:id="@+id/bt_ctr"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Button
        android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="add"android:onClick="add"/><Button
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="remove"android:onClick="remove"/></LinearLayout><android.support.v7.widget.RecyclerView
        android:id="@+id/id_recyclerview"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/bt_ctr"android:scrollbars="none" /></RelativeLayout>

recycleView的item布局

<?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="wrap_content"android:minHeight="60dp"android:clickable="true"android:gravity="center_vertical"android:orientation="vertical"><TextView
        android:id="@+id/id_num"android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"android:text="abfd"android:gravity="center"android:textColor="@android:color/black"android:textSize="18sp" />
</RelativeLayout>

效果如下:实现了瀑布流,添加,删除时的动画

这里写图片描述

分割线的实现详见参考链接:

Android RecyclerView 使用完全解析 体验艺术般的控件 - Hongyang - 博客频道 - CSDN.NET

layoutManger的用法

RecyclerView.LayoutManager吧,这是一个抽象类,好在系统提供了3个实现类,分别实现listView,grideView,瀑布流:

  • LinearLayoutManager 现行管理器,支持横向、纵向。
  • GridLayoutManager 网格布局管理器
  • StaggeredGridLayoutManager 瀑布就式布局管理器
//mRecyclerView.setLayoutManager(new LinearLayoutManager(this));mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));

ItemAnimator的用法

ItemAnimator也是一个抽象类,好在系统为我们提供了一种默认的实现类,期待系统多
添加些默认的实现。

借助默认的实现,当Item添加和移除的时候,添加动画效果很简单:

// 设置item动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
  • 注意,这里更新数据集不是用adapter.notifyDataSetChanged()而是
    notifyItemInserted(position)与notifyItemRemoved(position)
    否则没有动画效果。
    上述为adapter中添加了两个方法:
public void addData(int position) {mDatas.add(position, "Insert One");notifyItemInserted(position);}public void removeData(int position) {mDatas.remove(position);notifyItemRemoved(position);}

点击事件监听实现

class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{TextView tv;public MyViewHolder(View view){super(view);tv = (TextView) view.findViewById(R.id.id_num);view.setOnClickListener(this);}@Overridepublic void onClick(View view) {String text=tv.getText().toString();int positon=recyclerView.getChildAdapterPosition(view);Snackbar.make(view, text+positon, Snackbar.LENGTH_SHORT).show();}}}

首先setOnclickListener,由MyViewHolder 接收并处理

完成:参考链接如下

Android RecyclerView 使用完全解析 体验艺术般的控件 - Hongyang - 博客频道 - CSDN.NET

动画效果源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DARPA宣布未来五年将投资20亿美元开发下一波人工智能技术

来源&#xff1a;国防科技信息网作者&#xff1a;丁宏 中国船舶工业综合技术经济研究院 美国DARPA近日宣布&#xff0c;计划在未来5年内投资20亿美元用于开发下一波人工智能技术&#xff0c;寻求情境推理能力等技术的突破&#xff0c;使其有能力识别新的场景和环境并加以适应&a…

Material Design入门(二)

本文主要包括以下内容 侧滑菜单DrawerLayout实现 CardView实现 DrawerLayout介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件&#xff0c;可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后&#xff0c;google借鉴而出现的产物。drawerLayout分…

李飞飞重回斯坦福,Andrew Moore接手谷歌云AI

来源&#xff1a;网络大数据6 月&#xff0c;海外媒体爆出「李飞飞或将离开谷歌重返斯坦福」;两周前&#xff0c;CMU 官方发布消息称 CMU 计算机学院院长 Andrew Moore 即将离职。今日&#xff0c;谷歌云博客发布的信息最终把二者的去向都敲定&#xff1a;Andrew Moore 加入谷歌…

UVA 10173 旋转卡壳

题意&#xff1a;给出一些点&#xff0c;求最小的覆盖这些点的矩形的面积。 题解&#xff1a; 枚举下边界&#xff08;是一条边&#xff09;&#xff0c;然后暴力卡壳左右边界&#xff08;点&#xff09;&#xff0c;再暴力上边界&#xff08;点&#xff09;&#xff0c;更新答…

Python Requests 丨爬虫基础入门

据说&#xff1a;看我文章的帅帅 都有个习惯&#xff1a;先点赞、收藏再看 目录 ⚽️ 一、背景知识&#xff1a;requests &#x1f3c0; 1、pip安装requests &#x1f3c8; 2、pycharm安装requests ⚾️ 3、一行代码使用requests &#x1f3be; 4、requests常用调用&…

类脑计算:让人工智能走得更远

来源&#xff1a;中国科学报像人一样思考&#xff0c;这是人们对人工智能和机器人的期待。大踏步前进的人工智能&#xff0c;似乎走到了十字路口。“机器综合智能水平和人脑相差较大&#xff0c;机器学习需要较多人工干预&#xff0c;不同人工智能模态之间交互协同较少……”近…

Android之Fragment(一)

Fragment的产生与介绍 Android运行在各种各样的设备中&#xff0c;有小屏幕的手机&#xff0c;超大屏的平板甚至电视。针对屏幕尺寸的差距&#xff0c;很多情况下&#xff0c;都是先针对手机开发一套App&#xff0c;然后拷贝一份&#xff0c;修改布局以适应平板神马超级大屏的…

《Python快速入门》基础知识扫盲课

据说:看我文章的帅帅 都有个习惯:先点赞、收藏再看 目录 🐜 1、Python 初体验 Pycharm 第一个程序 交互式编程第一个程序

数字技术对就业的影响分析

来源&#xff1a; 腾讯研究院技术是增长之源&#xff0c;就业是民生之本。技术进步对就业具有双重影响&#xff0c;它不仅带来新的工作机会&#xff0c;改善人们的生活&#xff1b;也会替代一些原有岗位&#xff0c;带来“技术性失业”。1930年&#xff0c;英国伟大的经济学家凯…

Android之Fragment(二)

本文主要内容 如何管理Fragment回退栈 Fragment如何与Activity交互 Fragment与Activity交互的最佳实践 没有视图的Fragment的用处 使用Fragment创建对话框 如何与ActionBar&#xff0c;MenuItem集成等 管理Fragment回退栈 类似与Android系统为Activity维护一个任务栈&#…

带你薅“云”羊毛:定个小目标,先薅他一年

点赞 ➕ 评论 ➕ 收藏 养成三连好习惯 一、2022年了&#xff0c;一块钱能干什么&#xff1f; 1块钱 能买一瓶矿泉水 1块钱 能坐一次公交 1块钱 竟然能买来一年的云服务器 哈哈哈&#xff0c;今天西红柿就带大家一块钱白嫖京东云服务器&#xff0c;当然&#xff0c;氪金也是…

ubuntu下搭建android开发环境(转载)

在ubuntu下搭建android开发环境&#xff0c;准备学习一下android开发。 1、安装JDK 首先到oracle的官网上下载linux版本的JDK&#xff08;网址为:http://www.oracle.com/technetwork/java/javase/downloads/jdk-6u26&#xff0d;download-400750.html&#xff09;&#x…

《瓦森纳协定》——光刻机为什么就是不卖给中国!

来源&#xff1a;金属加工&#xff08;ID&#xff1a;mw1950pub&#xff09;谈起光刻机相信大家首先想到的是荷兰&#xff0c;确实如此&#xff0c;荷兰光刻机在全球都是数一数二的&#xff0c;就连最顶尖的光刻机制造公司ASML也位于荷兰&#xff0c;二荷兰光刻机之所以这么出名…

Material Design入门(三)

本文主要包括 CollapsingToolbarLayout实现滚动动画效果 ViewPagertabLayout实现左右类Tab效果 控件介绍 这次需要用到得新控件比较多&#xff0c;主要有以下几个&#xff1a; CoordinatorLayout 组织它的子views之间协作的一个Layout&#xff0c;它可以给子View切换提供…

干货|2018物流机器人行业报告发布!不容错过

来源&#xff1a;楼今岁阅 摘要&#xff1a;2018年&#xff0c;我们都在谈智能家居、智能交通、智能工业、智能安防等热门物联网话题&#xff0c;并且预计到2020年&#xff0c;中国物联网的整体规模将超过1.8万亿元。发展如此迅速&#xff0c;其涉及的领域一定会越来越广&#…

【年度回忆录】如何做到1年90000粉丝?

亲爱的小伙伴&#xff1a; 小伙伴你好&#xff0c;我是不吃西红柿&#xff0c;仅以此文作为 2021 年终总结&#xff0c;顺便跟大家分享一些博主的心得经验&#xff0c;希望你我和 CSDN 都越来越好&#xff01; 一、C站点滴 翻开 2021 CSDN 年度回忆录&#xff0c;有种难以言…

Material Design综合实例

背景知识 drawlayout的使用 recycleView的使用 CardView的使用 一些开源动画库的使用 ImageView的scaleType属性与adjustViewBounds属性 &#xff0c;参考链接&#xff1a; ImageView的android:adjustViewBounds属性 - - ITeye技术网站 Android ImageView的scaleType属性与…

DARPA将开发无需手术的神经技术,实现脑机接口

来源&#xff1a;IEEE电气电子工程师学会到目前为止&#xff0c;DARPA&#xff08;美国国防部高级研究计划局&#xff09;的神经科学项目部&#xff08;也称为国防部疯狂科学部门&#xff09;一直专注于可服务于那些因身体或大脑残疾回国的士兵的技术&#xff0c;例如&#xff…

2018年全球自动驾驶法律政策研究 | 附报告下载

来源&#xff1a;腾讯研究院摘要&#xff1a;2018年9月13日&#xff0c;在中国法学会研究部、腾讯研究院联合举办的“‘法律人的互联网思维’系列研修会第二期——自动驾驶汽车的技术、产业和法律维度”上&#xff0c;腾讯研究院发布《2018年全球自动驾驶法律政策研究报告》。0…

全球最具影响力AI机构TOP100排名:中国5所高校1所研究院入围

来源&#xff1a;学术头条&#xff08;SciTouTiao&#xff09;现在“人工智能”&#xff08;ArtificialIntelligence&#xff09;一词时常“做客”各大媒体平台&#xff0c;成为人们所关注的热点话题&#xff0c;而在学术圈&#xff0c;AI技术同样也是最具活力与吸引力的研究课…