[core] ImageView: implement scale type

> Allow scale in fit, fill, crop and wrap in ImageView
GabrielBRDeveloper · Aug 1, 2024 · f1c37a6 · f1c37a6
1 parent 43e56f4
commit f1c37a6
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 20 deletions.
diff --git a/core/res/ex-layout/main.xml b/core/res/ex-layout/main.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<FrameLayout
+<LinearLayout
     width="match_parent"
     height="wrap_content"
     paddingBottom="8dp"
@@ -8,12 +8,85 @@
     background="#AAA"
     gravity="center">
 
+  <ScrollView
+      width="200dp"
+      height="match_parent">
+    <EditText
+        width="match_parent"
+        height="wrap_content"
+        hint="Example"
+        margin="5dp"/>
+  </ScrollView>
+
   <LinearLayout
     width="match_parent"
-    height="wrap_content"
+    height="match_parent"
     layoutGravity="center|top"
     maxWidth="1024dp">
 
+    <LinearLayout
+      width="match_parent"
+      height="wrap_content"
+      orientation="horizontal"
+      padding="10dp">
+
+
+      <ImageView
+        width="50dp"
+        height="100dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        scaleType="fill"
+        margin="10dp"/>
+
+      <ImageView
+        width="50dp"
+        height="100dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        scaleType="crop"
+        margin="10dp"/>
+
+      <ImageView
+        width="50dp"
+        height="100dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        margin="10dp"/>
+
+    </LinearLayout>
+    <LinearLayout
+      width="match_parent"
+      height="wrap_content"
+      orientation="horizontal"
+      padding="10dp">
+
+
+      <ImageView
+        width="100dp"
+        height="72dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        scaleType="fill"
+        margin="10dp"/>
+
+      <ImageView
+        width="100dp"
+        height="72dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        scaleType="wrap"
+        margin="10dp"/>
+
+      <ImageView
+        width="100dp"
+        height="72dp"
+        background="#C00"
+        src="@drawable/default_window_icon"
+        margin="10dp"/>
+
+    </LinearLayout>
+
     <Button
       width="match_parent"
       height="wrap_content"
@@ -37,13 +110,4 @@
 
   </LinearLayout>
 
-
-  <ScrollView
-    width="400dp"
-    height="match_parent">
-    <EditText
-        width="match_parent"
-        height="wrap_content"
-        margin="5dp"/>
-  </ScrollView>
-</FrameLayout>
+</LinearLayout>
diff --git a/core/src/br/nullexcept/mux/view/AttrList.java b/core/src/br/nullexcept/mux/view/AttrList.java
@@ -51,5 +51,6 @@ public class AttrList {
     public static final String trackDrawable = "trackDrawable";
     public static final String progressDrawable = "progressDrawable";
     public static final String editable = "editable";
-    public static String hintColor = "hintColor";
+    public static final String hintColor = "hintColor";
+    public static final String scaleType = "scaleType";
 }
diff --git a/core/src/br/nullexcept/mux/widget/ImageView.java b/core/src/br/nullexcept/mux/widget/ImageView.java
@@ -9,10 +9,19 @@
 import br.nullexcept.mux.view.AttrList;
 import br.nullexcept.mux.view.Gravity;
 import br.nullexcept.mux.view.View;
+import com.sun.org.apache.xpath.internal.operations.String;
+
+import java.util.Arrays;
 
 public class ImageView extends View {
+    public static final int SCALE_FILL = 0;
+    public static final int SCALE_FIT = 1;
+    public static final int SCALE_CROP = 2;
+    public static final int SCALE_WRAP = 3;
+
     private Drawable image;
     private final Rect rect = new Rect();
+    private int scaleType = SCALE_FIT;
 
     public ImageView(Context context) {
         this(context, null);
@@ -22,6 +31,14 @@ public ImageView(Context context, AttributeList attrs) {
         super(context, attrs);
         attrs = initialAttributes();
         attrs.searchDrawable(AttrList.src, this::setImageDrawable);
+        attrs.searchRaw(AttrList.scaleType, value -> {
+            setScaleType(Arrays.asList("fill", "fit", "crop", "wrap").indexOf(value.toLowerCase().trim()));
+        });
+    }
+
+    public void setScaleType(int scaleType) {
+        this.scaleType = scaleType;
+        invalidate();
     }
 
     public void setImageDrawable(Drawable image) {
@@ -38,13 +55,35 @@ public void onDraw(Canvas canvas) {
         float iw, ih;
 
         if (image != null){
-            float pw = w/image.getWidth();
-            if (pw * image.getHeight() > h){
-                ih = h;
-                iw = (h/image.getHeight()) * image.getWidth();
-            } else {
-                iw = w;
-                ih = pw * image.getHeight();
+            switch (Math.max(0, Math.min(SCALE_WRAP, scaleType))) {
+                case SCALE_FILL: {
+                    iw = w;
+                    ih = h;
+                } break;
+                case SCALE_FIT: {
+                    float pw = w/image.getWidth();
+                    if (pw * image.getHeight() > h){
+                        ih = h;
+                        iw = (h/image.getHeight()) * image.getWidth();
+                    } else {
+                        iw = w;
+                        ih = pw * image.getHeight();
+                    }
+                } break;
+                case SCALE_CROP: {
+                    float pw = w/image.getWidth();
+                    if (pw * image.getHeight() < h){
+                        ih = h;
+                        iw = (h/image.getHeight()) * image.getWidth();
+                    } else {
+                        iw = w;
+                        ih = pw * image.getHeight();
+                    }
+                } break;
+                default: {
+                    iw = Math.max(0, image.getWidth());
+                    ih = Math.max(0, image.getHeight());
+                } break;
             }
             Gravity.applyGravity(getGravity(),Math.round(iw),Math.round(ih),Math.round(w), Math.round(h),rect);
             rect.move(getPaddingLeft(), getPaddingTop());