前言
之前在研究學習gmail翻轉效果，Android原生Email也有選中翻轉效果。可惜源碼複雜，時間會很久。
幸好，在github上尋找到TextDrawable，基於該lib實現自己的gmail翻轉效果。完整的代碼查github
文章列表
以下文章是github文章的分解，力求講清楚類gMail效果如何實現。
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郵箱翻轉效果之翻轉動畫
