通話狀態

  • 主機活動：InCallActivity
  • 根版面配置：@layout/in_call_activity

來電畫面

片段。IncomingCallFragment

橫向模式下的通話撥號鍵盤畫面

版面配置：@layout/ongoing_call_fragment

來電畫面

圖 1. 來電畫面

元件 [id:]ClassName 屬性 值
background_image:
BackgroundImageView		 @config/config_background_image_alpha 1.0
用於聯絡人圖片方塊的程式輔助用途。
@config/config_background_image_error_alpha 1.0
透過程式碼用於聯絡人字母資訊方塊。將其設為 0.0 會隱藏背景顏色。
user_profile_container:
@layout/user_profile_large		 無 無
ringing_call_controller_bar:
RingingCallControllerBarFragment		 height @dimen/in_call_controller_bar_height
layout_margintStart
layout_marginEnd
layout_marginBottom		 @dimen/in_call_controller_bar_margin
  • 使用者個人資料。@layout/user_profile_large
    Component [id:]ClassName 屬性 值
    root: LinearLayout orientation horizontal
    paddingStart
    paddingEnd    		 @dimen/in_call_user_profile_margin
    user_profile_avatar: ImageView width in_call_avatar_icon_size
    height in_call_avatar_icon_size
    scaleType fitCenter
    User info: LinearLayout paddingStart @dimen/in_call_margin_between_avatar_and_text
    user_profile_title:TextView textAppearance @style/TextAppearance.InCallUserTitle
    user_profile_phone_number: TextView textAppearance @style/TextAppearance.InCallUserPhoneNumber
    marginTop @dimen/in_call_phone_number_margin_top
    user_profile_call_state: Chronometer textAppearance @style/TextAppearance.InCallState
    marginTop @dimen/in_call_state_margin_top
  • RingingCallControllerBarFragment。@layout/ringing_call_controller_bar_fragment
    Component [id:]ClassName 屬性 值
    root: ConstraintLayout height @dimen/in_call_controller_bar_height
    background @android:color/transparent
    answer_call_button: ImageView width
    height    		 @dimen/ringing_call_button_touch_target_size
    background @drawable/dialer_ripple_background
    src @drawable/ic_phone
    tint @color/phone_call
    scaleType center
    answer_call_text: TextView marginStart @dimen/ringing_call_text_margin
    text @string/answer_call
    textAppearance ?android:attr/textAppearanceLarge
    end_call_button: ImageView width
    height    		 @dimen/ringing_call_button_touch_target_size
    background @drawable/dialer_ripple_background
    src @drawable/ic_call_end
    tint @color/phone_end_call
    scaleType center
    end_call_text: TextView marginStart @dimen/ringing_call_text_margin
    text @string/decline_call
    textAppearance ?android:attr/textAppearanceLarge
    mid_line: Guideline constraintGuide_percent 0.5

在直向模式下接聽來電

直向模式的來電頁面與橫向模式共用相同的 @layout/ongoing_call_fragment，但 @layout[-port]/user_profile_large 的版面配置不同。

在直向模式下顯示的來電頁面

圖 2. 直向模式的來電

  • 使用者個人資料。@layout/user_profile_large
    Component [id:]ClassName 屬性 值
    root: LinearLayout orientation vertical
    gravity center
    user_profile_avatar: ImageView width in_call_avatar_icon_size
    height in_call_avatar_icon_size
    scaleType fitCenter
    user_profile_title: TextView textAppearance @style/TextAppearance.InCallUserTitle
    paddingTop @dimen/in_call_margin_between_avatar_and_text
    user_profile_phone_number: TextView textAppearance @style/TextAppearance.InCallUserPhoneNumber
    paddingTop @dimen/in_call_phone_number_margin_top
    user_profile_call_state: Chronometer textAppearance @style/TextAppearance.InCallState
    paddingTop @dimen/in_call_state_margin_top

通話中頁面

片段。OngoingCallFragment

橫向模式

橫向模式的通話中畫面

圖 3. 橫向模式的通話中畫面

Component [id:]ClassName 屬性 值
background_image: BackgroundImageView @config/config_background_image_alpha 1.0
用於聯絡人圖片方塊的程式輔助用途。
@config/config_background_image_error_alpha 1.0
透過程式碼用於聯絡人字母資訊方塊。設為 0.0 時，背景顏色會隱藏。
其他檢視畫面的容器：ConstraintLayout background @android:color/transparent
需要此屬性，才能讓控制列按鈕產生漣漪效果。
incall_dialpad_fragment: InCallDialpadFragment 無 請參閱「通話期間的撥號鍵盤」
user_profile_container: @layout/user_profile_large 無 與來電頁面上的 @layout/user_profile_large 相同。
  • 橫向模式
  • 直向模式
