Update initial staged split UX.

- Introduce inset to the staged split view
- Update width of the staged split view
- Introduce rounded corners to staged split view. It's tricky to animate it in with smooth transition considering the rounded corners. The best way to handle it is to draw content as if part of it is off the screen, so that when it's animated in, the rounded corners can slide in onto the screen correctly.

Fixes: 219085340
Test: https://recall.googleplex.com/projects/f46cfe9c-8076-4efe-bf8a-b1cc4f1f5e1b/sessions/09a99b75-3614-4d20-b6d4-a78108f769d8

Change-Id: I24d90cc9e2695d822cb2de8b21e2d5519f2e344d
This commit is contained in:
Tracy Zhou
2022-03-17 15:24:49 -07:00
parent 025bf08e2f
commit 4ff3615b23
8 changed files with 118 additions and 80 deletions
@@ -429,29 +429,48 @@ public class PortraitPagedViewHandler implements PagedOrientationHandler {
}
@Override
public void getInitialSplitPlaceholderBounds(int placeholderHeight, DeviceProfile dp,
@StagePosition int stagePosition, Rect out) {
int width = dp.widthPx;
out.set(0, 0, width, placeholderHeight);
public void getInitialSplitPlaceholderBounds(int placeholderHeight, int placeholderInset,
DeviceProfile dp, @StagePosition int stagePosition, Rect out) {
int screenWidth = dp.widthPx;
int screenHeight = dp.heightPx;
out.set(0, 0, screenWidth, placeholderHeight);
if (!dp.isLandscape) {
// portrait, phone or tablet - spans width of screen, nothing else to do
out.inset(placeholderInset, 0);
// Adjust the top to account for content off screen. This will help to animate the view
// in with rounded corners.
int totalHeight = (int) (1.0f * screenHeight / 2 * (screenWidth - 2 * placeholderInset)
/ screenWidth);
out.top -= (totalHeight - placeholderHeight);
return;
}
// Now we rotate the portrait rect depending on what side we want pinned
boolean pinToRight = stagePosition == STAGE_POSITION_BOTTOM_OR_RIGHT;
int screenHeight = dp.heightPx;
float postRotateScale = (float) screenHeight / width;
float postRotateScale = (float) screenHeight / screenWidth;
mTmpMatrix.reset();
mTmpMatrix.postRotate(pinToRight ? 90 : 270);
mTmpMatrix.postTranslate(pinToRight ? width : 0, pinToRight ? 0 : width);
mTmpMatrix.postTranslate(pinToRight ? screenWidth : 0, pinToRight ? 0 : screenWidth);
// The placeholder height stays constant after rotation, so we don't change width scale
mTmpMatrix.postScale(1, postRotateScale);
mTmpRectF.set(out);
mTmpMatrix.mapRect(mTmpRectF);
mTmpRectF.inset(0, placeholderInset);
mTmpRectF.roundOut(out);
// Adjust the top to account for content off screen. This will help to animate the view in
// with rounded corners.
int totalWidth = (int) (1.0f * screenWidth / 2 * (screenHeight - 2 * placeholderInset)
/ screenHeight);
int width = out.width();
if (pinToRight) {
out.right += totalWidth - width;
} else {
out.left -= totalWidth - width;
}
}
@Override