DataHearth/tachiyomi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tap to enlarge cover (#5256)

Browse Source 
* Convert manga_info_header to use ContraintLayout

Will help with MotionLayout and tablet layout

* Convert to MotionLayout to be able to enlarge cover art

* Add keyframes to animations

* Remove keyframes

Alexa play Despacito

* Add back manga_summary_section
This commit is contained in:
Andreas 2021-06-01 23:59:38 +02:00 committed by GitHub
parent b41ac355a0
commit 3db85c7274
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 453 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/main/java/eu/kanade/tachiyomi/ui/manga/info/MangaInfoHeaderAdapter.kt
View File

@ -275,7 +275,6 @@ class MangaInfoHeaderAdapter(
// Handle showing more or less info // Handle showing more or less info
merge( merge(
binding.mangaSummarySection.clicks(),
binding.mangaSummaryText.clicks(), binding.mangaSummaryText.clicks(),
binding.mangaInfoToggleMore.clicks(), binding.mangaInfoToggleMore.clicks(),
binding.mangaInfoToggleLess.clicks() binding.mangaInfoToggleLess.clicks()

102
app/src/main/res/layout/manga_info_header.xml
View File

@ -1,24 +1,21 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:orientation="vertical"
app:layoutDescription="@xml/manga_info_header_scene"
tools:context=".ui.browse.source.browse.BrowseSourceController"> tools:context=".ui.browse.source.browse.BrowseSourceController">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView <ImageView
android:id="@+id/backdrop" android:id="@+id/backdrop"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="0dp" android:layout_height="0dp"
android:layout_marginBottom="44dp" android:layout_marginBottom="-8dp"
android:alpha="0.2" android:alpha="0.2"
android:scaleType="centerCrop" android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="@+id/manga_cover"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toTopOf="parent"
@ -28,45 +25,44 @@
android:id="@+id/backdrop_overlay" android:id="@+id/backdrop_overlay"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="160dp" android:layout_height="160dp"
android:layout_marginBottom="44dp" android:layout_marginBottom="-16dp"
android:background="@drawable/manga_info_gradient" android:background="@drawable/manga_info_gradient"
android:backgroundTint="?android:attr/colorBackground" android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="parent" /> app:layout_constraintBottom_toBottomOf="@+id/backdrop" />
<LinearLayout <ImageView
android:id="@+id/manga_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingStart="16dp"
android:paddingTop="48dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toTopOf="parent">
<eu.kanade.tachiyomi.ui.manga.info.MangaCoverImageView
android:id="@+id/manga_cover" android:id="@+id/manga_cover"
android:layout_width="match_parent" android:layout_width="100dp"
android:layout_height="wrap_content" android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="48dp"
android:background="@drawable/rounded_rectangle" android:background="@drawable/rounded_rectangle"
android:contentDescription="@string/description_cover" android:contentDescription="@string/description_cover"
android:maxWidth="100dp" android:maxWidth="100dp"
android:scaleType="centerCrop" android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="w,3:2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_height="133dp"
tools:src="@mipmap/ic_launcher" /> tools:src="@mipmap/ic_launcher" />
<LinearLayout <LinearLayout
android:layout_width="wrap_content" android:id="@+id/manga_detail"
android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="16dp" android:layout_marginStart="16dp"
android:layout_marginBottom="16dp" android:layout_marginEnd="16dp"
android:orientation="vertical"> android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="@+id/manga_cover"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/manga_cover">
<TextView <TextView
android:id="@+id/manga_full_title" android:id="@+id/manga_full_title"
style="@style/TextAppearance.Medium.Title" style="@style/TextAppearance.Medium.Title"
android:layout_width="wrap_content" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="bottom" android:gravity="bottom"
android:maxLines="3" android:maxLines="3"
android:text="@string/manga_info_full_title_label" android:text="@string/manga_info_full_title_label"
@ -81,7 +77,6 @@
style="@style/TextAppearance.Regular.Body1.Secondary" style="@style/TextAppearance.Regular.Body1.Secondary"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:textIsSelectable="false" android:textIsSelectable="false"
tools:text="Author" /> tools:text="Author" />
@ -90,13 +85,14 @@
style="@style/TextAppearance.Regular.Body1.Secondary" style="@style/TextAppearance.Regular.Body1.Secondary"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:textIsSelectable="false" android:textIsSelectable="false"
tools:text="Artist" /> tools:text="Artist" />
<LinearLayout <LinearLayout
android:id="@+id/manga_status_row"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content">
android:layout_marginTop="4dp">
<TextView <TextView
android:id="@+id/manga_status" android:id="@+id/manga_status"
@ -129,22 +125,21 @@
tools:text="Source" /> tools:text="Source" />
</LinearLayout> </LinearLayout>
</LinearLayout> </LinearLayout>
</LinearLayout>
<com.google.android.material.button.MaterialButton <com.google.android.material.button.MaterialButton
android:id="@+id/btn_favorite" android:id="@+id/btn_favorite"
style="@style/Theme.Widget.Button.Action" style="@style/Theme.Widget.Button.Action"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="@string/add_to_library" android:text="@string/add_to_library"
app:icon="@drawable/ic_favorite_border_24dp" app:icon="@drawable/ic_favorite_border_24dp"
app:layout_constraintEnd_toStartOf="@+id/btn_tracking" app:layout_constraintEnd_toStartOf="@+id/btn_tracking"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info" /> app:layout_constraintTop_toBottomOf="@+id/backdrop" />
<com.google.android.material.button.MaterialButton <com.google.android.material.button.MaterialButton
android:id="@+id/btn_tracking" android:id="@+id/btn_tracking"
@ -155,8 +150,9 @@
android:visibility="gone" android:visibility="gone"
app:icon="@drawable/ic_sync_24dp" app:icon="@drawable/ic_sync_24dp"
app:layout_constraintEnd_toStartOf="@+id/btn_webview" app:layout_constraintEnd_toStartOf="@+id/btn_webview"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn_favorite" app:layout_constraintStart_toEndOf="@+id/btn_favorite"
app:layout_constraintTop_toBottomOf="@+id/manga_info" app:layout_constraintTop_toTopOf="@+id/btn_favorite"
tools:visibility="visible" /> tools:visibility="visible" />
<com.google.android.material.button.MaterialButton <com.google.android.material.button.MaterialButton
@ -164,27 +160,19 @@
style="@style/Theme.Widget.Button.Action" style="@style/Theme.Widget.Button.Action"
android:layout_width="0dp" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="@string/action_web_view" android:text="@string/action_web_view"
android:visibility="gone" android:visibility="gone"
app:icon="@drawable/ic_public_24dp" app:icon="@drawable/ic_public_24dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn_tracking" app:layout_constraintStart_toEndOf="@+id/btn_tracking"
app:layout_constraintTop_toBottomOf="@+id/manga_info" app:layout_constraintTop_toTopOf="@+id/btn_favorite"
tools:visibility="visible" /> tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/manga_summary_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<TextView <TextView
android:id="@+id/manga_summary_text" android:id="@+id/manga_summary_text"
style="@style/TextAppearance.Regular.Body1.Secondary" style="@style/TextAppearance.Regular.Body1.Secondary"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginStart="16dp" android:layout_marginStart="16dp"
android:layout_marginEnd="16dp" android:layout_marginEnd="16dp"
@ -194,7 +182,7 @@
android:textIsSelectable="false" android:textIsSelectable="false"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintTop_toBottomOf="@+id/btn_favorite"
tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" /> tools:text="Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content Collapsed summary content" />
<View <View
@ -203,8 +191,8 @@
android:layout_height="0dp" android:layout_height="0dp"
android:background="@drawable/manga_info_more_gradient" android:background="@drawable/manga_info_more_gradient"
android:backgroundTint="?android:attr/colorBackground" android:backgroundTint="?android:attr/colorBackground"
app:layout_constraintBottom_toBottomOf="@+id/manga_summary_text" app:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
app:layout_constraintEnd_toStartOf="@id/manga_info_toggle_more" app:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" /> app:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more" />
<com.google.android.material.button.MaterialButton <com.google.android.material.button.MaterialButton
@ -230,7 +218,8 @@
android:textAlignment="viewEnd" android:textAlignment="viewEnd"
android:visibility="gone" android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_summary_text" /> app:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
tools:visibility="visible" />
<HorizontalScrollView <HorizontalScrollView
android:id="@+id/manga_genres_tags_compact" android:id="@+id/manga_genres_tags_compact"
@ -267,8 +256,13 @@
app:chipSpacingHorizontal="4dp" app:chipSpacingHorizontal="4dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less" /> app:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout> <androidx.constraintlayout.widget.Group
android:id="@+id/manga_summary_section"
android:layout_width="0dp"
android:layout_height="0dp"
app:constraint_referenced_ids="manga_summary_text,manga_info_toggle_more,manga_info_toggle_more_scrim,manga_genres_tags_compact" />
</LinearLayout> </androidx.constraintlayout.motion.widget.MotionLayout>

221
app/src/main/res/xml/manga_info_header_scene.xml Normal file
View File

@ -0,0 +1,221 @@
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/start"
motion:duration="@android:integer/config_mediumAnimTime">
<KeyFrameSet>
<KeyPosition
motion:motionTarget="@+id/manga_detail"
motion:keyPositionType="pathRelative" />
</KeyFrameSet>
<OnClick motion:targetId="@+id/manga_cover" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/manga_info_toggle_more"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_genres_tags_compact"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
motion:layout_constraintStart_toStartOf="parent"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_info_toggle_more_scrim"
motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
android:layout_width="20dp"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
motion:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_info_toggle_less"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_genres_tags_full_chips"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginEnd="16dp"
motion:layout_constraintTop_toBottomOf="@id/manga_info_toggle_less"
android:layout_marginStart="16dp"
motion:layout_constraintStart_toStartOf="parent"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/btn_tracking"
motion:layout_constraintEnd_toStartOf="@+id/btn_webview"
motion:layout_constraintStart_toEndOf="@+id/btn_favorite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintTop_toTopOf="@+id/btn_favorite"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/btn_webview"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@+id/btn_tracking"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintTop_toTopOf="@+id/btn_favorite"
motion:visibilityMode="ignore" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/backdrop"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="@+id/manga_cover"
android:layout_marginBottom="-8dp"
android:alpha="0"
motion:layout_constraintTop_toTopOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:transitionEasing="cubic(0,1,0,1)" />
<Constraint
android:id="@+id/backdrop_overlay"
android:layout_width="match_parent"
android:layout_height="160dp"
motion:layout_constraintBottom_toBottomOf="@+id/backdrop"
android:layout_marginBottom="-16dp"
android:alpha="0"
motion:transitionEasing="cubic(0,1,0,1)" />
<Constraint
android:layout_marginStart="0dp"
motion:layout_constraintTop_toTopOf="parent"
motion:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="0dp"
android:id="@+id/manga_cover"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintDimensionRatio="2:3" />
<Constraint
android:id="@+id/btn_favorite"
motion:layout_constraintEnd_toStartOf="@+id/btn_tracking"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="@id/manga_detail"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintStart_toStartOf="parent" />
<Constraint
android:id="@+id/btn_favorite"
motion:layout_constraintEnd_toStartOf="@+id/btn_tracking"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="@id/manga_detail"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" />
<Constraint
android:id="@+id/manga_detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
motion:layout_constraintTop_toBottomOf="@id/manga_cover"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
android:layout_marginTop="24dp" />
<Constraint
android:id="@+id/manga_info_toggle_less"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/btn_tracking"
motion:layout_constraintEnd_toStartOf="@+id/btn_webview"
motion:layout_constraintStart_toEndOf="@+id/btn_favorite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintTop_toTopOf="@+id/btn_favorite"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/btn_tracking"
motion:layout_constraintEnd_toStartOf="@+id/btn_webview"
motion:layout_constraintStart_toEndOf="@+id/btn_favorite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
motion:visibilityMode="ignore"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintTop_toTopOf="@+id/btn_favorite" />
<Constraint
android:id="@+id/btn_webview"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toEndOf="@+id/btn_tracking"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="visible"
motion:layout_constraintHorizontal_bias="0.5"
motion:layout_constraintTop_toTopOf="@+id/btn_favorite"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_summary_text"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
motion:layout_constraintTop_toBottomOf="@+id/btn_favorite"
android:layout_marginStart="16dp"
motion:layout_constraintStart_toStartOf="parent"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_info_toggle_more_scrim"
motion:layout_constraintEnd_toStartOf="@+id/manga_info_toggle_more"
android:layout_width="20dp"
android:layout_height="0dp"
motion:layout_constraintBottom_toBottomOf="@+id/manga_info_toggle_more"
motion:layout_constraintTop_toTopOf="@+id/manga_info_toggle_more"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_info_toggle_more"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf="@+id/manga_summary_text"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_genres_tags_compact"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
motion:layout_constraintTop_toBottomOf="@+id/manga_summary_text"
motion:layout_constraintStart_toStartOf="parent"
motion:visibilityMode="ignore" />
<Constraint
android:id="@+id/manga_genres_tags_full_chips"
motion:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_marginEnd="16dp"
motion:layout_constraintTop_toBottomOf="@+id/manga_info_toggle_less"
android:layout_marginStart="16dp"
motion:layout_constraintStart_toStartOf="parent"
motion:visibilityMode="ignore" />
</ConstraintSet>
</MotionScene>