Skip to content

Commit

Permalink
Merged PR 2827: Added anchor_view and title_option in dialog
Browse files Browse the repository at this point in the history 
-> Added anchor_view option i dialog
-> Added title_option in dialog(user can select any of three option->(DEFAULT,HIDE_TITLE, BELOW_TITLE)
-> Added demo for all the new feature in DrawerActivity

Related work items: #7972
  • Loading branch information
@krritik @AiPratap
krritik authored and AiPratap committed Jul 10, 2020
1 parent 0e548c3 commit 61eac66
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 22 deletions.
6 changes: 6 additions & 0 deletions FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/DrawerActivity.kt
View file
Expand Up @@ -34,6 +34,9 @@ class DrawerActivity : DemoActivity(), OnDrawerContentCreatedListener {
show_no_fade_bottom_dialog_button.setOnClickListener(this::clickListener)
show_top_dialog_button.setOnClickListener(this::clickListener)
show_no_fade_top_dialog_button.setOnClickListener(this::clickListener)
show_anchor_view_top_dialog_button.setOnClickListener(this::clickListener)
show_no_title_top_dialog_button.setOnClickListener(this::clickListener)
show_below_title_top_dialog_button.setOnClickListener(this::clickListener)
show_left_dialog_button.setOnClickListener(this::clickListener)
show_right_dialog_button.setOnClickListener(this::clickListener)
}
Expand All @@ -44,6 +47,9 @@ class DrawerActivity : DemoActivity(), OnDrawerContentCreatedListener {
R.id.show_no_fade_bottom_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.BOTTOM, 0.0f) }
R.id.show_top_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.TOP) }
R.id.show_no_fade_top_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.TOP, 0.0f) }
R.id.show_anchor_view_top_dialog_button-> { drawerDialogDemo = DrawerDialog(this,DrawerDialog.BehaviorType.TOP, anchorView = findViewById<View>(R.id.show_anchor_view_top_dialog_button)) }
R.id.show_no_title_top_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.TOP, titleBehavior = DrawerDialog.TitleBehavior.HIDE_TITLE ) }
R.id.show_below_title_top_dialog_button-> { drawerDialogDemo = DrawerDialog(this,DrawerDialog.BehaviorType.TOP, titleBehavior =DrawerDialog.TitleBehavior.BELOW_TITLE) }
R.id.show_left_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.LEFT) }
R.id.show_right_dialog_button-> { drawerDialogDemo = DrawerDialog(this, DrawerDialog.BehaviorType.RIGHT) }
}
Expand Down
28 changes: 24 additions & 4 deletions FluentUI.Demo/src/main/res/layout/activity_drawer.xml
View file
Expand Up @@ -33,19 +33,26 @@
android:text="@string/no_fade_bottom_dialog_button" />

<Button
android:id="@+id/show_left_dialog_button"
android:id="@+id/show_anchor_view_top_dialog_button"
android:layout_marginTop="@dimen/drawer_button_top_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/drawer_left_dialog_button" />
android:text="@string/anchor_view_top_dialog_button" />


<Button
android:id="@+id/show_right_dialog_button"
android:id="@+id/show_no_title_top_dialog_button"
android:layout_marginTop="@dimen/fluentui_content_inset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/drawer_right_dialog_button" />
android:text="@string/no_title_top_dialog_button" />

<Button
android:id="@+id/show_below_title_top_dialog_button"
android:layout_marginTop="@dimen/fluentui_content_inset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/below_title_top_dialog_button" />

<Button
android:id="@+id/show_top_dialog_button"
Expand All @@ -61,4 +68,17 @@
android:layout_height="wrap_content"
android:text="@string/no_fade_top_dialog_button" />

<Button
android:id="@+id/show_left_dialog_button"
android:layout_marginTop="@dimen/fluentui_content_inset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/drawer_left_dialog_button" />

<Button
android:id="@+id/show_right_dialog_button"
android:layout_marginTop="@dimen/fluentui_content_inset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/drawer_right_dialog_button" />
</LinearLayout>
2 changes: 1 addition & 1 deletion FluentUI.Demo/src/main/res/values/dimens.xml
View file
Expand Up @@ -26,7 +26,7 @@
<!--Drawer-->
<dimen name="drawer_persona_list_height">400dp</dimen>
<dimen name="drawer_persona_list_width">300dp</dimen>
<dimen name="drawer_button_top_margin">250dp</dimen>
<dimen name="drawer_button_top_margin">180dp</dimen>

<!--Launch Screen-->
<dimen name="fluentui_launch_logo_bottom_spacing">53dp</dimen>
Expand Down
5 changes: 4 additions & 1 deletion FluentUI.Demo/src/main/res/values/strings.xml
View file
Expand Up @@ -149,9 +149,12 @@
<!--Drawer-->
<string name="drawer_button">Show drawer</string>
<string name="drawer_dialog_button">Show drawer dialog</string>
<string name="drawer_top_dialog_button">Show top drawer</string>
<string name="no_fade_bottom_dialog_button">No fade bottom dialog</string>
<string name="drawer_top_dialog_button">Show top drawer</string>
<string name="no_fade_top_dialog_button">No fade top dialog</string>
<string name="anchor_view_top_dialog_button"> Show anchor view top dialog</string>
<string name="no_title_top_dialog_button"> Show no title top dialog</string>
<string name="below_title_top_dialog_button"> Show below title top dialog</string>
<string name="drawer_right_dialog_button">Show right drawer</string>
<string name="drawer_left_dialog_button">Show left drawer</string>

