2016-06-14 6 views
1

툴바에 이미지가있는 액티비티 하나와 동일한 이미지가있는 대화 상자처럼 테마가있는 액티비티가 있습니다. 이 레이아웃 파일입니다대화 상자에서 Android 공유 요소가 활성화되었습니다.

my_activity.xml :

... 

<com.makeramen.roundedimageview.RoundedImageView 
    android:id="@+id/my_image" 
    android:layout_width="40dp" 
    android:layout_height="40dp" 
    android:scaleType="centerCrop" 
    android:src="@drawable/my_drawable" 
    android:transitionName="@string/my_image_transition" 
    app:riv_oval="true" /> 

... 

my_dialog_activity.xml :

<style name="MyDialogActivity" parent="Theme.AppCompat.Light.Dialog.MinWidth"> 
    <item name="windowNoTitle">true</item> 
    <item name="android:windowMinWidthMajor">@dimen/abc_dialog_min_width_major</item> 
    <item name="android:windowMinWidthMinor">@dimen/abc_dialog_min_width_minor</item> 
</style> 
: 대화 활동이 매니페스트에이 테마를 적용하여 대화를하게

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@id/my_image" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="centerCrop" 
     android:src="@drawable/my_drawable" 
     android:tint="@color/accent" 
     android:transitionName="@string/my_image_transition" /> 

</LinearLayout> 

액티비티와 대화 상자는 내가 원하는 것처럼 보이게 만듭니다.

이제 ImageViews와 공유 요소 애니메이션을 구현하고 싶습니다. 사용자가 첫 번째 액티비티의 이미지를 클릭하면 이미지가 커지고 대화 상자의 이미지에 맞도록 화면 중간으로 이동해야합니다.

그래서이 코드 작성 :

Intent intent = new Intent(MyActivity.this, MyDialogActivity.class); 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
     MyActivity.this, v, getString(R.string.my_image_transition) 
    ); 
    startActivityForResult(intent, 999, options.toBundle()); 
} else { 
    startActivityForResult(intent, 999); 
} 

이 애니메이션은 실제로 일어나지 않는다, 그러나 이동 된 이미지는 대화의 영역의 내부에만 표시됩니다. 따라서 대화 상자의 왼쪽 위 모서리에서 오는 이미지를 볼 수 있지만 대화 상자 외부의 첫 번째 활동에서 이동하는 것을 보지 못합니다.

가 여기 모습과 방법의 HTML 버전의 IT가 현재의 모습 : https://jsfiddle.net/wutqdh9d/1/

+0

왜 이러한 이유로 대화 활동이 필요합니까? 메인 액티비티의 UR 이미지를 중앙에 애니메이션으로 적용하고 흰색 배경을 가진 뷰 레이아웃을 배치하고 애니메이션이 끝나면 나타납니다. – uguboz

+0

대화 상자 활동에는 툴바와 같은 다른보기도 포함됩니다. –

답변

4

Share (공유) 요소 애니메이션 두 번째 활동에 그려진. Theme.AppCompat.Light.Dialog.MinWidth 테마를 사용하면 두 번째 활동의 창 크기가 애니메이션의 그리기 영역보다 작습니다.

따라서 대화 테마를 사용하지 마십시오.

<style name="MyDialogActivity" parent="Theme.AppCompat.NoActionBar"> 
    <item name="android:windowNoTitle">true</item> 
    <item name="android:windowBackground">@android:color/transparent</item> 
    <item name="android:windowIsTranslucent">true</item> 
    <item name="android:windowContentOverlay">@null</item> 
    <item name="android:backgroundDimEnabled">true</item> 
</style> 

제 활성 레이아웃 : 이하 이것을 변경

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:gravity="center"> 

<ImageView 
     android:id="@id/my_image" 
     android:layout_width="200dp" 
     android:layout_height="200dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/your_icon" 
     android:transitionName="@string/my_image_transition"/> 

그런 다음이 효과 (http://gph.is/1UzZZzV) 여야한다.

희망이 있습니다.

참고 : 위의 스타일 https://stackoverflow.com/a/28508306/3171537

+0

고마워요! 또한 ImageView를 CardView로 감싸서 대화 상자를 보았습니다. 작동하지 않는 부분은 외부를 두드리는 것으로 대화 상자를 닫는 것이지만 일부 클릭 리스너를 사용하여 해결할 수 있습니다. –

+0

그래, 일부 레이아웃에는 클릭 리스너를 추가하십시오. 이것은 매우 쉽습니다. – JohnWatsonDev

0
<style name="dialog_style_activity"> 
     <item name="android:windowIsTranslucent">true</item> 
     <item name="android:windowBackground">@android:color/transparent</item> 
     <item name="android:windowContentOverlay">@null</item> 
     <item name="android:windowNoTitle">true</item> 
     <item name="android:backgroundDimEnabled">true</item> 
    </style> 

나를 위해 작품입니다. manifest.xml에서이 스타일을 참조하십시오.