一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog

android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮，模仿他的界面我实现了一个类似的对话框，而且带有动画效果。

代码的实现可讲的地方不多，主要是采用了和AlertDialog类似的Builder方式来创建对话框，另外当每个颜色被选择的时候有个按下效果是用纯代码实现的，还有就是可以动态的判断一排可以显示多少个颜色元素。而动画效果我们是使用属性动画实现，如果要做到兼容2.3需要使用第三方库NineOldAndroids来实现属性动画。

源码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

package com.jcodecraeer.animatedcolorpickerdialog;

import android.animation.AnimatorSet;

import android.animation.ObjectAnimator;

import android.annotation.SuppressLint;

import android.app.Dialog;

import android.content.Context;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.graphics.drawable.ShapeDrawable;

import android.graphics.drawable.StateListDrawable;

import android.graphics.drawable.shapes.OvalShape;

import android.util.Log;

import android.view.Gravity;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.view.ViewTreeObserver.OnGlobalLayoutListener;

import android.view.animation.OvershootInterpolator;

import android.widget.GridLayout;

import android.widget.GridLayout.Spec;

import android.widget.LinearLayout;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.widget.TextView;

public class AnimatedColorPickerDialog extends Dialog {

Context context;

public static final int DIALOG_TYPE_MESSAGE = 0;

public static final int DIALOG_TYPE_PROGRESS = 2;

public static final int DIALOG_TYPE_ALERT = 3;

private ColorClickListener mListener;

private AnimatedColorPickerDialog(Context context) {

this(context,R.style.CustomTheme);

}

private AnimatedColorPickerDialog(Context context, int theme){

super(context, theme);

this.context = context;

}

public interface ColorClickListener {

void onColorClick(int color);

}

public void setOnColorClickListener(ColorClickListener l ){

mListener = l;

}

private int getDarkerColor(int color){

float[] hsv = new float[3];

Color.colorToHSV(color, hsv); // convert to hsv

// make darker

hsv[1] = hsv[1] + 0.1f; // more saturation

hsv[2] = hsv[2] - 0.2f; // less brightness

int darkerColor = Color.HSVToColor(hsv);

return darkerColor ;

}

private StateListDrawable getStateDrawable(Drawable normal, Drawable pressed, Drawable focus) {

StateListDrawable sd = new StateListDrawable();

sd.addState(new int[]{android.R.attr.state_enabled, android.R.attr.state_focused}, focus);

sd.addState(new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled}, pressed);

sd.addState(new int[]{android.R.attr.state_focused}, focus);

sd.addState(new int[]{android.R.attr.state_pressed}, pressed);

sd.addState(new int[]{android.R.attr.state_enabled}, normal);

sd.addState(new int[]{}, normal);

return sd;

}

@SuppressLint("NewApi")

public void setnumberOfColums(int columnum, int[] colors) {

TableLayout colorTable = (TableLayout)findViewById(R.id.color_group);

int rows = colors.length % columnum == 0 ? colors.length / columnum : (colors.length / columnum) + 1;

for(int r=0; r < rows; r++) {

TableRow tableRow = new TableRow(context);

for(int c = 0; c < columnum && (c + r * columnum) < colors.length ; c++) {

final View item = new View(context);

LayoutParams params = new

LayoutParams((int)context.getResources().getDimension(R.dimen.color_circle_size), (int)context.getResources().getDimension(R.dimen.color_circle_size));

item.setLayoutParams(params);

ShapeDrawable drawableNormal = new ShapeDrawable (new OvalShape ());

drawableNormal.getPaint().setColor(colors[r * columnum + c]);

ShapeDrawable drawablePress = new ShapeDrawable (new OvalShape ());

drawablePress.getPaint().setColor(getDarkerColor(colors[r * columnum + c]));

ShapeDrawable drawableFocus = new ShapeDrawable (new OvalShape ());

drawableFocus.getPaint().setColor(getDarkerColor(colors[r * columnum + c]));

item.setBackground(getStateDrawable(drawableNormal, drawablePress, drawableFocus));

item.setTag(Integer.valueOf(colors[r * columnum + c]));

item.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View view){

if(mListener != null){

Integer colorHexInObject = (Integer)item.getTag();

mListener.onColorClick(colorHexInObject.intValue());

dismiss();

}

});

LinearLayout itemContainer = new LinearLayout(context);

TableRow.LayoutParams pa = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT);

pa.setMargins(0, 0, 0, 10);

itemContainer.setLayoutParams(pa);

itemContainer.addView(item);

tableRow.addView(itemContainer);

}

colorTable.addView(tableRow);

}

//视差效果动画效果

TextView dialogTitleText = (TextView)findViewById(R.id.dialog_title);

dialogTitleText.setTranslationX(-colorTable.getWidth());

final AnimatorSet localAnimatorSet = new AnimatorSet();

ObjectAnimator localObjectAnimator1 = ObjectAnimator.ofFloat(dialogTitleText, "translationX", -colorTable.getWidth(),0);

localObjectAnimator1.setDuration(1200);

localObjectAnimator1.setInterpolator(new OvershootInterpolator(1.2F));

localAnimatorSet.play(localObjectAnimator1);

colorTable.setTranslationX(-colorTable.getWidth());

ObjectAnimator localObjectAnimator2 = ObjectAnimator.ofFloat(colorTable, "translationX", -colorTable.getWidth(),0);

localObjectAnimator2.setDuration(1200);

localObjectAnimator2.setInterpolator(new OvershootInterpolator(1.2F));

localAnimatorSet.play(localObjectAnimator2).after(100);

localAnimatorSet.start();

}

