Add custom subtitle view (microsoft#46)

SurbhiVijayvargeeya · web-flow · commit 6a95cd7e79bc · 2021-03-01T13:34:44.000+05:30
diff --git a/FluentUI.Demo/build.gradle b/FluentUI.Demo/build.gradle
@@ -15,8 +15,8 @@ android {
         applicationId 'com.microsoft.fluentuidemo'
         minSdkVersion 21
         targetSdkVersion 28
-        versionCode 10
-        versionName '0.0.10'
+        versionCode 11
+        versionName '0.0.11'
     }
     buildTypes {
         release {
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/ListItemViewActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/ListItemViewActivity.kt
@@ -14,6 +14,7 @@ import android.support.v7.widget.DividerItemDecoration
 import android.text.TextUtils
 import android.view.View
 import android.widget.ImageView
+import android.widget.LinearLayout
 import android.widget.TextView
 import com.microsoft.fluentui.listitem.ListItemDivider
 import com.microsoft.fluentui.listitem.ListItemView
@@ -140,6 +141,39 @@ class ListItemViewActivity : DemoActivity() {
             )
         )
 
+        val twoLineCustomSecondarySubtitleSection = createSection(
+            createListSubHeader(getString(R.string.list_item_sub_header_two_line_custom_secondary_subtitle)),
+            arrayListOf(
+                createListItem(
+                        getString(R.string.list_item_title),
+                        getString(R.string.list_item_subtitle),
+                        customView = createExampleCustomView(smallIcon),
+                        customViewSize = ListItemView.CustomViewSize.SMALL,
+                        customSecondarySubtitleView = createExampleCustomSecondarySubtitleView(),
+                        layoutDensity = ListItemView.LayoutDensity.COMPACT
+                ),
+                createListItem(
+                        getString(R.string.list_item_title),
+                        getString(R.string.list_item_subtitle),
+                        customView = createExampleCustomView(smallIcon),
+                        customViewSize = ListItemView.CustomViewSize.SMALL,
+                        customAccessoryView = createExampleCustomView(overflowIcon),
+                        customSecondarySubtitleView = createExampleCustomSecondarySubtitleView(),
+                        addCustomAccessoryViewClick = true,
+                        layoutDensity = ListItemView.LayoutDensity.COMPACT
+                ),
+                createListItem(
+                        getString(R.string.list_item_title),
+                        getString(R.string.list_item_subtitle),
+                        customView = createExampleAvatarView(R.drawable.avatar_wanda_howard),
+                        customViewSize = ListItemView.CustomViewSize.MEDIUM,
+                        customAccessoryView = createExampleTextView(),
+                        customSecondarySubtitleView = createExampleCustomSecondarySubtitleView(),
+                        layoutDensity = ListItemView.LayoutDensity.COMPACT
+                )
+            )
+        )
+
         // Three-line list example
 
         val threeLineSection = createSection(
@@ -276,7 +310,7 @@ class ListItemViewActivity : DemoActivity() {
             )
         )
 
-        val twoLineListSections = twoLineSection + twoLineDenseSection
+        val twoLineListSections = twoLineSection + twoLineDenseSection + twoLineCustomSecondarySubtitleSection
         val layoutVariantSections = noCustomViewSection + largeHeaderSection + truncationSection + wrappingSection
         return (singleLineSection + twoLineListSections + threeLineSection + layoutVariantSections) as ArrayList<IBaseListItem>
     }
@@ -319,6 +353,7 @@ class ListItemViewActivity : DemoActivity() {
         customView: View? = null,
         customViewSize: ListItemView.CustomViewSize = DEFAULT_CUSTOM_VIEW_SIZE,
         customAccessoryView: View? = null,
+        customSecondarySubtitleView: View? = null,
         addCustomAccessoryViewClick: Boolean = false,
         layoutDensity: ListItemView.LayoutDensity = DEFAULT_LAYOUT_DENSITY,
         wrap: Boolean = false
@@ -331,6 +366,7 @@ class ListItemViewActivity : DemoActivity() {
         item.customAccessoryView = customAccessoryView
         item.customView = customView
         item.customViewSize = customViewSize
+        item.customSecondarySubtitleView = customSecondarySubtitleView
 
         if (wrap) {
             item.titleMaxLines = 4
@@ -376,4 +412,18 @@ class ListItemViewActivity : DemoActivity() {
             avatarView.name = getString(avatarNameStringId)
         return avatarView
     }
+
+    private fun createExampleCustomSecondarySubtitleView(): LinearLayout {
+        val dotTextView = TextView(this)
+        dotTextView.text = " . "
+
+        val secondarySubtitleTextView = TextView(this)
+        TextViewCompat.setTextAppearance(secondarySubtitleTextView, R.style.TextAppearance_DemoListItemSubtitle)
+        secondarySubtitleTextView.text = getString(R.string.list_item_secondary_subtitle)
+
+        val linearLayout = LinearLayout(this)
+        linearLayout.addView(dotTextView)
+        linearLayout.addView(secondarySubtitleTextView)
+        return linearLayout
+    }
 }
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/list/IListItem.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/list/IListItem.kt
@@ -27,6 +27,7 @@ interface IListItem : IBaseListItem {
     var customView: View?
     var customViewSize: ListItemView.CustomViewSize
     var customAccessoryView: View?
+    var customSecondarySubtitleView: View?
 
     var layoutDensity: ListItemView.LayoutDensity
 }
@@ -46,6 +47,7 @@ data class ListItem(override var title: String = "") : IListItem {
     override var customView: View? = null
     override var customViewSize: ListItemView.CustomViewSize = ListItemView.DEFAULT_CUSTOM_VIEW_SIZE
     override var customAccessoryView: View? = null
+    override var customSecondarySubtitleView: View? = null
 
     override var layoutDensity: ListItemView.LayoutDensity = ListItemView.DEFAULT_LAYOUT_DENSITY
 }
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/list/ListAdapter.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/list/ListAdapter.kt
@@ -149,6 +149,7 @@ fun ListItemView.setListItem(listItem: IListItem) {
     customView = listItem.customView
     customViewSize = listItem.customViewSize
     customAccessoryView = listItem.customAccessoryView
+    customSecondarySubtitleView = listItem.customSecondarySubtitleView
 
     layoutDensity = listItem.layoutDensity
 }
diff --git a/FluentUI.Demo/src/main/res/values/strings.xml b/FluentUI.Demo/src/main/res/values/strings.xml
@@ -199,10 +199,12 @@
     <!--ListItem-->
     <string name="list_item_title">Title, primary text</string>
     <string name="list_item_subtitle">Subtitle, secondary text</string>
+    <string name="list_item_secondary_subtitle">Custom subtitle text</string>
     <string name="list_item_footer">Footer, tertiary text</string>
     <string name="list_item_sub_header_single_line">Single-line list with gray sub header text</string>
     <string name="list_item_sub_header_two_line">Two-line list</string>
     <string name="list_item_sub_header_two_line_dense">Two-line list with dense spacing</string>
+    <string name="list_item_sub_header_two_line_custom_secondary_subtitle">Two line list with custom secondary subtitle view</string>
     <string name="list_item_sub_header_three_line">Three-line list with black sub header text</string>
     <string name="list_item_sub_header_no_custom_views">List items with no custom views</string>
     <string name="list_item_sub_header_large_header">List items with large custom views</string>
diff --git a/FluentUI/src/main/java/com/microsoft/fluentui/listitem/ListItemView.kt b/FluentUI/src/main/java/com/microsoft/fluentui/listitem/ListItemView.kt
@@ -190,6 +190,17 @@ open class ListItemView : TemplateView {
             updateTemplate()
         }
 
+    /**
+     * This view will be displayed at the end of subtitle view.
+     */
+    var customSecondarySubtitleView: View? = null
+        set(value) {
+            if (field == value)
+                return
+            field = value
+            updateTemplate()
+        }
+
     /**
      * Determines the list item view vertical padding density.
      */
@@ -313,6 +324,7 @@ open class ListItemView : TemplateView {
     private var container: LinearLayout? = null
     private var customViewContainer: RelativeLayout? = null
     private var customAccessoryViewContainer: RelativeLayout? = null
+    private var customSecondarySubtitleViewContainer: RelativeLayout? = null
     private var textViewContainer: LinearLayout? = null
 
     override fun onTemplateLoaded() {
@@ -325,6 +337,7 @@ open class ListItemView : TemplateView {
         container = findViewInTemplateById(R.id.list_item)
         customViewContainer = findViewInTemplateById(R.id.list_item_custom_view_container)
         customAccessoryViewContainer = findViewInTemplateById(R.id.list_item_custom_accessory_view_container)
+        customSecondarySubtitleViewContainer = findViewInTemplateById(R.id.list_item_custom_secondary_subtitle_view_container)
         textViewContainer = findViewInTemplateById(R.id.list_item_text_view_container)
 
         updateTemplate()
@@ -341,6 +354,7 @@ open class ListItemView : TemplateView {
 
         customViewContainer?.setContentAndUpdateVisibility(customView, ::updateCustomViewLayout)
         customAccessoryViewContainer?.setContentAndUpdateVisibility(customAccessoryView)
+        customSecondarySubtitleViewContainer?.setContentAndUpdateVisibility(customSecondarySubtitleView)
 
         setBackgroundResource(background)
     }
diff --git a/FluentUI/src/main/res/layout/view_list_item.xml b/FluentUI/src/main/res/layout/view_list_item.xml
@@ -6,6 +6,7 @@
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
@@ -33,14 +34,37 @@
             android:textAppearance="@style/TextAppearance.FluentUI.ListItemTitle"
             tools:text="Title" />
 
-        <TextView
-            android:id="@+id/list_item_subtitle"
+        <android.support.constraint.ConstraintLayout
+            android:id="@+id/list_item_subtitle_view_container"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/fluentui_list_item_text_vertical_spacing"
-            android:textAppearance="@style/TextAppearance.FluentUI.ListItemSubtitle"
-            tools:text="Subtitle"
-            tools:visibility="visible" />
+            android:layout_marginTop="@dimen/fluentui_list_item_text_vertical_spacing">
+
+            <TextView
+                android:id="@+id/list_item_subtitle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:textAppearance="@style/TextAppearance.FluentUI.ListItemSubtitle"
+                app:layout_constraintTop_toTopOf="@+id/list_item_subtitle_view_container"
+                app:layout_constraintStart_toStartOf="@+id/list_item_subtitle_view_container"
+                app:layout_constraintBottom_toBottomOf="@+id/list_item_subtitle_view_container"
+                app:layout_constraintEnd_toStartOf="@+id/list_item_custom_secondary_subtitle_view_container"
+                app:layout_constraintHorizontal_bias="0.0"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constrainedWidth="true"
+                tools:text="Subtitle"
+                tools:visibility="visible"/>
+
+            <RelativeLayout
+                android:id="@+id/list_item_custom_secondary_subtitle_view_container"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:layout_constraintStart_toEndOf="@+id/list_item_subtitle"
+                app:layout_constraintEnd_toEndOf="@+id/list_item_subtitle_view_container"
+                app:layout_constraintTop_toTopOf="@+id/list_item_subtitle_view_container"
+                app:layout_constraintBottom_toBottomOf="@+id/list_item_subtitle_view_container"/>
+
+        </android.support.constraint.ConstraintLayout>
 
         <TextView
             android:id="@+id/list_item_footer"

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ interface IListItem : IBaseListItem {`
`27`	`27`	`var customView: View?`
`28`	`28`	`var customViewSize: ListItemView.CustomViewSize`
`29`	`29`	`var customAccessoryView: View?`
	`30`	`+ var customSecondarySubtitleView: View?`
`30`	`31`
`31`	`32`	`var layoutDensity: ListItemView.LayoutDensity`
`32`	`33`	`}`
`@@ -46,6 +47,7 @@ data class ListItem(override var title: String = "") : IListItem {`
`46`	`47`	`override var customView: View? = null`
`47`	`48`	`override var customViewSize: ListItemView.CustomViewSize = ListItemView.DEFAULT_CUSTOM_VIEW_SIZE`
`48`	`49`	`override var customAccessoryView: View? = null`
	`50`	`+ override var customSecondarySubtitleView: View? = null`
`49`	`51`
`50`	`52`	`override var layoutDensity: ListItemView.LayoutDensity = ListItemView.DEFAULT_LAYOUT_DENSITY`
`51`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -149,6 +149,7 @@ fun ListItemView.setListItem(listItem: IListItem) {`
`149`	`149`	`customView = listItem.customView`
`150`	`150`	`customViewSize = listItem.customViewSize`
`151`	`151`	`customAccessoryView = listItem.customAccessoryView`
	`152`	`+ customSecondarySubtitleView = listItem.customSecondarySubtitleView`
`152`	`153`
`153`	`154`	`layoutDensity = listItem.layoutDensity`
`154`	`155`	`}`