前言

之前在研究学习gmail翻转效果，Android原生Email也有选中翻转效果。可惜源码复杂，时间会很久。
幸好，在github上寻找到TextDrawable，基于该lib实现自己的gmail翻转效果。完整的代码查github

文章列表

以下文章是github文章的分解，力求讲清楚类gMail效果如何实现。

实现Gmail邮箱翻转效果之开篇
实现Gmail邮箱翻转效果之翻转动画
实现Gmail邮箱翻转效果之ActionBar

gMail效果图

标记 “1” 效果，邮件联系人首字符大写圆形多彩显示
标记 “2” 点击具有图片翻转效果
标记 “3” ActionBar显示选中数量以及菜单

FlipView效果图

TextDrawable & FlipView

如上图gmail显示那样，实现标记 “1” 使用TextDrawable这个开源小库 TextDrawable。
作者实现的功能比较多样，圆形，方形，圆角方形等等。颜色随意搭配，可自己选择。

FlipView是在原作者Sample基础上添加动画效果，以及ActionBar样式。

TextDrawable只有2个类：

TextDrawable.java //继承自Drawable的类，使用多种图形显示text.
ColorGenerator.java //颜色生成类

目录结构说明

library TextDrawable源码库
sample 原作者的sample
flipview 本人实现的Demo
sample-apk apk文件目录

FlipView说明

Demo FlipView的代码结构。

HomeActivity是主Activity，其中包含了ListView。
SampleAdapter 自定义Adapter，用于显示Item，动画翻转效果。

FlipView实作

flipview是独立的Apk，以该Apk为例子说明，一步一步实现gMail翻转效果。
具体创建Apk，不用多说，需要注意的是本作使用SDK 23，最小SDK 15.

集成TextDrawable

TextDrawable是原作者写的小库，用各种图形显示文本信息。可以直接使用库文件代码或是使用Android Studio的
依赖集成。
在build.gradle（flipview文件夹）中添加如下内容：

    //add maven repositoriesrepositories{maven {url 'http://dl.bintray.com/amulyakhare/maven'}}dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:23.0.1'compile 'com.android.support:design:23.0.1'//add textdrawablecompile 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'}

基础代码搭建