Expand Down
63 changes: 47 additions & 16 deletions FluentUI/src/main/java/com/microsoft/fluentui/drawer/DrawerDialog.kt
View file
Expand Up @@ -6,16 +6,20 @@
package com.microsoft.fluentui.drawer

import android.content.Context
import android.graphics.Point
import android.os.Handler
import android.support.annotation.StyleRes
import android.support.design.widget.BottomSheetBehavior
import android.support.v7.app.ActionBar
import android.support.design.widget.CoordinatorLayout
import android.support.v7.app.AppCompatDialog
import android.view.Gravity
import android.view.View
import android.view.ViewGroup
import android.view.Window
import android.view.WindowManager
import com.microsoft.fluentui.R
import com.microsoft.fluentui.theming.FluentUIContextThemeWrapper
import com.microsoft.fluentui.util.activity
import com.microsoft.fluentui.util.displaySize
import com.microsoft.fluentui.util.statusBarHeight
import kotlinx.android.synthetic.main.dialog_drawer.*
Expand All @@ -34,6 +38,10 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior
BOTTOM,TOP, LEFT, RIGHT
}

enum class TitleBehavior {
DEFAULT, HIDE_TITLE, BELOW_TITLE
}

var onDrawerContentCreatedListener: OnDrawerContentCreatedListener? = null

private var sheetBehavior: CoordinatorLayout.Behavior<View>? = null
Expand All @@ -51,10 +59,15 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior

private var isExpanded: Boolean = false
protected val container: View
private var dimValue = 0.5f

/**
* This field contains dim value of background[0.0 -> no fade, 0.5-> dim, 1.0->opaque]
* This field [dimValue] contains dim value of background[0.0 -> no fade, 0.5-> dim, 1.0->opaque]
* This field [anchorView] contains the anchor view below which the dialog will appear
* This field [titleBehavior] stores whether the dialog should be below title bar or hide titler bar.
* */
private var dimValue = 0.5f
private var anchorView: View? = null
private var titleBehavior: TitleBehavior = TitleBehavior.DEFAULT

init {
this.container = when(behaviorType){
Expand All @@ -67,8 +80,10 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior
}
}

constructor(context: Context, behaviorType: BehaviorType, dimValue: Float, @StyleRes theme: Int = 0) : this(context, behaviorType, theme) {
constructor(context: Context, behaviorType: BehaviorType=BehaviorType.BOTTOM, dimValue: Float=0.5f, anchorView:View?=null, titleBehavior: TitleBehavior=TitleBehavior.DEFAULT, @StyleRes theme: Int = 0) : this(context, behaviorType, theme) {
this.dimValue = dimValue
this.anchorView = anchorView
this.titleBehavior = titleBehavior
}

override fun setContentView(layoutResID: Int) {
Expand Down Expand Up @@ -100,11 +115,38 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior

override fun onAttachedToWindow() {
super.onAttachedToWindow()
var topMargin = 0

if(anchorView != null || titleBehavior != TitleBehavior.DEFAULT)
supportRequestWindowFeature(Window.FEATURE_NO_TITLE)

if(anchorView != null) {
val screenPos = IntArray(2)
anchorView?.getLocationOnScreen(screenPos)
topMargin= screenPos[1]+anchorView!!.height
}
else {
when(titleBehavior) {
TitleBehavior.HIDE_TITLE -> {
topMargin = context.statusBarHeight
}
TitleBehavior.BELOW_TITLE -> {
val actionBar:ActionBar? = context.activity?.supportActionBar
if(actionBar != null)
topMargin = context.statusBarHeight+ actionBar.height
}
TitleBehavior.DEFAULT -> { }
}
}

val displaySize: Point = context.displaySize
val layoutParams: WindowManager.LayoutParams? = window?.attributes
layoutParams?.gravity = Gravity.TOP
layoutParams?.y = topMargin
layoutParams?.dimAmount = this.dimValue
window?.attributes = layoutParams
window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
window?.setLayout(displaySize.x, displaySize.y-topMargin)

super.setContentView(container)
when(sheetBehavior){
is BottomSheetBehavior -> (sheetBehavior as BottomSheetBehavior<View>).setBottomSheetCallback(sheetCallback)
Expand Down Expand Up @@ -139,7 +181,6 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior
// For persistent instances calling requestLayout fixes incorrect positioning of the drawer
// after rotation from landscape to portrait
drawer.requestLayout()
updateHeight()
when(sheetBehavior){
is BottomSheetBehavior -> (sheetBehavior as BottomSheetBehavior<View>).state = BottomSheetBehavior.STATE_EXPANDED
is TopSheetBehavior -> (sheetBehavior as TopSheetBehavior<View>).setStateOuter(TopSheetBehavior.STATE_EXPANDED)
Expand All @@ -148,16 +189,6 @@ open class DrawerDialog @JvmOverloads constructor(context: Context, val behavior
isExpanded = true
}

// Make sure dialog is not under status bar and is fully visible
private fun updateHeight() {
val maxHeight = context.displaySize.y - context.statusBarHeight
if (drawer.height > maxHeight) {
val layoutParams = drawer.layoutParams
layoutParams.height = maxHeight
drawer.layoutParams = layoutParams
}
}

protected fun collapse() {
when(sheetBehavior){
is BottomSheetBehavior -> (sheetBehavior as BottomSheetBehavior<View>).state = BottomSheetBehavior.STATE_COLLAPSED
Expand Down

0 comments on commit 61eac66

Please sign in to comment.