Add props for content insets

Summary:
This PR adds a contentInsetStart and a contentInsetEnd property to ToolbarAndroid, allowing offsetting Toolbar contents to different keylines
Closes https://github.com/facebook/react-native/pull/4699

Reviewed By: svcscm

Differential Revision: D2759294

Pulled By: mkonicek

fb-gh-sync-id: f22aa255f07929ad7a99ac7568981d35e848065b
This commit is contained in:
Andreas Stütz 2015-12-22 16:45:14 -08:00 committed by facebook-github-bot-3
parent 134dd57cd6
commit 7164c755cb
2 changed files with 63 additions and 0 deletions

View File

@ -125,6 +125,24 @@ var ToolbarAndroid = React.createClass({
* Sets the toolbar title color.
*/
titleColor: ReactPropTypes.string,
/**
* Sets the content inset for the toolbar starting edge.
*
* The content inset affects the valid area for Toolbar content other than
* the navigation button and menu. Insets define the minimum margin for
* these components and can be used to effectively align Toolbar content
* along well-known gridlines.
*/
contentInsetStart: ReactPropTypes.number,
/**
* Sets the content inset for the toolbar ending edge.
*
* The content inset affects the valid area for Toolbar content other than
* the navigation button and menu. Insets define the minimum margin for
* these components and can be used to effectively align Toolbar content
* along well-known gridlines.
*/
contentInsetEnd: ReactPropTypes.number,
/**
* Used to set the toolbar direction to RTL.
* In addition to this property you need to add

View File

@ -26,6 +26,7 @@ import com.facebook.react.R;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.ReactProp;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.UIManagerModule;
@ -100,6 +101,22 @@ public class ReactToolbarManager extends ViewGroupManager<ReactToolbar> {
}
}
@ReactProp(name = "contentInsetStart", defaultFloat = Float.NaN)
public void setContentInsetStart(ReactToolbar view, float insetStart) {
int inset = Float.isNaN(insetStart) ?
getDefaultContentInsets(view.getContext())[0] :
Math.round(PixelUtil.toPixelFromDIP(insetStart));
view.setContentInsetsRelative(inset, view.getContentInsetEnd());
}
@ReactProp(name = "contentInsetEnd", defaultFloat = Float.NaN)
public void setContentInsetEnd(ReactToolbar view, float insetEnd) {
int inset = Float.isNaN(insetEnd) ?
getDefaultContentInsets(view.getContext())[1] :
Math.round(PixelUtil.toPixelFromDIP(insetEnd));
view.setContentInsetsRelative(view.getContentInsetStart(), inset);
}
@ReactProp(name = "nativeActions")
public void setActions(ReactToolbar view, @Nullable ReadableArray actions) {
view.setActions(actions);
@ -148,6 +165,34 @@ public class ReactToolbarManager extends ViewGroupManager<ReactToolbar> {
return true;
}
private int[] getDefaultContentInsets(Context context) {
Resources.Theme theme = context.getTheme();
TypedArray toolbarStyle = null;
TypedArray contentInsets = null;
try {
toolbarStyle = theme
.obtainStyledAttributes(new int[]{R.attr.toolbarStyle});
int toolbarStyleResId = toolbarStyle.getResourceId(0, 0);
contentInsets = theme.obtainStyledAttributes(
toolbarStyleResId, new int[]{
R.attr.contentInsetStart,
R.attr.contentInsetEnd,
});
int contentInsetStart = contentInsets.getDimensionPixelSize(0, 0);
int contentInsetEnd = contentInsets.getDimensionPixelSize(1, 0);
return new int[] {contentInsetStart, contentInsetEnd};
} finally {
recycleQuietly(toolbarStyle);
recycleQuietly(contentInsets);
}
}
private static int[] getDefaultColors(Context context) {
Resources.Theme theme = context.getTheme();
TypedArray toolbarStyle = null;