hollorol/Clockplus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translate FAB when scrolling between stopwatch page

Browse Source
This commit is contained in:
Phillip Hsu 2016-08-13 23:15:26 -07:00
parent 7dfda796f3
commit 15afc01735
5 changed files with 170 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/src/main/java/com/philliphsu/clock2/MainActivity.java
View File

@ -1,6 +1,7 @@
package com.philliphsu.clock2;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.support.design.widget.FloatingActionButton;
@ -57,12 +58,63 @@ public class MainActivity extends BaseActivity {
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mSectionsPagerAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
/**
* @param position Either the current page position if the offset is increasing,
* or the previous page position if it is decreasing.
* @param positionOffset If increasing from [0, 1), scrolling right and position = currentPagePosition
* If decreasing from (1, 0], scrolling left and position = (currentPagePosition - 1)
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Log.d(TAG, String.format("pos = %d, posOffset = %f, posOffsetPixels = %d",
// position, positionOffset, positionOffsetPixels));
int pageBeforeLast = mSectionsPagerAdapter.getCount() - 2;
if (position <= pageBeforeLast) {
if (position < pageBeforeLast) {
// When the scrolling is due to tab selection between multiple tabs apart,
// this callback is called for each intermediate page, but each of those pages
// will briefly register a sparsely decreasing range of positionOffsets, always
// from (1, 0). As such, you would notice the FAB to jump back and forth between
// x-positions as each intermediate page is scrolled through.
// This is a visual optimization that ends the translation motion, immediately
// returning the FAB to its target position.
mFab.setTranslationX(0);
} else {
// Initially, the FAB's translationX property is zero because, at its original
// position, it is not translated. setTranslationX() is relative to the view's
// left position, at its original position; this left position is taken to be
// the zero point of the coordinate system relative to this view. As your
// translationX value is increasingly negative, the view is translated left.
// But as translationX is decreasingly negative and down to zero, the view
// is translated right, back to its original position.
float translationX = positionOffsetPixels / -2f;
// NOTE: You MUST scale your own additional pixel offsets by positionOffset,
// or else the FAB will immediately translate by that many pixels, causing
// jitter as you scroll.
final int margin;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Since each side's margin is the same, any side's would do.
margin = ((ViewGroup.MarginLayoutParams) mFab.getLayoutParams()).rightMargin;
} else {
// Pre-Lollipop has measurement issues with FAB margins. This is
// probably as good as we can get to centering the FAB, without
// hardcoding some small margin value.
margin = 0;
}
// Translation is done relative to a view's left position; by adding
// an offset of half the FAB's width, we effectively rebase the translation
// relative to the view's center position.
translationX += positionOffset * (mFab.getWidth() / 2f + margin);
mFab.setTranslationX(translationX);
}
}
}
@Override
public void onPageSelected(int position) {
if (position == mSectionsPagerAdapter.getCount() - 1) {
mFab.hide();
} else {
mFab.show();
if (position < mSectionsPagerAdapter.getCount() - 1) {
// TODO: Plus icon. Consider caching the Drawable in a member variable.
mFab.setImageResource(android.R.drawable.ic_dialog_email);
}
}
// @Override

122
app/src/main/java/com/philliphsu/clock2/stopwatch/StopwatchFragment.java
View File

@ -12,13 +12,14 @@ import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.ProgressBar;
import com.philliphsu.clock2.R;
import com.philliphsu.clock2.RecyclerViewFragment;
import com.philliphsu.clock2.util.ProgressBarUtils;
import java.lang.ref.WeakReference;
import butterknife.Bind;
import butterknife.OnClick;
@ -43,11 +44,11 @@ public class StopwatchFragment extends RecyclerViewFragment<
private AsyncLapsTableUpdateHandler mUpdateHandler;
private ObjectAnimator mProgressAnimator;
private SharedPreferences mPrefs;
private WeakReference<FloatingActionButton> mActivityFab;
@Bind(R.id.chronometer) ChronometerWithMillis mChronometer;
@Bind(R.id.new_lap) ImageButton mNewLapButton;
@Bind(R.id.fab) FloatingActionButton mFab;
@Bind(R.id.stop) ImageButton mStopButton;
@Bind(R.id.new_lap) FloatingActionButton mNewLapButton;
@Bind(R.id.stop) FloatingActionButton mStopButton;
@Bind(R.id.progress_bar) ProgressBar mProgressBar;
/**
@ -62,6 +63,8 @@ public class StopwatchFragment extends RecyclerViewFragment<
mPrefs = PreferenceManager.getDefaultSharedPreferences(getActivity());
mStartTime = mPrefs.getLong(KEY_START_TIME, 0);
mPauseTime = mPrefs.getLong(KEY_PAUSE_TIME, 0);
// TODO: Any better solutions?
mActivityFab = new WeakReference<>((FloatingActionButton) getActivity().findViewById(R.id.fab));
Log.d(TAG, "mStartTime = " + mStartTime
+ ", mPauseTime = " + mPauseTime);
}
@ -82,6 +85,8 @@ public class StopwatchFragment extends RecyclerViewFragment<
if (mPrefs.getBoolean(KEY_CHRONOMETER_RUNNING, false)) {
mChronometer.start();
}
// Hides the mini fabs prematurely, so when we actually select this tab
// they don't show at all before hiding.
updateButtonControls();
return view;
}
@ -138,45 +143,8 @@ public class StopwatchFragment extends RecyclerViewFragment<
}
}
@Nullable
@Override
protected LapsAdapter getAdapter() {
if (super.getAdapter() != null)
return super.getAdapter();
return new LapsAdapter();
}
@Override
protected int contentLayout() {
return R.layout.fragment_stopwatch;
}
@OnClick(R.id.new_lap)
void addNewLap() {
if (!mChronometer.isRunning()) {
Log.d(TAG, "Cannot add new lap");
return;
}
if (mCurrentLap != null) {
mCurrentLap.end(mChronometer.getText().toString());
}
mPreviousLap = mCurrentLap;
mCurrentLap = new Lap();
if (mPreviousLap != null) {
// if (getAdapter().getItemCount() == 0) {
// mUpdateHandler.asyncInsert(mPreviousLap);
// } else {
mUpdateHandler.asyncUpdate(mPreviousLap.getId(), mPreviousLap);
// }
}
mUpdateHandler.asyncInsert(mCurrentLap);
// This would end up being called twice: here, and in onLoadFinished(), because the
// table updates will prompt us to requery.
// startNewProgressBarAnimator();
}
@OnClick(R.id.fab)
void startPause() {
public void onFabClick() {
if (mChronometer.isRunning()) {
mPauseTime = SystemClock.elapsedRealtime();
mChronometer.stop();
@ -221,6 +189,65 @@ public class StopwatchFragment extends RecyclerViewFragment<
savePrefs();
}
@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
// We get called multiple times, even when we're not yet visible.
// This can be called before onCreateView() so widgets could be null, esp. if you had
// navigated more than one page away before returning here. That means onDestroyView()
// was called previously.
// We will get called again when we actually have this page selected, and by that time
// onCreateView() will have been called. Wait until we're resumed to call through.
if (isVisibleToUser && isResumed()) {
// At this point, the only thing this does is change the fab icon
// TODO: allow duplicate code and manipulate the fab icon directly?
// TODO: There is noticeable latency between showing this tab and
// changing the icon. Consider writing a callback for this Fragment
// that MainActivity can call in its onPageChangeListener. We don't merely
// want to call such a callback in onPageSelected, because that is fired
// when we reach an idle state, so we'd experience the same latency issue.
// Rather, we should animate the icon change during onPageScrolled.
updateButtonControls();
}
}
@Nullable
@Override
protected LapsAdapter getAdapter() {
if (super.getAdapter() != null)
return super.getAdapter();
return new LapsAdapter();
}
@Override
protected int contentLayout() {
return R.layout.fragment_stopwatch;
}
@OnClick(R.id.new_lap)
void addNewLap() {
if (!mChronometer.isRunning()) {
Log.d(TAG, "Cannot add new lap");
return;
}
if (mCurrentLap != null) {
mCurrentLap.end(mChronometer.getText().toString());
}
mPreviousLap = mCurrentLap;
mCurrentLap = new Lap();
if (mPreviousLap != null) {
// if (getAdapter().getItemCount() == 0) {
// mUpdateHandler.asyncInsert(mPreviousLap);
// } else {
mUpdateHandler.asyncUpdate(mPreviousLap.getId(), mPreviousLap);
// }
}
mUpdateHandler.asyncInsert(mCurrentLap);
// This would end up being called twice: here, and in onLoadFinished(), because the
// table updates will prompt us to requery.
// startNewProgressBarAnimator();
}
@OnClick(R.id.stop)
void stop() {
mChronometer.stop();
@ -246,8 +273,10 @@ public class StopwatchFragment extends RecyclerViewFragment<
int vis = started ? View.VISIBLE : View.INVISIBLE;
mNewLapButton.setVisibility(vis);
mStopButton.setVisibility(vis);
// TODO: pause and start icon, resp.
mFab.setImageResource(mChronometer.isRunning() ? 0 : 0);
if (isVisible()) { // avoid changing the icon prematurely, esp. when we're not on this tab
// TODO: pause and start icon, resp.
mActivityFab.get().setImageResource(mChronometer.isRunning() ? 0 : 0);
}
}
private void startNewProgressBarAnimator() {
@ -273,11 +302,6 @@ public class StopwatchFragment extends RecyclerViewFragment<
// ======================= DO NOT IMPLEMENT ============================
@Override
public void onFabClick() {
// DO NOT THROW AN UNSUPPORTED OPERATION EXCEPTION.
}
@Override
protected void onScrolledToStableId(long id, int position) {
throw new UnsupportedOperationException();

69
app/src/main/res/layout-v21/fragment_stopwatch.xml
View File

@ -1,69 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/top_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="16dp">
<com.philliphsu.clock2.stopwatch.ChronometerWithMillis
android:id="@+id/chronometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textSize="45sp"
style="@style/TextAppearance.AppCompat.Inverse"
android:layout_marginBottom="16dp"/>
<ImageButton
android:id="@+id/new_lap"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?selectableItemBackground"
android:layout_below="@id/chronometer"
android:layout_alignParentStart="true"
android:src="@drawable/ic_half_day_1_black_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/chronometer"
android:layout_centerInParent="true"/>
<ImageButton
android:id="@+id/stop"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?selectableItemBackground"
android:layout_below="@id/chronometer"
android:layout_alignParentEnd="true"
android:src="@drawable/ic_half_day_1_black_24dp"/>
</RelativeLayout>
<!-- RecyclerView -->
<include layout="@layout/fragment_recycler_view"/>
</LinearLayout>
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/top_panel"
app:layout_anchorGravity="bottom"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
</android.support.design.widget.CoordinatorLayout>

4
app/src/main/res/layout/activity_main.xml
View File

@ -43,7 +43,7 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"/>
android:src="@android:drawable/ic_dialog_email"
android:layout_margin="@dimen/fab_margin"/>
</android.support.design.widget.CoordinatorLayout>

85
app/src/main/res/layout/fragment_stopwatch.xml
View File

@ -9,54 +9,16 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/top_panel"
<com.philliphsu.clock2.stopwatch.ChronometerWithMillis
android:id="@+id/chronometer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
android:background="@color/colorPrimary"
android:padding="16dp">
<com.philliphsu.clock2.stopwatch.ChronometerWithMillis
android:id="@+id/chronometer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="45sp"
style="@style/TextAppearance.AppCompat.Inverse"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="@+id/new_lap"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?selectableItemBackground"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_half_day_1_black_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<ImageButton
android:id="@+id/stop"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?selectableItemBackground"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="@drawable/ic_half_day_1_black_24dp"/>
</RelativeLayout>
</LinearLayout>
android:gravity="center_horizontal"
android:textSize="@dimen/text_size_display_3"
style="@style/TextAppearance.AppCompat.Inverse"/>
<!-- RecyclerView -->
<include layout="@layout/fragment_recycler_view"/>
@ -67,8 +29,39 @@
android:id="@+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/top_panel"
app:layout_anchor="@id/chronometer"
app:layout_anchorGravity="bottom"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
<!-- TODO: dimen resource for height -->
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_gravity="bottom"
app:columnCount="2">
<android.support.design.widget.FloatingActionButton
android:id="@+id/new_lap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_half_day_1_black_24dp"
android:tint="@android:color/darker_gray"
app:layout_columnWeight="1"
app:layout_gravity="center"
app:fabSize="mini"
app:backgroundTint="@android:color/white"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_half_day_1_black_24dp"
android:tint="@android:color/darker_gray"
app:layout_columnWeight="1"
app:layout_gravity="center"
app:fabSize="mini"
app:backgroundTint="@android:color/white"/>
</android.support.v7.widget.GridLayout>
</android.support.design.widget.CoordinatorLayout>