这里复用sample中的SampleAdapter

    public class SampleAdapter extends BaseAdapter {private static final int HIGHLIGHT_COLOR = 0x999be6ff;private Context mContext;// declare the color generator and drawable builderprivate ColorGenerator mColorGenerator;private TextDrawable.IBuilder mDrawableBuilder;SampleAdapter(Context context) {mContext = context;mColorGenerator = ColorGenerator.MATERIAL;mDrawableBuilder = TextDrawable.builder().round();}// list of data itemsprivate List<ListData> mDataList = Arrays.asList(new ListData("Iron Man"),new ListData("Captain America"),new ListData("James Bond"),new ListData("Harry Potter"),new ListData("Sherlock Holmes"),new ListData("Black Widow"),new ListData("Hawk Eye"),new ListData("Iron Man"),new ListData("Guava"),new ListData("Tomato"),new ListData("Pineapple"),new ListData("Strawberry"),new ListData("Watermelon"),new ListData("Pears"),new ListData("Kiwi"),new ListData("Plums"));@Overridepublic int getCount() {return mDataList.size();}@Overridepublic ListData getItem(int position) {return mDataList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {final ViewHolder holder;if (convertView == null) {convertView = View.inflate(mContext, R.layout.list_item_layout, null);holder = new ViewHolder(convertView);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}ListData item = getItem(position);// provide support for selected stateupdateCheckedState(holder, item);holder.imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// when the image is clicked, update the selected stateListData data = getItem(position);data.setChecked(!data.isChecked);updateCheckedState(holder, data);}});holder.textView.setText(item.data);return convertView;}private static class ListData {private String data;private boolean isChecked;public ListData(String data) {this.data = data;}public void setChecked(boolean isChecked) {this.isChecked = isChecked;}}private static class ViewHolder {private View view;private ImageView imageView;private TextView textView;private ImageView checkIcon;private ViewHolder(View view) {this.view = view;imageView = (ImageView) view.findViewById(R.id.imageView);textView = (TextView) view.findViewById(R.id.textView);checkIcon = (ImageView) view.findViewById(R.id.check_icon);}}private void updateCheckedState(ViewHolder holder, ListData item) {if (item.isChecked) {holder.imageView.setImageDrawable(mDrawableBuilder.build(" ", 0xff616161));holder.view.setBackgroundColor(HIGHLIGHT_COLOR);holder.checkIcon.setVisibility(View.VISIBLE);} else {TextDrawable drawable = mDrawableBuilder.build(String.valueOf(item.data.charAt(0)), mColorGenerator.getColor(item.data));holder.imageView.setImageDrawable(drawable);holder.view.setBackgroundColor(Color.TRANSPARENT);holder.checkIcon.setVisibility(View.GONE);}}}

基本的listview adapter模型。需要指出，使用了TextDrawable。

    import com.amulyakhare.textdrawable.TextDrawable;import com.amulyakhare.textdrawable.util.ColorGenerator;

使用方法简单。需要决定Item imageView最左边图形形状以及随机的颜色, Demo使用圆形.

    mColorGenerator = ColorGenerator.MATERIAL;mDrawableBuilder = TextDrawable.builder().round();

原作者是没有实现翻转动画效果的，仅仅使用2张图片轮替。

    <FrameLayout
        android:layout_marginRight="16dp"android:layout_width="60dp"android:layout_height="60dp"><ImageView
            android:layout_width="60dp"android:layout_height="60dp"android:id="@+id/imageView"/><ImageView
            android:visibility="gone"android:layout_width="60dp"android:layout_height="60dp"android:src="@drawable/check_sm"android:id="@+id/check_icon"/></FrameLayout><TextView
        android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center_vertical"android:id="@+id/textView"/>

我的实现方式只需要一个imageview，让该imageview实现翻转。check_icon这个view不再使用。

下篇介绍实现Gmail邮箱翻转效果之翻转动画

实现Gmail邮箱翻转效果之开篇相关推荐

android短信到邮箱,Android_andoid打包短信发送到gmail邮箱实现代码，andriod短信整合备份发送到gmail - phpStudy...
andoid打包短信发送到gmail邮箱实现代码 andriod短信整合备份发送到gmail邮箱,需要在andoid手机配置好gmail邮箱 github代码 https://github.com/z ...
andoid 打包短信发送到gmail邮箱
andriod短信整合备份发送到gmail邮箱,需要在andoid手机配置好gmail邮箱 github代码 https://github.com/zhwj184/smsbackup 查看效果: 可以 ...
关于yahoo.com.cn邮箱导入Gmail邮箱验证异常的机制解析及解决办法
一大早起来,突然就发现雅虎中国的邮箱要关停了,阿里巴巴居然都发了最后通牒了.吐槽一下,国际互联网企业来天朝之后,似乎就没有一个活的很好的,ebay被淘宝赶出了天朝,Google被度娘赶走了,Faceb ...
css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
开通了一个gmail邮箱
受 chen cong 邀请申请了一个gmail邮箱,感谢这位不知名的朋友,一直以为其用户体验性好,但是稍微用了两下,感觉没太多特别的,倒是速度可以称赞一下,的确是快,界面风格有点象yahoo的,感 ...
android左右旋转动画效果图,Android新姿势：3D翻转效果原理
首先,android里是没有3D翻转的动画效果的,但是呢,android有提供一个Camera的类,可以利用这个类来实现. 先看代码,Rotate3d是继承了Animation的一个动画类,多余的代码 ...
C#发送Email邮件（实例：QQ邮箱和Gmail邮箱）
下面用到的邮件账号和密码都不是真实的,需要测试就换成自己的邮件账号.需要引用: using System.Net.Mail; using System.Text; using System.Net;程 ...
Android\OPhone动画分析之翻转效果
看到很多人在问如何实现三维的翻转效果,所以今天在这里简单的给大家分析一下,其实在APIDemo中就有这样一个例子,那么我们就以其为例来学习Android中的翻转动画效果的实现,首先看一下运行效果如下图 ...
android 卡片旋转动画,Android 卡片翻转效果
Android 卡片翻转效果使用的Cramre来完成记录一下: 一个好用的3D旋转工具类 oid.graphics.Matrix; import android.util.Log; import a ...

实现Gmail邮箱翻转效果之开篇

前言