Skip to content

Commit 4f4895a

Browse files
erezrokaherezrokah
committed
add border radius support
1 parent 946273d commit 4f4895a

File tree

7 files changed

+304
-54
lines changed

7 files changed

+304
-54
lines changed

‎android/build.gradle‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ android {
2828

2929
repositories {
3030
mavenCentral()
31+
jcenter()
3132
}
3233

3334
dependencies {
@@ -42,4 +43,7 @@ dependencies {
4243

4344
//PhotoView
4445
compile 'com.github.chrisbanes:PhotoView:2.1.3'
46+
47+
//transformations
48+
compile 'jp.wasabeef:glide-transformations:2.0.2'
4549
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedImageView.java‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
package io.rumors.reactnativefirebaseui.storage;
2+
3+
import android.widget.ImageView;
4+
import android.widget.ImageView.ScaleType;
5+
6+
import com.firebase.ui.storage.images.FirebaseImageLoader;
7+
import com.google.firebase.storage.StorageReference;
8+
import com.google.firebase.storage.FirebaseStorage;
9+
import com.bumptech.glide.Glide;
10+
import com.bumptech.glide.load.resource.bitmap.FitCenter;
11+
import com.bumptech.glide.load.resource.bitmap.CenterCrop;
12+
13+
import com.facebook.react.uimanager.ThemedReactContext;
14+
15+
import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
16+
17+
public class ExtendedImageView extends ImageView {
18+
protected String mPath = null;
19+
protected int mBorderRadius = 0;
20+
protected RoundedCornersTransformation.CornerType mCornerType;
21+
protected ScaleType mScaleType;
22+
23+
protected ThemedReactContext mContext = null;
24+
25+
public ExtendedImageView(ThemedReactContext context) {
26+
super(context);
27+
mContext = context;
28+
}
29+
30+
public void setPath(String path) {
31+
mPath = path;
32+
}
33+
34+
@Override
35+
public void setScaleType(ScaleType scaleType) {
36+
mScaleType = scaleType;
37+
}
38+
39+
public void setBorderRadius(int borderRadius, RoundedCornersTransformation.CornerType cornerType) {
40+
mBorderRadius = borderRadius;
41+
mCornerType = cornerType;
42+
}
43+
44+
public void updateView() {
45+
StorageReference storageReference = FirebaseStorage.getInstance().getReference(mPath);
46+
FirebaseImageLoader imageLoader = new FirebaseImageLoader();
47+
if (mBorderRadius != 0) {
48+
//ctor is (context, radius, margin, cornerType)
49+
RoundedCornersTransformation transformation =
50+
new RoundedCornersTransformation(mContext, mBorderRadius, 0, mCornerType);
51+
52+
if (mScaleType == ScaleType.CENTER_CROP) {
53+
Glide.with(mContext).using(imageLoader)
54+
.load(storageReference)
55+
.bitmapTransform(new CenterCrop(mContext), transformation)
56+
.into(this);
57+
} else {
58+
Glide.with(mContext).using(imageLoader)
59+
.load(storageReference)
60+
.bitmapTransform(new FitCenter(mContext), transformation)
61+
.into(this);
62+
}
63+
} else {
64+
if (mScaleType == ScaleType.CENTER_CROP) {
65+
Glide.with(mContext).using(imageLoader)
66+
.load(storageReference)
67+
.centerCrop()
68+
.into(this);
69+
} else {
70+
Glide.with(mContext).using(imageLoader)
71+
.load(storageReference)
72+
.fitCenter()
73+
.into(this);
74+
}
75+
}
76+
}
77+
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedPhotoView.java‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
package io.rumors.reactnativefirebaseui.storage;
2+
3+
import com.github.chrisbanes.photoview.PhotoView;
4+
import android.widget.ImageView.ScaleType;
5+
6+
import com.firebase.ui.storage.images.FirebaseImageLoader;
7+
import com.google.firebase.storage.StorageReference;
8+
import com.google.firebase.storage.FirebaseStorage;
9+
import com.bumptech.glide.Glide;
10+
import com.bumptech.glide.load.resource.bitmap.FitCenter;
11+
import com.bumptech.glide.load.resource.bitmap.CenterCrop;
12+
13+
import com.facebook.react.uimanager.ThemedReactContext;
14+
15+
import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
16+
17+
public class ExtendedPhotoView extends PhotoView {
18+
protected String mPath = null;
19+
protected int mBorderRadius = 0;
20+
protected RoundedCornersTransformation.CornerType mCornerType;
21+
protected ScaleType mScaleType;
22+
23+
protected ThemedReactContext mContext = null;
24+
25+
public ExtendedPhotoView(ThemedReactContext context) {
26+
super(context);
27+
mContext = context;
28+
}
29+
30+
public void setPath(String path) {
31+
mPath = path;
32+
}
33+
34+
@Override
35+
public void setScaleType(ScaleType scaleType) {
36+
mScaleType = scaleType;
37+
}
38+
39+
public void setBorderRadius(int borderRadius, RoundedCornersTransformation.CornerType cornerType) {
40+
mBorderRadius = borderRadius;
41+
mCornerType = cornerType;
42+
}
43+
44+
public void updateView() {
45+
StorageReference storageReference = FirebaseStorage.getInstance().getReference(mPath);
46+
FirebaseImageLoader imageLoader = new FirebaseImageLoader();
47+
if (mBorderRadius != 0) {
48+
//ctor is (context, radius, margin, cornerType)
49+
RoundedCornersTransformation transformation =
50+
new RoundedCornersTransformation(mContext, mBorderRadius, 0, mCornerType);
51+
52+
if (mScaleType == ScaleType.CENTER_CROP) {
53+
Glide.with(mContext).using(imageLoader)
54+
.load(storageReference)
55+
.bitmapTransform(new CenterCrop(mContext), transformation)
56+
.into(this);
57+
} else {
58+
Glide.with(mContext).using(imageLoader)
59+
.load(storageReference)
60+
.bitmapTransform(new FitCenter(mContext), transformation)
61+
.into(this);
62+
}
63+
} else {
64+
if (mScaleType == ScaleType.CENTER_CROP) {
65+
Glide.with(mContext).using(imageLoader)
66+
.load(storageReference)
67+
.centerCrop()
68+
.into(this);
69+
} else {
70+
Glide.with(mContext).using(imageLoader)
71+
.load(storageReference)
72+
.fitCenter()
73+
.into(this);
74+
}
75+
}
76+
}
77+
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebaseImageViewManager.java‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
package io.rumors.reactnativefirebaseui.storage;
22

3-
import android.widget.ImageView;
3+
import javax.annotation.Nullable;
4+
import android.widget.ImageView.ScaleType;
5+
6+
import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
7+
8+
import com.facebook.react.uimanager.ViewProps;
9+
import com.facebook.react.uimanager.annotations.ReactProp;
10+
import com.facebook.react.uimanager.annotations.ReactPropGroup;
11+
import com.facebook.react.uimanager.SimpleViewManager;
12+
import com.facebook.react.uimanager.ThemedReactContext;
13+
import com.facebook.yoga.YogaConstants;
14+
import com.facebook.react.uimanager.PixelUtil;
415
import com.facebook.react.uimanager.ThemedReactContext;
516

6-
public class FirebaseImageViewManager extends ImageViewManager {
17+
public class FirebaseImageViewManager extends SimpleViewManager<ExtendedImageView> {
718
public static final String REACT_CLASS = "RCTFirebaseImageView";
819

920
@Override
@@ -12,8 +23,64 @@ public String getName() {
1223
}
1324

1425
@Override
15-
public ImageView createViewInstance(ThemedReactContext context) {
16-
mContext = context;
17-
return new ImageView(context);
26+
public ExtendedImageView createViewInstance(ThemedReactContext context) {
27+
return new ExtendedImageView(context);
28+
}
29+
30+
@ReactProp(name = "path")
31+
public void setPath(ExtendedImageView imageView, @Nullable String path) {
32+
imageView.setPath(path);
33+
}
34+
35+
@ReactProp(name = ViewProps.RESIZE_MODE)
36+
public void setResizeMode(ExtendedImageView imageView, @Nullable String resizeMode) {
37+
ScaleType scaleType = ScaleType.CENTER_INSIDE;
38+
if ("cover".equals(resizeMode)) {
39+
scaleType = ScaleType.CENTER_CROP;
40+
} else if ("contain".equals(resizeMode)) {
41+
scaleType = ScaleType.CENTER_INSIDE;
42+
}
43+
44+
imageView.setScaleType(scaleType);
45+
}
46+
47+
@ReactPropGroup(names = {
48+
ViewProps.BORDER_RADIUS,
49+
ViewProps.BORDER_TOP_LEFT_RADIUS,
50+
ViewProps.BORDER_TOP_RIGHT_RADIUS,
51+
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
52+
ViewProps.BORDER_BOTTOM_LEFT_RADIUS
53+
}, defaultFloat = YogaConstants.UNDEFINED)
54+
public void setBorderRadius(ExtendedImageView imageView, int index, float borderRadius) {
55+
if (!YogaConstants.isUndefined(borderRadius)) {
56+
borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
57+
}
58+
59+
RoundedCornersTransformation.CornerType cornerType = RoundedCornersTransformation.CornerType.ALL;
60+
switch (index) {
61+
case 0:
62+
cornerType = RoundedCornersTransformation.CornerType.ALL;
63+
break;
64+
case 1:
65+
cornerType = RoundedCornersTransformation.CornerType.TOP_LEFT;
66+
break;
67+
case 2:
68+
cornerType = RoundedCornersTransformation.CornerType.TOP_RIGHT;
69+
break;
70+
case 3:
71+
cornerType = RoundedCornersTransformation.CornerType.BOTTOM_RIGHT;
72+
break;
73+
case 4:
74+
cornerType = RoundedCornersTransformation.CornerType.BOTTOM_LEFT;
75+
break;
76+
}
77+
78+
imageView.setBorderRadius(Math.round(borderRadius), cornerType);
79+
}
80+
81+
@Override
82+
protected void onAfterUpdateTransaction(ExtendedImageView imageView) {
83+
super.onAfterUpdateTransaction(imageView);
84+
imageView.updateView();
1885
}
1986
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebasePhotoViewManager.java‎

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
package io.rumors.reactnativefirebaseui.storage;
22

3-
import android.widget.ImageView;
4-
import com.github.chrisbanes.photoview.PhotoView;
3+
import javax.annotation.Nullable;
4+
5+
import android.widget.ImageView.ScaleType;
6+
7+
import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
8+
9+
import com.facebook.react.uimanager.ViewProps;
10+
import com.facebook.react.uimanager.annotations.ReactProp;
11+
import com.facebook.react.uimanager.annotations.ReactPropGroup;
12+
import com.facebook.react.uimanager.SimpleViewManager;
13+
import com.facebook.react.uimanager.ThemedReactContext;
14+
import com.facebook.yoga.YogaConstants;
15+
import com.facebook.react.uimanager.PixelUtil;
516
import com.facebook.react.uimanager.ThemedReactContext;
617

7-
public class FirebasePhotoViewManager extends ImageViewManager {
18+
public class FirebasePhotoViewManager extends SimpleViewManager<ExtendedPhotoView> {
819
public static final String REACT_CLASS = "RCTFirebasePhotoView";
920

1021
@Override
@@ -13,8 +24,64 @@ public String getName() {
1324
}
1425

1526
@Override
16-
public ImageView createViewInstance(ThemedReactContext context) {
17-
mContext = context;
18-
return new PhotoView(context);
27+
public ExtendedPhotoView createViewInstance(ThemedReactContext context) {
28+
return new ExtendedPhotoView(context);
29+
}
30+
31+
@ReactProp(name = "path")
32+
public void setPath(ExtendedPhotoView imageView, @Nullable String path) {
33+
imageView.setPath(path);
34+
}
35+
36+
@ReactProp(name = ViewProps.RESIZE_MODE)
37+
public void setResizeMode(ExtendedPhotoView imageView, @Nullable String resizeMode) {
38+
ScaleType scaleType = ScaleType.CENTER_INSIDE;
39+
if ("cover".equals(resizeMode)) {
40+
scaleType = ScaleType.CENTER_CROP;
41+
} else if ("contain".equals(resizeMode)) {
42+
scaleType = ScaleType.CENTER_INSIDE;
43+
}
44+
45+
imageView.setScaleType(scaleType);
46+
}
47+
48+
@ReactPropGroup(names = {
49+
ViewProps.BORDER_RADIUS,
50+
ViewProps.BORDER_TOP_LEFT_RADIUS,
51+
ViewProps.BORDER_TOP_RIGHT_RADIUS,
52+
ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
53+
ViewProps.BORDER_BOTTOM_LEFT_RADIUS
54+
}, defaultFloat = YogaConstants.UNDEFINED)
55+
public void setBorderRadius(ExtendedPhotoView imageView, int index, float borderRadius) {
56+
if (!YogaConstants.isUndefined(borderRadius)) {
57+
borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
58+
}
59+
60+
RoundedCornersTransformation.CornerType cornerType = RoundedCornersTransformation.CornerType.ALL;
61+
switch (index) {
62+
case 0:
63+
cornerType = RoundedCornersTransformation.CornerType.ALL;
64+
break;
65+
case 1:
66+
cornerType = RoundedCornersTransformation.CornerType.TOP_LEFT;
67+
break;
68+
case 2:
69+
cornerType = RoundedCornersTransformation.CornerType.TOP_RIGHT;
70+
break;
71+
case 3:
72+
cornerType = RoundedCornersTransformation.CornerType.BOTTOM_RIGHT;
73+
break;
74+
case 4:
75+
cornerType = RoundedCornersTransformation.CornerType.BOTTOM_LEFT;
76+
break;
77+
}
78+
79+
imageView.setBorderRadius(Math.round(borderRadius), cornerType);
80+
}
81+
82+
@Override
83+
protected void onAfterUpdateTransaction(ExtendedPhotoView imageView) {
84+
super.onAfterUpdateTransaction(imageView);
85+
imageView.updateView();
1986
}
2087
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/ImageViewManager.java‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)