android - カレンダー アプリの [キャンセル] ボタン - アクション バーの一部ですか?

Question

こんにちは、カレンダー アプリの [キャンセル/完了] ボタンについてです。これらの 2 つのボタンは上部に固定されており、下部の「フォーム」をスクロールしても常に表示されます。

それはアクションバーの一部ですか？もしそうなら、実装はどのように見えるべきですか？

Answer 1

Android はオープン ソースであり、aosp を実行している Android デバイスにプリインストールされているほとんどのアプリはオープン ソースであることを忘れないでください。

プロジェクトは次のとおりです: https://github.com/android/platform_packages_apps_calendar

はい、カスタム ActionBar セットアップです。XML は次のとおりです。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
android:dividerPadding="12dip
android:showDividers="middle">

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_cancel
    style="@style/EditEventCustomActionButton">

<ImageView
    android:src="@drawable/ic_menu_cancel_holo_light"
    style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/discard_label"
        style="@style/EditEventCustomActionButtonText" />

</LinearLayout>

<!-- id must match corresponding menu item id -->
<LinearLayout
    android:id="@+id/action_done"
    style="@style/EditEventCustomActionButton">

    <ImageView
        android:src="@drawable/ic_menu_done_holo_light"
        style="@style/EditEventCustomActionButtonImage" />
    <TextView
        android:text="@string/save_label"
        style="@style/EditEventCustomActionButtonText" />

    </LinearLayout
</LinearLayout>

これは後で実行時に設定されます。

View actionBarButtons = inflater.inflate(R.layout.edit_event_custom_actionbar,
new LinearLayout(mContext), false);
View cancelActionView = actionBarButtons.findViewById(R.id.action_cancel);
cancelActionView.setOnClickListener(mActionBarListener);
View doneActionView = actionBarButtons.findViewById(R.id.action_done);
doneActionView.setOnClickListener(mActionBarListener);
mContext.getActionBar().setCustomView(actionBarButtons);

役に立ったことを願っています

Answer 2

daniel_c05 の回答に基づいて、アプリでこれを機能させることができましたが、正しく機能させるには、既存の回答のいずれにも記載されていないいくつかの追加手順が必要でした。

1) レイアウト自体を簡単に取得する必要があります。元は https://github.com/android/platform_packages_apps_calendar/blob/master/res/layout/edit_event_custom_actionbar.xmlから簡単に引用できます。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:divider="?android:attr/dividerVertical"
    android:dividerPadding="12dip
    android:showDividers="middle">

    <!-- id must match corresponding menu item id -->
    <LinearLayout
        android:id="@+id/action_cancel
        style="@style/EditEventCustomActionButton">

        <ImageView
            android:src="@drawable/ic_menu_cancel_holo_light"
            style="@style/EditEventCustomActionButtonImage" />

        <TextView
            android:text="@string/discard_label"
            style="@style/EditEventCustomActionButtonText" />

    </LinearLayout>

    <!-- id must match corresponding menu item id -->
    <LinearLayout
        android:id="@+id/action_done"
        style="@style/EditEventCustomActionButton">

        <ImageView
            android:src="@drawable/ic_menu_done_holo_light"
            style="@style/EditEventCustomActionButtonImage" />

        <TextView
            android:text="@string/save_label"
            style="@style/EditEventCustomActionButtonText" />

    </LinearLayout>
</LinearLayout>

2)それに合わせてスタイルも必要になります。元は https://github.com/android/platform_packages_apps_calendar/blob/master/res/values/styles.xmlから簡単に引用できます。

<style name="EditEventCustomActionButton" parent="android:style/Widget.Holo.Light.ActionButton">
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:focusable">true</item>
    <item name="android:orientation">horizontal</item>
</style>

<style name="EditEventCustomActionButtonImage">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:padding">4dp</item>
</style>

<style name="EditEventCustomActionButtonText">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:textAppearance">?android:attr/actionMenuTextAppearance</item>
    <item name="android:textColor">?android:attr/actionMenuTextColor</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:singleLine">true</item>
    <item name="android:ellipsize">none</item>
    <item name="android:padding">4dp</item>
</style>

3) また、ボタン ドローアブルを取得するか、独自のものに置き換える必要があります。これらは、 https ://github.com/android/platform_packages_apps_calendar/tree/master/res のさまざまなドローアブル フォルダーにあります。

4) 現在不足しているのは、上記のリンクで見つけることができる文字列リソースだけですが、既に定義した独自のものに置き換えただけです。

5) 実際に正しく動作させるには、単に膨らませるだけでなく、もう少し多くのことをしなければなりませんでした。以下は、OnCreate を機能させるために必要な最小量です。私は Xamarin で作業していましたが、簡単にするために Java と Xamarin の両方のバージョンを入れました。公正な警告: Java バージョンはテストしていません。

ジャワ

// Inflate the custom view and add click handlers for the buttons
View actionBarButtons = inflater.inflate(R.layout.edit_event_custom_actionbar,
    new LinearLayout(mContext), false);

View cancelActionView = actionBarButtons.findViewById(R.id.action_cancel);
cancelActionView.setOnClickListener(mActionBarListener);

View doneActionView = actionBarButtons.findViewById(R.id.action_done);
doneActionView.setOnClickListener(mActionBarListener);

// Retrieve an instance of the Activity's ActionBar
ActionBar actionBar = mContext.getActionBar();

// Hide the icon, title and home/up button
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);

// Set the custom view and allow the bar to show it
actionBar.setCustomView(actionBarButtons);
actionBar.setDisplayShowCustomEnabled(true);

Xamarin C#

// Inflate layout for custom action bar with save & cancel buttons
var actionBarLayout = (LinearLayout)LayoutInflater.Inflate(
    Resource.Layout.ActionBarSave, new LinearLayout(BaseContext), false);

var saveButton = actionBarLayout.FindViewById<LinearLayout (Resource.Id.action_done);
saveButton.Click += saveButton_Click;

var cancelButton = actionBarLayout.FindViewById<LinearLayout>(Resource.Id.action_cancel);
cancelButton.Click += cancelButton_Click;

// Hide the icon, title and home/up button
ActionBar.SetDisplayShowHomeEnabled(false);
ActionBar.SetDisplayHomeAsUpEnabled(false);
ActionBar.SetDisplayShowTitleEnabled(false);

// Set the custom view and allow the bar to show it
var layoutParams = new ActionBar.LayoutParams(
    ActionBar.LayoutParams.MatchParent,
    ActionBar.LayoutParams.MatchParent);
ActionBar.SetCustomView(actionBarLayout, layoutParams);
ActionBar.SetDisplayShowCustomEnabled(true);

それを機能させるために必要だったのはそれだけです。私はできるだけ包括的であるように努めました。これにより、誰かがグーグルで他の回答にないステップを見つけようとするのを防ぐことができれば幸いです。