一個帶動畫效果的顏色選擇對話框控件AnimatedColorPickerDialog

ysvv1859 10年前發布 | 8K 次閱讀 Android開發移動開發

android4.4的日歷中選擇日程顯示顏色的時候有一個顏色選擇對話框非常漂亮，模仿他的界面我實現了一個類似的對話框，而且帶有動畫效果。

代碼的實現可講的地方不多，主要是采用了和AlertDialog類似的Builder方式來創建對話框，另外當每個顏色被選擇的時候有個按下效果是用純代碼實現的，還有就是可以動態的判斷一排可以顯示多少個顏色元素。而動畫效果我們是使用屬性動畫實現，如果要做到兼容2.3需要使用第三方庫NineOldAndroids來實現屬性動畫。

源碼如下：

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

本文由用戶 ysvv1859 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455783646276.html

Android開發移動開發

一個帶動畫效果的顏色選擇對話框控件AnimatedColorPickerDialog

相關經驗

相關資訊

相關文檔

目錄