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

前言

之前在研究学习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 repositories
    repositories{
        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 textdrawable
        compile '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 builder
        private ColorGenerator mColorGenerator;
        private TextDrawable.IBuilder mDrawableBuilder;

        SampleAdapter(Context context) {
            mContext = context;

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

        // list of data items
        private 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")
        );

        @Override
        public int getCount() {
            return mDataList.size();
        }

        @Override
        public ListData getItem(int position) {
            return mDataList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public 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 state
            updateCheckedState(holder, item);
            holder.imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // when the image is clicked, update the selected state
                    ListData 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邮箱翻转效果之翻转动画