Skip to content

Commit

Permalink
Merge pull request #32 from Telefonica/apps/APPS-7260-asset-background
Browse files Browse the repository at this point in the history 
APPS-7260 Add option to support the three types of assets defined by design
  • Loading branch information
@jeslat
jeslat authored Dec 1, 2020
2 parents 9b5398c + fd91aa5 commit 96d2f2b
Show file tree
Hide file tree
Showing 10 changed files with 166 additions and 47 deletions.
3 changes: 2 additions & 1 deletion catalog/src/main/java/com/telefonica/mistica/catalog/ui/CatalogMainActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import androidx.recyclerview.widget.RecyclerView
import com.telefonica.mistica.catalog.R
import com.telefonica.mistica.input.DropDownInput
import com.telefonica.mistica.list.ListRowView
import com.telefonica.mistica.list.ListRowView.Companion.TYPE_SMALL_ICON
import com.telefonica.mistica.list.layout.configureWithFullWidthLayout


Expand Down Expand Up @@ -119,8 +120,8 @@ class CatalogMainActivity : AppCompatActivity() {
context.startActivity(this)
}
}
setAssetType(TYPE_SMALL_ICON)
setAssetResource(section.icon)
setSmallAsset(true)
}
}

Expand Down
60 changes: 49 additions & 11 deletions catalog/src/main/java/com/telefonica/mistica/catalog/ui/fragment/ListsCatalogFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.RecyclerView
import com.telefonica.mistica.catalog.R
import com.telefonica.mistica.list.ListRowView
import com.telefonica.mistica.list.ListRowView.AssetType
import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE
import com.telefonica.mistica.list.ListRowView.Companion.TYPE_LARGE_ICON
import com.telefonica.mistica.list.ListRowView.Companion.TYPE_SMALL_ICON
import com.telefonica.mistica.list.MisticaRecyclerView

class ListsCatalogFragment : Fragment() {
Expand Down Expand Up @@ -45,7 +49,7 @@ class ListsCatalogFragment : Fragment() {
) as ListRowView
)

override fun getItemCount(): Int = 23
override fun getItemCount(): Int = 25

override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
val rowView: ListRowView = holder.rowView
Expand All @@ -71,49 +75,55 @@ class ListsCatalogFragment : Fragment() {
withAction = true
)
6 -> rowView.configureView(
withAsset = true
withAsset = true,
withAssetType = TYPE_LARGE_ICON
)
7 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true
)
8 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true,
withBadgeCount = 0
)
9 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true,
withBadgeCount = 5
)
10 -> rowView.configureView(
withLongDescription = false,
withAsset = true
withAsset = true,
withAssetType = TYPE_LARGE_ICON
)
11 -> rowView.configureView(
withLongDescription = false,
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true
)
12 -> rowView.configureView(
withAsset = true,
withSmallAsset = true
withAssetType = TYPE_SMALL_ICON
)
13 -> rowView.configureView(
withAsset = true,
withSmallAsset = true,
withAssetType = TYPE_SMALL_ICON,
withAction = true
)
14 -> rowView.configureView(
withAsset = true,
withSmallAsset = true,
withAssetType = TYPE_SMALL_ICON,
withAction = true,
withBadgeCount = 0
)
15 -> rowView.configureView(
withAsset = true,
withSmallAsset = true,
withAssetType = TYPE_SMALL_ICON,
withAction = true,
withBadgeCount = 10
)
Expand All @@ -124,37 +134,52 @@ class ListsCatalogFragment : Fragment() {
17 -> rowView.configureView(
withLongTitle = true,
withLongDescription = true,
withAsset = true
withAsset = true,
withAssetType = TYPE_LARGE_ICON
)
18 -> rowView.configureView(
withLongTitle = true,
withLongDescription = true,
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true
)
19 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true,
withHeadline = true
)
20 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true,
withSubtitle = true
)
21 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withAction = true,
withSubtitle = true,
withHeadline = true
)
22 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_LARGE_ICON,
withLongDescription = false,
withAction = true,
withSubtitle = true,
withHeadline = true
)
23 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_IMAGE,
withLongDescription = false
)
24 -> rowView.configureView(
withAsset = true,
withAssetType = TYPE_IMAGE
)
}
}

