ダメ男のブログ: Android開発 NavigationViewでheaderを実装する

2015年9月23日水曜日

Android開発 NavigationViewでheaderを実装する

公開日：2015年09月23日

記事概要

AndroidのNavigationViewでheaderを実装する方法を記載した記事です

環境

Android Studio 1.3.0
OS X Yosemite
android sdk 23(Android 6.0 Marshmallow(マシュマロ))
com.android.support:design:23.0.0

はじめに

ライブラリに、com.android.support:design:23.0.0を利用します。とても便利なgoogle純正のライブラリです。
適用するアプリとして、山情報アプリのマウンテンチャンネルを使います。

layout xmlの実装

まずは以下のようにlayoutを実装します。


<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navigation_items" />

</android.support.v4.widget.DrawerLayout>

上記のように実装すると、以下の様な画面を表示できます。

Headerの実装

続いてNavigationViewにheaderを実装します。xmlで指定しても良いのですが、今回は固定データのheaderでなく、認証したユーザー情報を表示するヘッダーを表示したいのでinflateHeaderViewでheaderのviewを生成して作成します。

drawer_header.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@color/default_theme_color" >


    <com.ui.widget.BezelImageView
        android:id="@+id/user_image"
        app:maskDrawable="@drawable/circle_mask"
        android:layout_width="@dimen/expert_icon_size"
        android:layout_height="@dimen/expert_icon_size"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/user_name"
        android:layout_below="@id/user_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@android:color/black" />

</RelativeLayout>

java


    private DrawerLayout drawerLayout;
    private TextView mUserName;
    private BezelImageView mUserImage;

    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    NavigationView navigationView = (NavigationView) findViewById(R.id.navigation);


    // header view inflate
    View drawerLayout = navigationView.inflateHeaderView(R.layout.drawer_header);

    mUserName = (TextView)drawerLayout.findViewById(R.id.user_name);
    mUserImage = (BezelImageView)drawerLayout.findViewById(R.id.user_image);

findByIdではなく、inflateHeaderViewを呼び出すことに注意してください。
headerデータが固定情報でない場合、直接xmlにデータを指定できません。
なので、APIから習得するユーザー情報等を表示したい場合は、inflateHeaderViewを利用します。googleのチュートリアルには記載されていないので気をつけてください。

あとはコンパイルすればOKです。

以上

Androidアプリ【マウンテンチャンネル】

Androidアプリ開発にオススメの本

Effective Android

posted with ヨメレバ

TechBooster,小太刀御禄,出村成和,重田大助,西岡靖代,宮川大輔,柏本和俊,あんざいゆき,八木俊広,木村尭海,小林慎治,有山圭二,中西良明,わかめまさひろ,新井祐一,桝井草介,久郷達也,寺園聖文,shige0501,山下智樹,前田章博,秋葉ちひろ,末広尚義,中澤慧,日高正博,塚田翔也,井形圭介,中川幸哉,山崎誠,山下武志,なまそで,橋爪香織,さとうかずのり,l_b__ インプレスジャパン 2014-01-17

Amazon

Kindle