/* * Copyright (C) 2013 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package com.example.android.foldinglayout; import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.app.Activity; import android.graphics.Color; import android.graphics.ColorMatrix; import android.graphics.ColorMatrixColorFilter; import android.graphics.Paint; import android.graphics.SurfaceTexture; import android.hardware.Camera; import android.os.Build; import android.os.Bundle; import android.view.GestureDetector; import android.view.Menu; import android.view.MenuItem; import android.view.MotionEvent; import android.view.TextureView; import android.view.View; import android.view.ViewConfiguration; import android.view.ViewGroup; import android.view.animation.AccelerateInterpolator; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ImageView; import android.widget.SeekBar; import android.widget.Spinner; import com.example.android.foldinglayout.FoldingLayout.Orientation; import java.io.IOException; /** * This application creates a paper like folding effect of some view. * The number of folds, orientation (vertical or horizontal) of the fold, and the * anchor point about which the view will fold can be set to achieve different * folding effects. * * Using bitmap and canvas scaling techniques, the foldingLayout can be scaled so as * to depict a paper-like folding effect. The addition of shadows on the separate folds * adds a sense of realism to the visual effect. * * This application shows folding of a TextureView containing a live camera feed, * as well as the folding of an ImageView with a static image. The TextureView experiences * jagged edges as a result of scaling operations on rectangles. The ImageView however * contains a 1 pixel transparent border around its contents which can be used to avoid * this unwanted artifact. */ public class FoldingLayoutActivity extends Activity { private final int ANTIALIAS_PADDING = 1; private final int FOLD_ANIMATION_DURATION = 1000; /* A bug was introduced in Android 4.3 that ignores changes to the Canvas state * between multiple calls to super.dispatchDraw() when running with hardware acceleration. * To account for this bug, a slightly different approach was taken to fold a * static image whereby a bitmap of the original contents is captured and drawn * in segments onto the canvas. However, this method does not permit the folding * of a TextureView hosting a live camera feed which continuously updates. * Furthermore, the sepia effect was removed from the bitmap variation of the * demo to simplify the logic when running with this workaround." */ static final boolean IS_JBMR2 = Build.VERSION.SDK_INT == Build.VERSION_CODES.JELLY_BEAN_MR2; private FoldingLayout mFoldLayout; private SeekBar mAnchorSeekBar; private Orientation mOrientation = Orientation.HORIZONTAL; private int mTranslation = 0; private int mNumberOfFolds = 2; private int mParentPositionY = -1; private int mTouchSlop = -1; private float mAnchorFactor = 0; private boolean mDidLoadSpinner = true; private boolean mDidNotStartScroll = true; private boolean mIsCameraFeed = false; private boolean mIsSepiaOn = true; private GestureDetector mScrollGestureDetector; private ItemSelectedListener mItemSelectedListener; private Camera mCamera; private TextureView mTextureView; private ImageView mImageView; private Paint mSepiaPaint; private Paint mDefaultPaint; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fold); mImageView = (ImageView)findViewById(R.id.image_view); mImageView.setPadding(ANTIALIAS_PADDING, ANTIALIAS_PADDING, ANTIALIAS_PADDING, ANTIALIAS_PADDING); mImageView.setScaleType(ImageView.ScaleType.FIT_XY); mImageView.setImageDrawable(getResources().getDrawable(R.drawable.image)); mTextureView = new TextureView(this); mTextureView.setSurfaceTextureListener(mSurfaceTextureListener); mAnchorSeekBar = (SeekBar)findViewById(R.id.anchor_seek_bar); mFoldLayout = (FoldingLayout)findViewById(R.id.fold_view); mFoldLayout.setBackgroundColor(Color.BLACK); mFoldLayout.setFoldListener(mOnFoldListener); mTouchSlop = ViewConfiguration.get(this).getScaledTouchSlop(); mAnchorSeekBar.setOnSeekBarChangeListener(mSeekBarChangeListener); mScrollGestureDetector = new GestureDetector(this, new ScrollGestureDetector()); mItemSelectedListener = new ItemSelectedListener(); mDefaultPaint = new Paint(); mSepiaPaint = new Paint(); ColorMatrix m1 = new ColorMatrix(); ColorMatrix m2 = new ColorMatrix(); m1.setSaturation(0); m2.setScale(1f, .95f, .82f, 1.0f); m1.setConcat(m2, m1); mSepiaPaint.setColorFilter(new ColorMatrixColorFilter(m1)); } /** * This listener, along with the setSepiaLayer method below, show a possible use case * of the OnFoldListener provided with the FoldingLayout. This is a fun extra addition * to the demo showing what kind of visual effects can be applied to the child of the * FoldingLayout by setting the layer type to hardware. With a hardware layer type * applied to the child, a paint object can also be applied to the same layer. Using * the concatenation of two different color matrices (above), a color filter was created * which simulates a sepia effect on the layer.*/ private OnFoldListener mOnFoldListener = new OnFoldListener() { @Override public void onStartFold() { if (mIsSepiaOn) { setSepiaLayer(mFoldLayout.getChildAt(0), true); } } @Override public void onEndFold() { setSepiaLayer(mFoldLayout.getChildAt(0), false); } }; private void setSepiaLayer (View view, boolean isSepiaLayerOn) { if (!IS_JBMR2) { if (isSepiaLayerOn) { view.setLayerType(View.LAYER_TYPE_HARDWARE, null); view.setLayerPaint(mSepiaPaint); } else { view.setLayerPaint(mDefaultPaint); } } } /** * Creates a SurfaceTextureListener in order to prepare a TextureView * which displays a live, and continuously updated, feed from the Camera. */ private TextureView.SurfaceTextureListener mSurfaceTextureListener = new TextureView .SurfaceTextureListener() { @Override public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int i, int i2) { mCamera = Camera.open(); if (mCamera == null && Camera.getNumberOfCameras() > 1) { mCamera = mCamera.open(Camera.CameraInfo.CAMERA_FACING_FRONT); } if (mCamera == null) { return; } try { mCamera.setPreviewTexture(surfaceTexture); mCamera.setDisplayOrientation(90); mCamera.startPreview(); } catch (IOException e) { e.printStackTrace(); } } @Override public void onSurfaceTextureSizeChanged(SurfaceTexture surfaceTexture, int i, int i2) { // Ignored, Camera does all the work for us } @Override public boolean onSurfaceTextureDestroyed(SurfaceTexture surfaceTexture) { if (mCamera != null) { mCamera.stopPreview(); mCamera.release(); } return true; } @Override public void onSurfaceTextureUpdated(SurfaceTexture surfaceTexture) { // Invoked every time there's a new Camera preview frame } }; /** * A listener for scrolling changes in the seekbar. The anchor point of the folding * view is updated every time the seekbar stops tracking touch events. Every time the * anchor point is updated, the folding view is restored to a default unfolded state. */ private SeekBar.OnSeekBarChangeListener mSeekBarChangeListener = new SeekBar .OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int i, boolean b) { } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { mTranslation = 0; mAnchorFactor = ((float)mAnchorSeekBar.getProgress())/100.0f; mFoldLayout.setAnchorFactor(mAnchorFactor); } }; @Override public boolean onCreateOptionsMenu(Menu menu) { if (IS_JBMR2) { getMenuInflater().inflate(R.menu.fold_with_bug, menu); } else { getMenuInflater().inflate(R.menu.fold, menu); } Spinner s = (Spinner) menu.findItem(R.id.num_of_folds).getActionView(); s.setOnItemSelectedListener(mItemSelectedListener); return true; } @Override public void onWindowFocusChanged (boolean hasFocus) { super.onWindowFocusChanged(hasFocus); int[] loc = new int[2]; mFoldLayout.getLocationOnScreen(loc); mParentPositionY = loc[1]; } @Override public boolean onTouchEvent(MotionEvent me) { return mScrollGestureDetector.onTouchEvent(me); } @Override public boolean onOptionsItemSelected (MenuItem item) { switch(item.getItemId()) { case R.id.animate_fold: animateFold(); break; case R.id.toggle_orientation: mOrientation = (mOrientation == Orientation.HORIZONTAL) ? Orientation.VERTICAL : Orientation.HORIZONTAL; item.setTitle((mOrientation == Orientation.HORIZONTAL) ? R.string.vertical : R.string.horizontal); mTranslation = 0; mFoldLayout.setOrientation(mOrientation); break; case R.id.camera_feed: mIsCameraFeed = !mIsCameraFeed; item.setTitle(mIsCameraFeed ? R.string.static_image : R.string.camera_feed); item.setChecked(mIsCameraFeed); if (mIsCameraFeed) { mFoldLayout.removeView(mImageView); mFoldLayout.addView(mTextureView, new ViewGroup.LayoutParams( mFoldLayout.getWidth(), mFoldLayout.getHeight())); } else { mFoldLayout.removeView(mTextureView); mFoldLayout.addView(mImageView, new ViewGroup.LayoutParams( mFoldLayout.getWidth(), mFoldLayout.getHeight())); } mTranslation = 0; break; case R.id.sepia: mIsSepiaOn = !mIsSepiaOn; item.setChecked(!mIsSepiaOn); if (mIsSepiaOn && mFoldLayout.getFoldFactor() != 0) { setSepiaLayer(mFoldLayout.getChildAt(0), true); } else { setSepiaLayer(mFoldLayout.getChildAt(0), false); } break; default: break; } return super.onOptionsItemSelected(item); } /** * Animates the folding view inwards (to a completely folded state) from its * current state and then back out to its original state. */ public void animateFold () { float foldFactor = mFoldLayout.getFoldFactor(); ObjectAnimator animator = ObjectAnimator.ofFloat(mFoldLayout, "foldFactor", foldFactor, 1); animator.setRepeatMode(ValueAnimator.REVERSE); animator.setRepeatCount(1); animator.setDuration(FOLD_ANIMATION_DURATION); animator.setInterpolator(new AccelerateInterpolator()); animator.start(); } /** * Listens for selection events of the spinner located on the action bar. Every * time a new value is selected, the number of folds in the folding view is updated * and is also restored to a default unfolded state. */ private class ItemSelectedListener implements OnItemSelectedListener { @Override public void onItemSelected(AdapterView parent, View view, int pos, long id) { mNumberOfFolds = Integer.parseInt(parent.getItemAtPosition(pos).toString()); if (mDidLoadSpinner) { mDidLoadSpinner = false; } else { mTranslation = 0; mFoldLayout.setNumberOfFolds(mNumberOfFolds); } } @Override public void onNothingSelected(AdapterView arg0) { } } /** This class uses user touch events to fold and unfold the folding view. */ private class ScrollGestureDetector extends GestureDetector.SimpleOnGestureListener { @Override public boolean onDown (MotionEvent e) { mDidNotStartScroll = true; return true; } /** * All the logic here is used to determine by what factor the paper view should * be folded in response to the user's touch events. The logic here uses vertical * scrolling to fold a vertically oriented view and horizontal scrolling to fold * a horizontally oriented fold. Depending on where the anchor point of the fold is, * movements towards or away from the anchor point will either fold or unfold * the paper respectively. * * The translation logic here also accounts for the touch slop when a new user touch * begins, but before a scroll event is first invoked. */ @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { int touchSlop = 0; float factor; if (mOrientation == Orientation.VERTICAL) { factor = Math.abs((float)(mTranslation) / (float)(mFoldLayout.getHeight())); if (e2.getY() - mParentPositionY <= mFoldLayout.getHeight() && e2.getY() - mParentPositionY >= 0) { if ((e2.getY() - mParentPositionY) > mFoldLayout.getHeight() * mAnchorFactor) { mTranslation -= (int)distanceY; touchSlop = distanceY < 0 ? -mTouchSlop : mTouchSlop; } else { mTranslation += (int)distanceY; touchSlop = distanceY < 0 ? mTouchSlop : -mTouchSlop; } mTranslation = mDidNotStartScroll ? mTranslation + touchSlop : mTranslation; if (mTranslation < -mFoldLayout.getHeight()) { mTranslation = -mFoldLayout.getHeight(); } } } else { factor = Math.abs(((float)mTranslation) / ((float) mFoldLayout.getWidth())); if (e2.getRawX() > mFoldLayout.getWidth() * mAnchorFactor) { mTranslation -= (int)distanceX; touchSlop = distanceX < 0 ? -mTouchSlop : mTouchSlop; } else { mTranslation += (int)distanceX; touchSlop = distanceX < 0 ? mTouchSlop : -mTouchSlop; } mTranslation = mDidNotStartScroll ? mTranslation + touchSlop : mTranslation; if (mTranslation < -mFoldLayout.getWidth()) { mTranslation = -mFoldLayout.getWidth(); } } mDidNotStartScroll = false; if (mTranslation > 0) { mTranslation = 0; } mFoldLayout.setFoldFactor(factor); return true; } } }