Expand All @@ -163,7 +188,7 @@ class ListsCatalogFragment : Fragment() {
withLongTitle: Boolean = false,
withLongDescription: Boolean? = null,
withAsset: Boolean = false,
withSmallAsset: Boolean = false,
@AssetType withAssetType: Int = TYPE_SMALL_ICON,
withAction: Boolean = false,
withBadgeCount: Int = ListRowView.BADGE_GONE,
withHeadline: Boolean = false,
Expand All @@ -187,8 +212,10 @@ class ListsCatalogFragment : Fragment() {
}
}
)
setAssetResource(if (withAsset) R.drawable.ic_lists else null)
setSmallAsset(withSmallAsset)

setAssetType(withAssetType)
setAssetResource(getAssetResource(withAsset, withAssetType))

if (withAction) {
setActionLayout(R.layout.list_row_chevron_action)
setOnClickListener { Toast.makeText(context, "Click!", Toast.LENGTH_SHORT).show() }
Expand All @@ -198,6 +225,17 @@ class ListsCatalogFragment : Fragment() {
}
setBadgeCount(withBadgeCount)
}

private fun getAssetResource(withAsset: Boolean, withAssetType: Int): Int? =
if (withAsset) {
if (withAssetType == TYPE_IMAGE) {
R.drawable.highlighted_card_custom_background
} else {
R.drawable.ic_lists
}
} else {
null
}
}

