DroidKaigi 2018 2/8 Room2
2018.2.8࣮ྫͰཧղ͢ΔMaterial Design AnimationDroidKaigi 2018 Room2 Feb 8th, 2018Ryo Sakaguchi (wakwak3125)
View Slide
2018.2.8Ryo Sakaguchi@wakwak3125• Wantedly, Inc• Android application developer• Wantedly People• Music, Guitar, UI/UXAbout me
2018.2.8Wantedly People
2018.2.8Wantedly People• ໊ཧΞϓϦ• ػցֶशΛ༻͍ͯ͠Δ• ಡΈऔ໊ͬͨɺࣗͷใΛݩʹʮʯΛఏڙ͢Δ• ؾ໊͍͍࣋ͪࡱӨମݧ
2018.2.8Agenda
2018.2.8Agenda• ʮʯػೳͷΞχϝʔγϣϯͷհ• ࣮ͷղઆ• Ξχϝʔγϣϯ࣮ͷצॴ• ΞχϝʔγϣϯͷDebug
2018.2.8ʮʯػೳͷΞχϝʔγϣϯհ
2018.2.8ArticleͷهࣄΛදࣔ͢Δը໘• ৴͞ΕΔΛදࣔ͢Δը໘• Ϣʔβʔʹରͯͯ͠͠΄͍͠ʮը૾ʯΛ࣠ʹΞχϝʔγϣϯ͢Δɻ• RecyclerViewʹΧʔυܕͷΞΠςϜΛฒɺͦΕ͕Expand͢ΔΠϝʔδ• ΧʔυഎܠˠΧόʔΠϝʔδ• هࣄͷ֓ཁ/λΠτϧͷίϯςΩετΛڞ༗Ͱ͖ΔʮʯػೳͷΞχϝʔγϣϯհ Article
2018.2.8Graphic contentsΠϯϑΥάϥϑΟοΫ• ΠϯϑΥάϥϑΟοΫ͕ϝΠϯͷهࣄΛදࣔ͢Δ• ίϯςϯπࣗମAfterEffectsΛ༻ͯ͠࡞͠ɺbodymovinΛ༻ͯ͠WebViewͰ࠶ੜ͍ͯ͠Δ• Χʔυͷഎܠը૾͕શ໘ʹ͕͍ͬͯ͘• ΧʔυˠهࣄৄࡉͷભҠͰੈք؍ΛଛͳΘͳ͍ʮʯػೳͷΞχϝʔγϣϯհ Graphic contents
2018.2.8Timelineهࣄ͕දࣔ͞ΕΔTimeline• هࣄΛҰཡͰදࣔ͢ΔRecyclerView• Χʔυ͕എܠը૾Λ࣋ͭλΠϓͱ࣋ͨͳ͍λΠϓ͕͋Δ• എܠը૾Λ࣋ͭλΠϓͷͷͷ߹ɺTimelineͷഎܠશମʹϒϥʔ͕͔͔ͬͨͷ͕هࣄͷग़ݱͱڞʹΫϩεϑΣʔυ͢Δ• ࠓճϝΠϯͰΛ͢ΔͭΓͷɺSharedElementTransitionͱҧ͏͚ͲɺҰԠհʮʯػೳͷΞχϝʔγϣϯհ Timeline
2018.2.8ΞχϝʔγϣϯͬͯͳΜͰඞཁͳͷʁ
2018.2.8͔͍͍͔ͬ͜Β
2018.2.8͔͍͍͔ͬ͜Βʁ͚ͩ͡Όͳ͍Ͱ͢• ΞχϝʔγϣϯʹΑͬͯɺϢʔβʔʹͯ͠΄͍͠ͷΛΞϐʔϧͰ͖Δ• ͍ͬͯͯɺಥવίϯςϯπ͕ೖΕସΘͬͨ෩ʹײͯ͡͠·͏ϢʔβʔډΔͣɻ• Βͳ͍ΑΓͬͨ΄͏͕ઈରྑ͍• Γ͗͢ྑ͘ͳ͍ɻ͚Ͳɺ·ͣ࡞͔ͬͯΒ͍ͬͯ͘ͷ͕େࣄ• ͪΖΜ͔͍͍ͬͬͯ͜ͷ͋ΔʂΞχϝʔγϣϯͬͯͳΜͰඞཁͳͷʁ
2018.2.8࣮ͷղઆ
2018.2.8࣮ͷղઆ• Shared Element Transitionͷجຊͷ͓͞Β͍• ֤ػೳ(Article/Graphic contents)ʹґଘ͠ͳ͍෦ͷڞ௨࣮ͷ• ֤ػೳຖʹߦ͍ͬͯΔಛผͳ෦ͷ• Article• Graphic content
2018.2.8·ͣجຊͷ͓͞Β͍
2018.2.8Transition Name 1/3ڞ༗͍ͨ͠Viewʹ໊લΛ͚ͭΔ·ͣجຊͷ͓͞Β͍ Shared Element Transitionpublic class MainActivity extends AppCompatActivity {ActivityMainBinding binding;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = DataBindingUtil.setContentView(this,R.layout.activity_main);binding.button.setOnClickListener(v -> goToNextActivity());}void goToNextActivity() {Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this, /*ભҠݩͷActivity*/binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/
2018.2.8@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = DataBindingUtil.setContentView(this,R.layout.activity_main);binding.button.setOnClickListener(v -> goToNextActivity());}Transition Name 2/3TransitionʹඞཁͳใΛBundleʹ٧Ίͯ͢·ͣجຊͷ͓͞Β͍ Shared Element Transitionvoid goToNextActivity() {Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this, /*ભҠݩͷActivity*/binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/"transition:image" /*ڞ༗͍ͨ͠ViewͷTransition Name*/).toBundle();ActivityCompat.startActivity(this,new Intent(this, NextActivity.class),bundle);}
2018.2.8Transition Name 3/3ભҠઌͷActivityͷڞ༗͍ͨ͠ViewʹTransition NameΛηοτ͢Δ·ͣجຊͷ͓͞Β͍ Shared Element Transitionthis, /*ભҠݩͷActivity*/binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/"transition:image" /*ڞ༗͍ͨ͠ViewͷTransition Name*/).toBundle();ActivityCompat.startActivity(this,new Intent(this, NextActivity.class),bundle);}public class NextActivity extends AppCompatActivity {ActivityNextBinding binding;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = DataBindingUtil.setContentView(this,R.layout.activity_next);binding.imageView.setTransitionName("transition:image");}}
2018.2.8
2018.2.8Default animationtheme_material.xmlͰ σϑΥϧτͰҎԼͷΞχϝʔγϣϯ͕ηοτ͞Ε͍ͯΔ·ͣجຊͷ͓͞Β͍ Shared Element Transitionmove.xml
2018.2.8Postpone TransitionTransition animationΛҙͷλΠϛϯάͰ։࢝Ͱ͖Δ·ͣجຊͷ͓͞Β͍ Shared Element Transitionpublic class NextActivity extends AppCompatActivity {static final Handler sHandler = new Handler(Looper.getMainLooper());ActivityNextBinding binding;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = DataBindingUtil.setContentView(this,R.layout.activity_next);binding.imageView.setTransitionName("transition:image");ActivityCompat.postponeEnterTransition(this);sHandler.postDelayed(() ->ActivityCompat.startPostponedEnterTransition(this),1000);}}
2018.2.8࣮ͷղઆWantedly PeopleͰ͍ͬͯΔShared Element Transitionͷڞ௨ͳ෦
2018.2.8࣮ͷղઆ ڞ௨ͷ෦.BJO"DUJWJUZ
2018.2.8࣮ͷղઆ ڞ௨ͷ෦.BJO"DUJWJUZ5JNFMJOF'SBHNFOU
2018.2.8࣮ͷղઆ ڞ௨ͷ෦.BJO"DUJWJUZ5JNFMJOF'SBHNFOU1PTU"SUJDMF"DUJWJZ
2018.2.8࣮ͷղઆ ڞ௨ͷ෦.BJO"DUJWJUZ5JNFMJOF'SBHNFOU1PTU"SUJDMF"DUJWJZ1PTU"SUJDMF'SBHNFOU
2018.2.8͔͜͜ΒϓϩμΫγϣϯίʔυ͍Ζ͍Ζͳྺ࢙తͳഎܠͰग़དྷ্͕ͬͯ·͢ɻࠓେʹݟͯ΄͍͠ʂPage Title Page Subtitle
2018.2.8TimelineFragment͜ͷFragment͔ΒTransitionΛ։࢝͢Δ/*** @param fragment ભҠݩͷFragment* @param postKey هࣄͷKey* @param provider TransitionʹඞཁͳViewΛViewHolder͔Βऔͬͯ͘Δ* adapterΛ࣋ͭ*/public void openPost(BaseFragment fragment,String postKey,PostLogic.ITransitionAdapterProvider provider) {PostArticleFragment nextFragment =PostArticleFragment.newInstance(postKey);TransitionExtra extra = new TransitionExtra.Builder().build();࣮ͷղઆ ڞ௨ͷ෦// ରͱͳΔViewͱTransition nameͷPairͷListΛ࡞ΔList> pairList = new ArrayList<>();if (provider != null) {PostLogic.TransitionAdapter adapter =provider.getTransitionAdapter();// Viewʹରͯ͠ Transition nameΛ༩͍͑ͯ͘
2018.2.8TimelineFragment͜ͷFragment͔ΒTransitionΛ։࢝͢Δ* @param provider TransitionʹඞཁͳViewΛViewHolder͔Βऔͬͯ͘Δ* adapterΛ࣋ͭ*/public void openPost(BaseFragment fragment,String postKey,PostLogic.ITransitionAdapterProvider provider) {PostArticleFragment nextFragment =PostArticleFragment.newInstance(postKey);TransitionExtra extra = new TransitionExtra.Builder().build();࣮ͷղઆ ڞ௨ͷ෦// ରͱͳΔViewͱTransition nameͷPairͷListΛ࡞ΔList> pairList = new ArrayList<>();if (provider != null) {PostLogic.TransitionAdapter adapter =provider.getTransitionAdapter();// Viewʹରͯ͠ Transition nameΛ༩͍͑ͯ͘pairList.add(Pair.create(adapter.getCoverImage(),fragment.getString(R.string.transition_image_cover)));// ଞʹView͕͋Ε͜͜Ͱηοτ͍ͯ͘͠...}//TransitionExtraʹpairListΛ͢extra.setSharedElementPair(pairList);// BaseFragment͕ը໘ભҠΛߦ͏ؔΛ͍࣋ͬͯΔͷͰͦΕΛݺͼग़͢fragment.replaceFragment(nextFragment, extra);
2018.2.8BaseFragmentreplaceFragment࣮ͷղઆ ڞ௨ͷ෦public void replaceFragment(@NonNull BaseFragment fragment,@Nullable TransitionExtra extra) {// BaseActivity͕listenerΛ࣮͍ͯ͠ΔͷͦͪΒʹϦϨʔ͢ΔgetListener().replaceFragment(fragment, extra);}
2018.2.8BaseActivityreplaceFragment࣮ͷղઆ ڞ௨ͷ෦@Overridepublic void replaceFragment(BaseFragment fragment,@Nullable TransitionExtra extra) {if (extra != null) {Intent intent = PostArticleActivity.createIntent(this);Pair[] sharedElements;if (!isEmpty(extra.getSharedElementPair())) {sharedElements =new Pair[extra.getSharedElementPair().size()];for (int i = 0; i < extra.getSharedElementPair().size(); i++) {Pair pair =extra.getSharedElementPair().get(i);if (pair.first != null && pair.second != null) {sharedElements[i] = pair;}}} else {sharedElements = new Pair[0];}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {ActivityOptionsCompat options =
2018.2.8BaseActivityreplaceFragment࣮ͷղઆ ڞ௨ͷ෦new Pair[extra.getSharedElementPair().size()];for (int i = 0; i < extra.getSharedElementPair().size(); i++) {Pair pair =extra.getSharedElementPair().get(i);if (pair.first != null && pair.second != null) {sharedElements[i] = pair;}}} else {sharedElements = new Pair[0];}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {ActivityOptionsCompat options =ActivityOptionsCompat.makeSceneTransitionAnimation(this,sharedElements);ActivityCompat.startActivity(this, intent, options.toBundle());} else {startActivity(intent);}} else {/*͔͜͜ΒFragmentͰ։͘߹ͷॲཧ*/}
2018.2.8PostArticleActivityTransitionΛҰ࣌ఀࢭ͢Δ࣮ͷղઆ ڞ௨ͷ෦@Overrideprotected void onCreate(Bundle savedInstanceState) {// ৭ʑͳॳظԽͷॲཧΛ͢Δ// FragmentͷView͕ग़དྷ্͕Δ·ͰɺTransitionΛҰ࣌ఀࢭ͢Δ// ࠶։Fragmentଆ͔ΒݺΜͰ͋͛ΔsupportPostponeEnterTransition();}
2018.2.8PostArticleActivityҎԼͷTransitionSet͕ద༻͞Ε͍ͯΔxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:duration="250"android:transitionOrdering="together">android:interpolator="@anim/interpolator_transition" />android:interpolator="@anim/interpolator_transition" />android:interpolator="@anim/interpolator_transition" />࣮ͷղઆ ڞ௨ͷ෦
2018.2.8࣮ͷղઆArticle
2018.2.8ArticleTransition։࢝લ࣮ͷղઆ Article• CardView• ImageView(Mark Zuckerberg)• ߘऀΛදࣔ͢ΔϨΠΞτ• Title• ͍͍ͶίϝϯτϘλϯͷϨΠΞτ
2018.2.8ArticleTransition։࢝ޙং൫࣮ͷղઆ Article• CardView• ImageView(Mark Zuckerberg)• ߘऀΛදࣔ͢ΔϨΠΞτ• Title• ͍͍ͶίϝϯτϘλϯͷϨΠΞτ• CardViewͷSharedElementͱͯ͠ஔ͍ͯͨ͠ന͍͚ͩͷFrameLayout
2018.2.8ArticleTransition։࢝ޙऴ൫࣮ͷղઆ Article• CardView• ImageView(Mark Zuckerberg)• ߘऀΛදࣔ͢ΔϨΠΞτ• Title• ͍͍ͶίϝϯτϘλϯͷϨΠΞτ• CardViewͷSharedElementͱͯ͠ஔ͍ͯͨ͠ന͍͚ͩͷFrameLayout
2018.2.8ArticleShared Elements࣮ͷղઆ Article5JNFMJOF'SBNFOU 1PTU"SUJDMF'SBHNFOU7JFX %FTDSJQUJPO 7JFX %FTDSJQUJPO*NBHF7JFX Χʔυഎܠ *NBHF7JFX ΧόʔΠϝʔδ$BSE7JFX Χʔυ 'SBNF-BZPVU μϛʔͷഎܠ-JOFBS-BZPVU ߘऀͷϨΠΞτ -JOFBS-BZPVU ߘऀͷϨΠΞτ5FYU7JFX λΠτϧ 5FYU7JFX λΠτϧ5FYU7JFX ϝσΟΞ 5FYU7JFX ϝσΟΞ$POTUSBJOU-BZPVU ίϝϯτϘλϯͳͲ $POTUSBJOU-BZPVU ίϝϯτϘλϯͳͲ
2018.2.8PostArticleFragmentϨΠΞτߏandroid:id="@+id/content_root">࣮ͷղઆ Articlefragment_post_article.xmlandroid:id=“@+id/reaction">
2018.2.8android:id="@+id/content_root">࣮ͷղઆ Articleandroid:id="@+id/background_view"android:background="@drawable/background_post_article" />android:id=“@+id/reaction">PostArticleFragmentϨΠΞτߏfragment_post_article.xml
2018.2.8android:id="@+id/content_root">࣮ͷղઆ Articleandroid:id="@+id/background_view"android:background="@drawable/background_post_article" />android:id="@+id/parent_nested_scroll_view">android:id=“@+id/reaction">PostArticleFragmentϨΠΞτߏfragment_post_article.xml
2018.2.8android:id="@+id/content_root">࣮ͷղઆ Articleandroid:id="@+id/background_view"android:background="@drawable/background_post_article" />android:id="@+id/parent_nested_scroll_view">android:id="@+id/image_cover" />android:id="@+id/layout_poster"layout="@layout/item_post_user" />android:id="@+id/text_title" />android:id="@+id/label_ad" />android:id="@+id/text_source_media" />android:id="@+id/text_published_at" />PostArticleFragmentϨΠΞτߏfragment_post_article.xml
2018.2.8࣮ͷղઆ Articlelayout="@layout/item_post_user" />android:id="@+id/text_title" />android:id="@+id/label_ad" />android:id="@+id/text_source_media" />android:id="@+id/text_published_at" />android:id="@+id/web_view_short_article" />android:id=“@+id/reaction">PostArticleFragmentϨΠΞτߏfragment_post_article.xml
2018.2.8@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {mBinding = FragmentPostArticleBinding.inflate(inflater, container, false);ViewCompat.setTransitionName(mBinding.imageCover,getString(R.string.transition_image_cover));ViewCompat.setTransitionName(mBinding.backgroundView,getString(R.string.transition_background));ViewCompat.setTransitionName(mBinding.layoutPoster.getRoot(),getString(R.string.transition_item_user));ViewCompat.setTransitionName(mBinding.textTitle,getString(R.string.transition_text_title));ViewCompat.setTransitionName(mBinding.textSourceMedia,getString(R.string.transition_item_source_media));ViewCompat.setTransitionName(mBinding.reaction,getString(R.string.transition_item_reactions));return mBinding.getRoot();}࣮ͷղઆ ArticlePostArticleFragmentTransitionपΓͷίʔυ
2018.2.8@Overridepublic void onStart() {super.onStart();mPostAccessor.getObservable().compose(this.bindToLifecycle()).subscribe(post -> {refreshPost(post, mState);getActivity().supportStartPostponedEnterTransition();}, e -> recordError(null, this, e, null));}࣮ͷղઆ ArticlePostArticleFragmentΩϟογϡʹ͋Δهࣄͷσʔλ(post)Λऔಘ͠ɺྃޙTransitionΛ࠶։
2018.2.8ϙΠϯτ• Transition։࢝લͷλΠϛϯάͰҰ࣌ఀࢭ͢Δ• Viewͷ४උ͕Ͱ͖ͨΒ࠶։• Χʔυ͕expand͢ΔΑ͏ͳΞχϝʔγϣϯͪΐͬͱͨ͠τϦοΫΛ͍ͬͯΔ͚ͩɻ͘͠ͳ͍࣮ͷղઆ ArticlePostArticleFragment
2018.2.8࣮ͷղઆGraphic contents
2018.2.8Graphic contentsTransition։࢝લ࣮ͷղઆ Graphic contents• CardView• ImageView(Χʔυഎܠ)• ߘऀΛදࣔ͢ΔϨΠΞτ• Title
2018.2.8Graphic contents࣮ͷղઆ Graphic contents• CardView• ImageView(Χʔυഎܠ)• ߘऀΛදࣔ͢ΔϨΠΞτ• TitleTransition։࢝લ
2018.2.8Graphic contents࣮ͷղઆ Graphic contentsTransition։࢝લ• CardView• ImageView(Χʔυഎܠ)• ߘऀΛදࣔ͢ΔϨΠΞτ• Title
2018.2.8Graphic contentsTransition։࢝ޙং൫• Χʔυશମ͕ը໘ΛຒΊΔ༻ʹ͕͍ͬͯ͘• ߘऀλΠτϧͳͲಉ͡Α͏ʹಈ͍͍࣮ͯ͘ͷղઆ Graphic contents
2018.2.8Graphic contentsTransition։࢝ޙத൫• എܠʹઃఆ͍ͯͨ͠ImageView͕ը໘͍ͬͺ͍ʹ͕Δ࣮ͷղઆ Graphic contents
2018.2.8Graphic contentsTransition։࢝ޙऴ൫1/2• ίϯςϯπͷϩʔυ͕ऴྃ͠ɺϔομʔ෦͕ϑΣʔυΞτ&্ʹফ͍࣮͑ͯ͘ͷղઆ Graphic contents
2018.2.8Graphic contentsTransition։࢝ޙऴ൫2/2• ίϯςϯπͱഎܠը૾͕ΫϩεϑΣʔυ͢ΔܗͰೖΕସΘΔ࣮ͷղઆ Graphic contents
2018.2.8Graphic contentsShared Elements࣮ͷղઆ5JNFMJOF'SBNFOU (SBQIJD$POUFOUT'SBHNFOU7JFX %FTDSJQUJPO 7JFX %FTDSJQUJPO*NBHF7JFX Χʔυഎܠ *NBHF7JFX എܠը૾-JOFBS-BZPVU ߘऀͷϨΠΞτ -JOFBS-BZPVU ߘऀͷϨΠΞτ5FYU7JFX λΠτϧ 5FYU7JFX λΠτϧ5FYU7JFX ϝσΟΞ 5FYU7JFX ϝσΟΞGraphic contents
2018.2.8GraphicContentsFragmentϨΠΞτߏandroid:id="@+id/content_root">࣮ͷղઆfragment_graphic_contents.xmlGraphic contents
2018.2.8GraphicContentsFragmentϨΠΞτߏandroid:id="@+id/content_root">࣮ͷղઆfragment_graphic_contents.xmlGraphic contentsandroid:id="@+id/web_view_graphic_content" />android:id="@+id/background_view" />
2018.2.8GraphicContentsFragmentϨΠΞτߏandroid:id="@+id/content_root">࣮ͷղઆfragment_graphic_contents.xmlGraphic contentsandroid:id="@+id/web_view_graphic_content" />android:id="@+id/background_view" />android:id="@+id/header">
2018.2.8GraphicContentsFragmentϨΠΞτߏandroid:id="@+id/content_root">࣮ͷղઆfragment_graphic_contents.xmlGraphic contentsandroid:id="@+id/web_view_graphic_content" />android:id="@+id/background_view" />android:id="@+id/header">android:id="@+id/layout_poster" />android:id="@+id/text_title" />android:id="@+id/label_ad" />android:id="@+id/text_source_media" />android:id="@+id/text_published_at" />
2018.2.8GraphicContentsFragmentTransitionपΓͷίʔυ1/2࣮ͷղઆ Graphic contents@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {mBinding = FragmentPostArticleSp1Rev2Binding.inflate(inflater,container, false);ViewCompat.setTransitionName(mBinding.backgroundView,getString(R.string.transition_background));ViewCompat.setTransitionName(mBinding.textTitle,getString(R.string.transition_text_title));ViewCompat.setTransitionName(mBinding.layoutPoster.getRoot(),getString(R.string.transition_item_user));ViewCompat.setTransitionName(mBinding.textSourceMedia,getString(R.string.transition_item_source_media));return mBinding.getRoot();}
2018.2.8GraphicContentsFragmentTransitionपΓͷίʔυ2/2࣮ͷղઆ Graphic contents@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);TransitionSet transitionSet =new TransitionSet().setDuration(400).setStartDelay(200);Fade fadeTransition = new Fade();Transition slideUpTransition = new Slide(Gravity.TOP).setStartDelay(100).excludeTarget(R.id.background_view, true);transitionSet.addTransition(fadeTransition);transitionSet.addTransition(slideUpTransition);transitionSet.setInterpolator(AnimationUtils.loadInterpolator(getContext(),R.anim.accelerate_quad));TransitionManager.beginDelayedTransition(((ViewGroup) getView()),transitionSet);mBinding.card.setVisibility(View.INVISIBLE);mBinding.backgroundView.setVisibility(View.INVISIBLE);view.setVisibility(View.VISIBLE);}
2018.2.8@Overridepublic void onStart() {super.onStart();mPostAccessor.getObservable().compose(this.bindToLifecycle()).subscribe(post -> {refreshPost(post, mState);getActivity().supportStartPostponedEnterTransition();}, e -> recordError(null, this, e, null));}࣮ͷղઆGraphicContentsFragmentΩϟογϡʹ͋Δهࣄͷσʔλ(post)Λऔಘ͠ɺྃޙTransitionΛ࠶։Graphic contents
2018.2.8ϙΠϯτ• Transition։࢝લͷλΠϛϯάͰҰ࣌ఀࢭ͢Δ• Viewͷ४උ͕Ͱ͖ͨΒ࠶։• ࣮ࡍʹେ͖͘ಈ͍͍ͯΔͷImageView͚ͩ• ࡉ͔͘ಈ͍͍ͯΔΞΠςϜୡTransitionFrameworkͷ͓͔͛• ΞχϝʔγϣϯͷAPI৭ʑ͋ΔͷͰɺཁॴཁॴͰΈ߹Θ͍࣮ͯͬͯ͘͠ͷղઆGraphicContentsFragmentGraphic contents
2018.2.8Ξχϝʔγϣϯ࣮ͷצॴ·ͣਅ͔ͬΒߟ͑ͣʹΖ͏
2018.2.8ࡶʹ࡞ΔΞχϝʔγϣϯ࣮ͷצॴ ·ͣਅ͔ͬΒߟ͑ͣʹΖ͏
2018.2.8ὃ͢Α͏ʹߟ͑ΔΞχϝʔγϣϯ࣮ͷצॴ ·ͣਅ͔ͬΒߟ͑ͣʹΖ͏
2018.2.8ਅࣅΛ͢ΔΞχϝʔγϣϯ࣮ͷצॴ ·ͣਅ͔ͬΒߟ͑ͣʹΖ͏
2018.2.8ఘΊͳ͍Ξχϝʔγϣϯ࣮ͷצॴ ·ͣਅ͔ͬΒߟ͑ͣʹΖ͏
2018.2.8ΞχϝʔγϣϯͷDebug
2018.2.8• AnimatorεέʔϧΛ5xʙ10xʹ͢Δ• ϨΠΞτͷڥքઢΛදࣔ͢Δ• γϣʔτΧοτͱͯ͠௨ͷॴʹஔ͍ͱ͘ͱྑ͍͔ΞχϝʔγϣϯͷDebug։ൃऀΦϓγϣϯ
2018.2.8• android:animateLayoutChanges=“true"͕ViewGroupʹઃఆ͞Ε͍ͯΔ͔ʁ• ࣗͰద༻ͨ͠ΞχϝʔγϣϯͱίϯϑϦΫτΛى͍ͯ͜͠ΔՄೳੑ͕͋Δ• clipChildren/clipToPaddingͷࢦఆΛ͍ͬͯ͡ΈΔ• େ͖͘Λ͑ͯΞχϝʔγϣϯ͢Δ্࣌هͷࢦఆ͕ฉ͍ͯ͘Δɻfalseʹ͢Δ͜ͱͰViewGroupͷΛඈͼग़ͯ͠ಈ͘Α͏ʹͰ͖Δ͔͠Εͳ͍ΞχϝʔγϣϯͷDebugมͳಈ͖Λ͍ͯͨ͠Β1/2ҎԼͷ߲ΛٙͬͯΈ͍͍͔ͯ
2018.2.8• Ұ୴ϨΠΞτϑΝΠϧΛ࡞Γͯ͠ΈΔ• ແཧͷ͋ΔϨΠΞτϑΝΠϧʹͳ͍ͬͯΔ͔͠Εͳ͍• ֊͕ਂ͍ͱ͘͜͠ͳΔɻͳΔ͘ConstrainLayoutͳͲΛͬͯ֊Λઙ͘͢Δ͜ͱ͕ग़དྷͳ͍͔ߟ͑Δ• Ұͭͷख๏͚ͩͰΰϦԡ͠͠Α͏ͱ͍ͯ͠ͳ͍͔ʁ• ଞʹָͳํ๏͕ͳ͍͔ݕূ͢Δɻ·ͨɺࣅͨΑ͏ͳΞϓϦ͕ͳ͍͔୳ͯ͠ΈΔΞχϝʔγϣϯͷDebugมͳಈ͖Λ͍ͯͨ͠Β2/2ҎԼͷ߲ΛٙͬͯΈ͍͍͔ͯ
2018.2.8• Shared Element Transitionαϯϓϧίʔυࣗମ؆୯ͳͷ͕ଟ͍͚Ͳɺ࣮ࡍʹΈࠐΉͱͳΔͱɺϨΠΞτϑΝΠϧͷ࡞Γํ͕ඞཁʹͳΔ• Shared Element TransitionҰ࣌ఀࢭ/࠶։͕ίϯτϩʔϧͰ͖Δ• ͜·ͬͨΒɺҰ୴Ϧηοτͯ͠ߟ͑Δɻ·ͨɺࣅͯΔΞϓϦΛ୳ͯ͠Α͘؍͢Δ·ͱΊ·ͱΊ
2018.2.8Thanks!
wakwak3125
yucamm124
yumakann
ivargrimstad
qualiarts
khmer495
koic
kazumura
hirotokirimaru
punchdrunker
heronshoes
prof18
ufoo68
productmarketing
lara
bkeepers
chrisshort
aleyda
garrettdimon
smashingmag
holman
erikaheidi
cherdarchuk
kneath
reverentgeek