ぴよぴよエンジニアの日記

クラウドベンダーに勤める見習いSEの日記です。発言は私自身の見解であり、必ずしも所属組織の立場、戦略、意見を代表するものではありません。

Xamarin.Forms の NavigationBar に影を付ける(Android)

Xamarin.Forms で NavigationPage を使用する場合において、NavigationBar に影を付ける方法です.

Android の Toolbar と TabLayout に影を付けます(Prism.Forms を用いた実装です).



実装環境

  • Xamarin.Forms 2.3.0.49
  • Prism.Forms 6.1.0-pre4



影を付ける

Android プロジェクトのレイアウトファイルを修正します.

f:id:Santea:20160904182821p:plain

Prism.Forms でプロジェクトを作成すると、tabs.xml と toolbar.xml が自動生成されていると思います.



public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.tabs;
        ToolbarResource = Resource.Layout.toolbar;

        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        Xamarin.FormsMaps.Init(this, bundle);
        LoadApplication(new App());
    }
}

これらのレイアウトファイルは、MainActivity.cs の OnCreate で参照されています.

これらのレイアウトファイルを修正することで任意のデザインを指定できるようになります.



<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways" />

こちらが Toolbar のレイアウトファイルになります.

android:elevation="4dp"

重要なのはこちらの1行.

これで影が付きます.


f:id:Santea:20160904183748p:plain

描画結果です.



<android.support.design.widget.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="?attr/colorAccent"
    app:tabGravity="fill"
    app:tabMode="fixed" />

TabLayout のレイアウトファイルです.

android:elevation="4dp"

同様に影を付けるのはこの1文です.


f:id:Santea:20160904184923p:plain

描画結果です.




以上です.