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

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

源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?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>

使用：

1
2
3
4
5
6
7
8
9
10
11
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的更多相关文章

  1. IOS的一个带动画的多项选择的控件(一)

    先上效果图: 这个程序分2个层次,一个是顶部的带UITextField的bar,一个是下拉选择的view,下拉选择的view带有4个自己定义的UIView 我们先定义一个UIViewControlle ...

  2. 收藏一个带动画效果的ScrollViewer以及ScrollBar的模板

    这里介绍一个带动画效果的ScrollViewer和ScrollBar,总共分为两个资源字典,直接拿来引用即可: 1 ScrollBarStyle.xaml <ResourceDictionary ...

  3. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  4. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  5. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  6. Android利用温度传感器实现带动画效果的电子温度计

    概述 Android利用温度传感器实现带动画效果的电子温度计. 详细 代码下载:http://www.demodashi.com/demo/10631.html 一.准备工作 需要准备一部带有温度传感 ...

  7. 我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计

    要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...

  8. /*带动画效果的hover*/

    <!DOCTYPE html> /*带动画效果的hover*/ <html lang="en"> <head> <meta charset ...

  9. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

随机推荐

  1. 【原创】MapGIS K9 三维二次开发入门

    开发语言:C# 平台版本:MapGIS K9 SP3 MapGIS K9三维平台也提供了接口和组件以实现二次开发.用户可以根据提供的接口和组件进行二次开发,也可以借助MapGISK9数据中心框架,可以 ...

  2. 取出js对象的所有属性的方式

    例子: //取出事件的所有属性 $('#id_btn').bind("click dbclick mouseout",{crdx:'我是传的值'},function(e){ var ...

  3. Intellij IDEA 常用 设置 及 快捷键 (持续更新)

    Transparent native-to-ascii conversion以下设置都可以通过 设置中的搜索框 进行关键字搜索 0, 打开Project 设置 Command + ; 1, 打开Mod ...

  4. GNU scientific library

    GNU scientific library 是一个强大的C,C++数学库.它涉及的面很广,并且代码效率高,接口丰富.正好最近做的一个项目中用到多元高斯分布,就找到了这个库. GNU scientif ...

  5. 在word中批量制作条形码

    条码打印软件可以批量生成条形码然后直接打印,但是有些客户不需要直接打印,而是想将生成的条形码在word中进行排版,发给自己的客户或者下属部门来打印.那么如何实现在word中批量制作条形码呢? 操作很简 ...

  6. qstring.h赏析

    https://github.com/qtproject/qtbase/blob/dev/src/corelib/tools/qstring.h C:\Qt\Qt5.3.2_min\5.3\mingw ...

  7. 用JLabel显示时间-- JAVA初学者遇到的一个困难

    问题:用一个JLabe,显示秒数,每过一秒数字自动减少1 问题看似很简单,但对初学JAVA的我来说,还真费了一点劲. 首先是如何即时,可以采用线程的方法: try { Thread.sleep(100 ...

  8. 性能超越 Redis 的 NoSQL 数据库 SSDB

    idea's blog - 性能超越 Redis 的 NoSQL 数据库 SSDB 性能超越 Redis 的 NoSQL 数据库 SSDB C/C++语言编程, SSDB Views: 8091 | ...

  9. 注解配置 ssh

    注解 <?xml version="1.0" encoding="UTF-8"? > <beans xmlns="http://ww ...

  10. c/c++内存分配方式（转）

    原文链接:http://blog.csdn.net/jing0611/article/details/4030237 1.内存分配方式 内存分配方式有三种: [1]从静态存储区域分配.内存在 程序编译 ...