onhold_user_profile: OnHoldCallUserProfileFragment height @dimen/onhold_user_info_height
layout_marginTop @dimen/onhold_profile_margin_y
layout_marginStart
layout_marginEnd		 @dimen/onhold_profile_margin_x
ongoing_call_control_bar: OnGoingCallControllerBarFragment layout_marginBottom @dimen/in_call_controller_bar_margin
layout_marginHorizontal @dimen/in_call_controller_bar_margin
  • OnHoldCallUserProfileFragment。@layout/onhold_user_profile
    元件 [id:]ClassName 屬性 值
    root: CardView android:elevation @dimen/dialer_card_elevation
    cardBackgroundColor @color/onhold_call_background
    cardCornerRadius @dimen/onhold_profile_corner_radius
    swap_calls_view: ConstraintLayout background ?android:attr/selectableItemBackground
    guideline: Guideline layout_constraintGuide_begin @dimen/onhold_profile_guideline
    icon: ImageView width
    height    		 @dimen/avatar_icon_size
    scaleType centerCrop
    layout_marginStart @dimen/onhold_profile_avatar_margin
    title: TextView textAppearance ?android:attr/textAppearanceLarge
    text: TextView text @string/onhold_call_label
    textAppearance ?android:attr/textAppearanceSmall
    swap_call_button: ImageView src @drawable/ic_swap_calls
    tint @color/secondary_icon_color
    scaleType center
    paddingLeft
    paddingRight    		 @dimen/swap_call_button_margin
  • OnGoingCallControllerBarFragment。@layout/on_going_call_controller_bar_fragment
    Component [id:]ClassName 屬性 值
    root: ConstraintLayout height @dimen/in_call_controller_bar_height
    mute_button: ImageView width
    height    		 @dimen/in_call_button_size
    scaleType center
    src @drawable/ic_mute_activatable
    background @drawable/dialer_ripple_background
    toggle_dialpad_button: ImageView width
    height    		 @dimen/in_call_button_size
    scaleType center
    src @drawable/ic_dialpad_activatable
    background @drawable/dialer_ripple_background
    end_call_button: ImageView style @style/DialpadPrimaryButton
    src @drawable/ic_call_end_button
    voice_channel_view: LinearLayout orientation vertical
    voice_channel_button: ImageView width
    height    		 @dimen/in_call_button_size
    scaleType center
    src @drawable/ic_audio_route_vehicle_activatable
    background @drawable/dialer_ripple_background
    voice_channel_text: TextView visibility gone
    pause_button: ImageView width
    height    		 @dimen/in_call_button_size
    scaleType center
    src @drawable/ic_pause_activatable
    background @drawable/dialer_ripple_background

直向模式的通話中頁面

圖 4. 直向模式的通話中頁面

直向模式採用相同的版面配置，但 @layout/user_profile_large 的版面配置有所不同。如要瞭解如何使用肖像模式，請參閱來電頁面。

通話中的撥號鍵盤

片段。InCallDialpadFragment

橫向模式

版面配置。@layout/incall_dialpad_fragment

橫向模式下的通話撥號鍵盤畫面

圖 5. 橫向模式的 InCall 撥號鍵盤畫面

元件 [id:]ClassName 屬性 值
divider: Guideline layout_constraintGuide_percent 0.5
dialpad_fragment: KeypadFragment 無 請參閱「鍵盤」
dialpad_info_boundaries: View height 與「dialpad_fragment」的房價相同
layout_constraintDimensionRatio W, 1:1
call_state: Chronometer layout_width match_parent，避免在文字更新時重新繪製整個檢視畫面
textAppearance @style/TextAppearance.InCallState
marginBottom @dimen/call_state_padding
title: TextView textAppearance @style/TextAppearance.DialNumber

在通話中，直向模式下的撥號鍵盤

版面配置。@layout[-port]/incall_dialpad_fragment

在通話中，撥號盤畫面為直向模式

圖 6. 在直向模式下，通話中的撥號盤畫面

元件 [id:]ClassName 屬性 值
dialpad_fragment: KeypadFragment layout_marginTop @dimen/keypad_margin
call_state: Chronometer layout_width match_parent，避免在文字更新時重新繪製整個檢視畫面。
gravity center
textAppearance @style/TextAppearance.InCallState
marginStart
marginEnd		 @dimen/dialpad_info_edge_padding_size
title: TextView gravity 結束時，寬度會設為 wrap_content，以便將撥出的號碼置中，並在開始時淡出。
textAppearance @style/TextAppearance.DialNumber
marginStart
marginEnd		 @dimen/dialpad_info_edge_padding_size

KeypadFragment。請參閱「撥號鍵盤」