Add support for color input datalist on Android

ui/android/java/src/org/chromium/ui/ColorPickerSimple.java

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 package org.chromium.ui;
 
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Rect;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
+import android.view.ViewGroup;
+import android.widget.GridView;
+import android.widget.AdapterView;
 
+import java.util.ArrayList;
+import java.util.Arrays;
 
 /**
  * Draws a grid of (predefined) colors and allows the user to choose one of
  * those colors.
  */
-public class ColorPickerSimple extends View {
-    private static final int ROW_COUNT = 2;
-
-    private static final int COLUMN_COUNT = 4;
-
-    private static final int GRID_CELL_COUNT = ROW_COUNT * COLUMN_COUNT;
-
-    private static final int[] COLORS = { Color.RED,
-                                          Color.CYAN,
-                                          Color.BLUE,
-                                          Color.GREEN,
-                                          Color.MAGENTA,
-                                          Color.YELLOW,
-                                          Color.BLACK,
-                                          Color.WHITE
-                                        };
-
-    private Paint mBorderPaint;
-
-    private Rect[] mBounds;
-
-    private Paint[] mPaints;
+public class ColorPickerSimple extends GridView {
 
     private OnColorChangedListener mOnColorTouchedListener;

[newt (away), 2013/08/26 20:23:20]

might as well change this name to "mOnColorChangedListener"

[keishi, 2013/08/29 03:40:47]

Done.

 
-    private int mLastTouchedXPosition;
+    private static final int[] DEFAULT_COLORS = { Color.RED,
+                                                  Color.CYAN,
+                                                  Color.BLUE,
+                                                  Color.GREEN,
+                                                  Color.MAGENTA,
+                                                  Color.YELLOW,
+                                                  Color.BLACK,
+                                                  Color.WHITE
+                                                };
 
-    private int mLastTouchedYPosition;
+    private static final String[] DEFAULT_COLOR_LABELS = { "Red",

[Miguel Garcia, 2013/08/27 14:32:00]

how does this work with internationalization?

[newt (away), 2013/08/27 16:05:29]

How are these strings used? If these are user-facing then they should be
properly localized. You can add strings to android_ui_strings.grd and reference
them here using getContext().getString(R.string.red).

[keishi, 2013/08/29 03:40:47]

Yes these are user facing when using TalkBack. I added them to
android_ui_strings.grd

+                                                           "Cyan",
+                                                           "Blue",
+                                                           "Green",
+                                                           "Magenta",
+                                                           "Yellow",
+                                                           "Black",
+                                                           "White"
+    };
 
     public ColorPickerSimple(Context context) {
         super(context);
     }
 
     public ColorPickerSimple(Context context, AttributeSet attrs) {
         super(context, attrs);
     }
 
     public ColorPickerSimple(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
     }
 
     /**
-     * Initializes the listener and precalculates the grid and color positions.
+     * Initializes the listener and sets the adapter for the given list of suggestions. If the
+     * suggestions is null a default set of colors will be used.
      *
+     * @param suggestions The list of suggestions that should be displayed.
      * @param onColorChangedListener The listener that gets notified when the user touches
      *                               a color.
      */
-    public void init(OnColorChangedListener onColorChangedListener) {
+    public void init(ColorSuggestion[] suggestions,
+                     OnColorChangedListener onColorChangedListener) {
         mOnColorTouchedListener = onColorChangedListener;
 
-        // This will get calculated when the layout size is updated.
-        mBounds = null;
-
-        mPaints = new Paint[GRID_CELL_COUNT];
-        for (int i = 0; i < GRID_CELL_COUNT; ++i) {
-            Paint newPaint = new Paint();
-            newPaint.setColor(COLORS[i]);
-            mPaints[i] = newPaint;
+        ArrayList<ColorSuggestion> suggestionsList;
+        if (suggestions == null) {
+            suggestionsList = new ArrayList<ColorSuggestion>();
+            for (int i = 0; i < DEFAULT_COLORS.length; ++i) {
+                suggestionsList.add(new ColorSuggestion(DEFAULT_COLORS[i],
+                                                        null,
+                                                        DEFAULT_COLOR_LABELS[i]));
+            }
+        } else {
+            suggestionsList = new ArrayList<ColorSuggestion>(Arrays.asList(suggestions));
         }
 
-        mBorderPaint = new Paint();
-        int borderColor = getContext().getResources().getColor(R.color.color_picker_border_color);
-        mBorderPaint.setColor(borderColor);
+        setAdapter(new ColorGridAdapter(getContext(), suggestionsList));
 
-        // Responds to the user touching the grid and works out which color has been chosen as
-        // a result, depending on the X,Y coordinate. Note that we respond to the click event
-        // here, but the onClick() method doesn't provide us with the X,Y coordinates, so we
-        // track them in onTouchEvent() below. This way the grid reacts properly to touch events
-        // whereas if we put this onClick() code in onTouchEvent below then we get some strange
-        // interactions with the ScrollView in the parent ColorPickerDialog.
-        setOnClickListener(new OnClickListener() {
+        setOnItemClickListener(new OnItemClickListener() {
             @Override
-            public void onClick(View v) {
-                if (mOnColorTouchedListener != null && getWidth() > 0 && getHeight() > 0) {
-                    int column = mLastTouchedXPosition * COLUMN_COUNT / getWidth();
-                    int row = mLastTouchedYPosition * ROW_COUNT / getHeight();
-
-                    int colorIndex = (row * COLUMN_COUNT) + column;
-                    if (colorIndex >= 0 && colorIndex < COLORS.length) {
-                        mOnColorTouchedListener.onColorChanged(COLORS[colorIndex]);
-                    }
-                }
+            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
+                ColorGridAdapter adapter = (ColorGridAdapter) getAdapter();

[newt (away), 2013/08/26 20:23:20]

you could use getItemAtPosition() here

[keishi, 2013/08/29 03:40:47]

Done.

+                ColorSuggestion suggestion = adapter.getItem(position);
+                mOnColorTouchedListener.onColorChanged(suggestion.mValueAsColor);
             }
         });
     }
-
-    /**
-     * Draws the grid of colors, based on the rectangles calculated in onSizeChanged().
-     * Also draws borders in between the colored rectangles.
-     *
-     * @param canvas The canvas the colors are drawn onto.
-     */
-    @Override
-    public void onDraw(Canvas canvas) {
-        if (mBounds == null || mPaints == null) {
-            return;
-        }
-
-        canvas.drawColor(Color.WHITE);
-
-        // Draw the actual colored rectangles.
-        for (int i = 0; i < GRID_CELL_COUNT; ++i) {
-            canvas.drawRect(mBounds[i], mPaints[i]);
-        }
-
-        // Draw 1px borders between the rows.
-        for (int i = 0; i < ROW_COUNT - 1; ++i) {
-          canvas.drawLine(0,
-                  mBounds[i * COLUMN_COUNT].bottom + 1,
-                  getWidth(),
-                  mBounds[i * COLUMN_COUNT].bottom + 1,
-                  mBorderPaint);
-        }
-
-        // Draw 1px borders between the columns.
-        for (int j = 0; j < COLUMN_COUNT - 1; ++j) {
-          canvas.drawLine(mBounds[j].right + 1,
-                  0,
-                  mBounds[j].right + 1,
-                  getHeight(),
-                  mBorderPaint);
-        }
-    }
-
-    /**
-     * Stores the X,Y coordinates of the touch so that we can use them in the onClick() listener
-     * above to work out where the click was on the grid.
-     *
-     * @param event The MotionEvent the X,Y coordinates are retrieved from.
-     */
-    @Override
-    public boolean onTouchEvent(MotionEvent event) {
-        if (event.getAction() == MotionEvent.ACTION_DOWN) {
-            mLastTouchedXPosition = (int) event.getX();
-            mLastTouchedYPosition = (int) event.getY();
-        }
-        return super.onTouchEvent(event);
-    }
-
-    /**
-     * Recalculates the color grid with the new sizes.
-     */
-    @Override
-    protected void onSizeChanged(int width, int height, int oldw, int oldh) {
-        calculateGrid(width, height);
-    }
-
-    /**
-     * Calculates the sizes and positions of the cells in the grid, splitting
-     * them up as evenly as possible. Leaves 3 pixels between each cell so that
-     * we can draw a border between them as well, and leaves a pixel around the
-     * edge.
-     */
-    private void calculateGrid(final int width, final int height) {
-        mBounds = new Rect[GRID_CELL_COUNT];
-
-        for (int i = 0; i < ROW_COUNT; ++i) {
-            for (int j = 0; j < COLUMN_COUNT; ++j) {
-                int left = j * (width + 1) / COLUMN_COUNT + 1;
-                int right = (j + 1) * (width + 1) / COLUMN_COUNT - 2;
-
-                int top = i * (height + 1) / ROW_COUNT + 1;
-                int bottom = (i + 1) * (height + 1) / ROW_COUNT - 2;
-
-                Rect rect = new Rect(left, top, right, bottom);
-                mBounds[(i * COLUMN_COUNT) + j] = rect;
-            }
-        }
-    }
 }