class ListViewHolder(val rowView: ListRowView) : RecyclerView.ViewHolder(rowView)
Expand Down
2 changes: 1 addition & 1 deletion catalog/src/main/res/layout/screen_fragment_lists_catalog_item.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
app:listRowAssetDrawable="@android:drawable/btn_star"
app:listRowBadgeCount="gone"
app:listRowDescription="Test Subtitle"
app:listRowHasSmallAsset="true"
app:listRowAssetType="smallIcon"
app:listRowIsBoxed="true"
app:listRowTitle="Test Title" />
84 changes: 60 additions & 24 deletions library/src/main/java/com/telefonica/mistica/list/ListRowView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ package com.telefonica.mistica.list
import android.content.Context
import android.graphics.drawable.Drawable
import android.util.AttributeSet
import android.util.Log
import android.util.TypedValue
import android.view.LayoutInflater
import android.view.View
Expand All @@ -11,6 +12,7 @@ import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import androidx.annotation.DrawableRes
import androidx.annotation.IntDef
import androidx.annotation.LayoutRes
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
Expand Down Expand Up @@ -54,13 +56,13 @@ import com.telefonica.mistica.util.convertDpToPx
),
BindingMethod(
type = ListRowView::class,
attribute = "listRowIsBoxed",
method = "setBoxed"
attribute = "listRowAssetType",
method = "setAssetType"
),
BindingMethod(
type = ListRowView::class,
attribute = "listRowHasSmallAsset",
method = "setSmallAsset"
attribute = "listRowIsBoxed",
method = "setBoxed"
),
BindingMethod(
type = ListRowView::class,
Expand All @@ -79,8 +81,18 @@ class ListRowView @JvmOverloads constructor(
defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

@Retention(AnnotationRetention.SOURCE)
@IntDef(
TYPE_IMAGE,
TYPE_SMALL_ICON,
TYPE_LARGE_ICON
)
annotation class AssetType

private val textsContainer: LinearLayout
private val assetImageView: ImageView
private val assetCircularImageView: ImageView
private val assetImageLayout: FrameLayout
private val headlineContainer: FrameLayout
private val titleTextView: TextView
private val subtitleTextView: TextView
Expand All @@ -90,7 +102,7 @@ class ListRowView @JvmOverloads constructor(

private var currentHeadlineLayoutRes: Int = HEADLINE_NONE
private var currentActionLayoutRes: Int = ACTION_NONE
private var isSmallAsset: Boolean = false
private var assetType: Int = TYPE_SMALL_ICON

init {
LayoutInflater.from(context).inflate(R.layout.list_row_item, this, true)
Expand All @@ -101,6 +113,8 @@ class ListRowView @JvmOverloads constructor(

textsContainer = findViewById(R.id.row_texts_container)
assetImageView = findViewById(R.id.row_asset_image)
assetCircularImageView = findViewById(R.id.row_asset_circular_image)
assetImageLayout = findViewById(R.id.row_asset_image_layout)
headlineContainer = findViewById(R.id.row_headline)
titleTextView = findViewById(R.id.row_title_text)
subtitleTextView = findViewById(R.id.row_subtitle_text)
Expand Down Expand Up @@ -131,12 +145,7 @@ class ListRowView @JvmOverloads constructor(
setSubtitle(styledAttrs.getText(R.styleable.ListRowView_listRowSubtitle))
setDescription(styledAttrs.getText(R.styleable.ListRowView_listRowDescription))
setBoxed(styledAttrs.getBoolean(R.styleable.ListRowView_listRowIsBoxed, false))
setSmallAsset(
styledAttrs.getBoolean(
R.styleable.ListRowView_listRowHasSmallAsset,
false
)
)
setAssetType(styledAttrs.getType(R.styleable.ListRowView_listRowAssetType))
setAssetDrawable(styledAttrs.getDrawable(R.styleable.ListRowView_listRowAssetDrawable))
setBadgeCount(styledAttrs.getInt(R.styleable.ListRowView_listRowBadgeCount, BADGE_GONE))
styledAttrs.getResourceId(
Expand All @@ -149,25 +158,49 @@ class ListRowView @JvmOverloads constructor(
}
}

fun setSmallAsset(isSmall: Boolean) {
isSmallAsset = isSmall
assetImageView.setSize(if (isSmall) 24 else 40)
recalculateAssetPosition()
}

fun setAssetResource(@DrawableRes resource: Int? = null) {
setAssetDrawable(resource?.let { ContextCompat.getDrawable(context, it) })
}

fun setAssetDrawable(drawable: Drawable? = null) {
assetImageView.setImageDrawable(drawable)
assetImageView.visibility = if (drawable != null) {
View.VISIBLE
if (drawable != null) {
if (assetType == TYPE_IMAGE) {
assetCircularImageView.setImageDrawable(drawable)
assetCircularImageView.visibility = VISIBLE
assetImageView.visibility = GONE
} else {
assetImageView.setImageDrawable(drawable)
assetCircularImageView.visibility = GONE
assetImageView.visibility = VISIBLE
}
assetImageLayout.visibility = VISIBLE
} else {
View.GONE
assetImageLayout.visibility = GONE
}
}

fun setAssetType(@AssetType type: Int) {
assetType = type
configureAsset()
}

private fun configureAsset() {
when (assetType) {
TYPE_IMAGE -> {
assetImageLayout.setBackgroundResource(0)
}
TYPE_SMALL_ICON -> {
assetImageView.setSize(24)
assetImageLayout.setBackgroundResource(0)
}
TYPE_LARGE_ICON -> {
assetImageView.setSize(24)
assetImageLayout.setBackgroundResource(R.drawable.bg_list_image)
}
}
recalculateAssetPosition()
}

fun setTitle(text: CharSequence?) {
titleTextView.text = text
recalculateTitleBottomConstraints()
Expand Down Expand Up @@ -263,15 +296,15 @@ class ListRowView @JvmOverloads constructor(
}

private fun recalculateAssetPosition() {
with(assetImageView.layoutParams as LayoutParams) {
with(assetImageLayout.layoutParams as LayoutParams) {
if (isAnyTextDifferentThanTitleVisible()) {
bottomToBottom = ConstraintSet.UNSET
topMargin = context.convertDpToPx(if (isSmallAsset) 8 else 4)
topMargin = context.convertDpToPx(if (assetType == TYPE_SMALL_ICON) 8 else 4)
} else {
bottomToBottom = ConstraintSet.PARENT_ID
topMargin = context.convertDpToPx(0)
}
assetImageView.layoutParams = this
assetImageLayout.layoutParams = this
}
}

Expand Down Expand Up @@ -303,5 +336,8 @@ class ListRowView @JvmOverloads constructor(
const val BADGE_GONE = -1
const val ACTION_NONE = -1
const val HEADLINE_NONE = -1
const val TYPE_IMAGE = 0
const val TYPE_SMALL_ICON = 1
const val TYPE_LARGE_ICON = 2
}
}
6 changes: 5 additions & 1 deletion library/src/main/java/com/telefonica/mistica/list/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,12 @@ Implemented as a custom view, `com.telefonica.mistica.ListRowView` can be used i
<attr name="listRowSubtitle" format="string" />
<attr name="listRowDescription" format="string" />
<attr name="listRowAssetDrawable" format="reference" />
<attr name="listRowAssetType" format="enum">
<enum name="image" value="0" />
<enum name="smallIcon" value="1" />
<enum name="largeIcon" value="2" />
</attr>
<attr name="listRowIsBoxed" format="boolean" />
<attr name="listRowHasSmallAsset" format="boolean" />
<attr name="listRowActionLayout" format="integer">
<enum name="none" value="-1" />
</attr>
Expand Down
7 changes: 7 additions & 0 deletions library/src/main/res/drawable/bg_list_image.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="?colorIconDisabled" />
</shape>
Loading

0 comments on commit 96d2f2b

Please sign in to comment.