public static class Builder {

private Context context;

private ColorClickListener mListener;

private int[] colors;

private String title;

public Builder(Context context) {

this.context = context;

}

public Builder setOnColorClickListener(ColorClickListener l ){

mListener = l;

return this;

}

public Builder setColors(int[] c) {

colors = c;

return this;

}

public Builder setTitle(String t) {

title = t;

return this;

}

@SuppressLint("NewApi")

public AnimatedColorPickerDialog create() {

// instantiate the dialog with the custom Theme

final AnimatedColorPickerDialog dialog = new AnimatedColorPickerDialog(context,R.style.CustomTheme);

dialog.setContentView(R.layout.color_picker_dialog_layout);

final TableLayout colorTable= (TableLayout)dialog.findViewById(R.id.color_group);

colorTable.getViewTreeObserver().addOnGlobalLayoutListener(

new OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

colorTable.getViewTreeObserver()

.removeGlobalOnLayoutListener(this);

int leftWidth = (colorTable.getWidth() - colorTable.getPaddingLeft() * 2) % (int)context.getResources().getDimension(R.dimen.color_circle_size);

int tempColums = (colorTable.getWidth() - colorTable.getPaddingLeft() * 2) / (int)context.getResources().getDimension(R.dimen.color_circle_size);

if(leftWidth < (tempColums - 1) * 1) {

tempColums = tempColums -1;

}

dialog.setnumberOfColums(tempColums, colors);

}

});

dialog.setOnColorClickListener(mListener);

TextView titleView = (TextView)dialog.findViewById(R.id.dialog_title);

titleView.setText(title);

View closebutton = dialog.findViewById(R.id.close_button);

closebutton.setOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View view){

dialog.dismiss();

}

});

dialog.setCanceledOnTouchOutside(true);

return dialog;

}

dialog的xml代码color_picker_dialog_layout.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/content_layout"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_gravity="center"

android:gravity="center"

android:background="#f4f4f4"

>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:paddingLeft="10dip"

android:paddingRight="10dip"

android:paddingTop="5dip"

android:paddingBottom="5dip"

>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

>

<TextView

android:id="@+id/dialog_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="选择一个颜色主题"

android:textColor="#333333"

android:textStyle="bold"

android:textSize="18dip"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

/>

<ImageButton

android:id="@+id/close_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:src="@drawable/ic_action_cancel"

android:background="#00000000"

android:layout_alignParentRight="true"

/>

</RelativeLayout>

</LinearLayout>

<TableLayout

android:padding="10dip"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:stretchColumns="*"

android:id="@+id/color_group" >

</TableLayout>

</LinearLayout>

使用：

public void openColorDialog(View v) {

new AnimatedColorPickerDialog.Builder(MainActivity.this)

.setTitle("选择一种颜色")

.setColors(styleColors)

.setOnColorClickListener(new AnimatedColorPickerDialog.ColorClickListener() {

@Override

public void onColorClick(int color) {

colorDisplayView.setBackgroundColor(color);

}

}).create().show();

}

demo下载地址：https://github.com/jianghejie/AnimatedColorPickerDialog

一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog的更多相关文章

IOS的一个带动画的多项选择的控件(一)
先上效果图: 这个程序分2个层次,一个是顶部的带UITextField的bar,一个是下拉选择的view,下拉选择的view带有4个自己定义的UIView 我们先定义一个UIViewControlle ...
收藏一个带动画效果的ScrollViewer以及ScrollBar的模板
这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...
android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
Android利用温度传感器实现带动画效果的电子温度计
概述 Android利用温度传感器实现带动画效果的电子温度计. 详细代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作需要准备一部带有温度传感 ...
我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
/*带动画效果的hover*/
<!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...
带动画效果的jQuery手风琴
带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

随机推荐

设计模式值六大原则——里氏替换原则（LSP）
里氏替换原则(Liskov Substitution Principel)是解决继承带来的问题. 继承的优点: 代码共享,减少创建类的工作量,每个子类都拥有父类的方法和属性: 提高代码的重用性: 子类 ...
Android各种效果集合
QQ侧滑风格:http://www.cnblogs.com/lichenwei/p/4111252.html,通过继承HorizontalScrollView类来实现的.
HTML5 总结-画布-4
HTML5 画布创建 Canvas 元素向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" wid ...
Test class should have exactly one public zero-argument constructor
java.lang.Exception: Test class should have exactly one public zero-argument constructor at org.juni ...
多线程wait()和sleep()以及InterruptedException异常
1.核心区别: sleep用于线程控制,wait用于线程间的通信. sleep是Thread类的方法,是让线程休息一段时间,然后自动恢复运行,与其他线程无关,与同步无关,也与锁无关(拿锁时不会释放锁) ...
android 实现蓝牙自动配对连接
BluetoothConnectActivityReceiver.java:监听蓝牙配对的广播代码: package com.imte.Broadcast; import com.imte.util ...
css 基础（一）
一.css样式表的分类首先介绍一下css中的样式表 a.外部样式表将需要的样式放在单独的外部文件中,需要使用是直接调用,通常放在.css文件中.例如:/*以下部分是放在(my.css)自定义名 ...
OpenGL ES 如何能看到一个物体内部和象3dmax中能只显示网格线
上一篇 OpenGL ES 正反面设置指令中分析了正反面的判区方法,那么正反面有什么用呢?接下来我们就要引入一个叫做背面消除的概念.在3dmax中有个选项,当你用挤压修改器挤出一个中空的长方体时,在 ...
chrome 浏览器帐号登录不来，如何解决自己的书签
装系统前把该目录下 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default 的 Bookmarks 复制出 ...
CentOS的MySQL报错：Can't connect to MySQL server
原文链接: http://www.centoscn.com/CentosBug/softbug/2015/0622/5709.html 问题描述: 使用客户端远程登录连接基于CentOS 6.5服务器 ...

一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog

一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog的更多相关文章

随机推荐

热门专题