m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

androidでドロワーメニューを表示したい

なんかかっこよさそう

なので作ってみたいので調べました(^_^;)

SDKでサポートライブラリをインストールする必要が有るようです

f:id:m_shige1979:20150708042914p:plain

プロジェクトを新規で作成する

f:id:m_shige1979:20150708042950p:plain
※右下にすでにサンプルがあるけどブランクのやつから作っていきます

公式サンプル

http://developer.android.com/shareables/training/NavigationDrawer.zip
http://developer.android.com/downloads/design/Android_Design_Icons_20130926.zip

/app/build.gradle
apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "21.1.2"

    defaultConfig {
        applicationId "jp.mshige1979.app.sampledrawer02"
        minSdkVersion 21
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:support-v4:22.+'
}

※compileにサポートライブラリを追加
※一度、クリーンビルドしないと動かないかも?

画面

activity_main.xml
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>

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

※ルートにDrawerLayoutを指定しないといけない

drawer_list_item.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

※ドロワーメニュー用のリストのもの

fragment_planet.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/text2" />

</LinearLayout>

※選択後の画面用のもの

アクティビティ

package jp.mshige1979.app.sampledrawer02;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.support.v4.widget.DrawerLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    private String[] mPlanetTitles = null;
    private DrawerLayout mDrawerLayout = null;
    private ListView mDrawerList = null;
    private ActionBarDrawerToggle mDrawerToggle = null;

    private CharSequence mDrawerTitle;
    private CharSequence mTitle;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTitle = getTitle();
        mDrawerTitle = mTitle;

        // ドロワーメニューのリストの値を初期化
        mPlanetTitles = new String[]{"aaa", "bbb", "ccc", "ddd"};

        // ドロワーレイアウト、リストビューのidを取得
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);

        // リストビューとデータを関連付け
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));

        // 選択時のイベントを登録
        mDrawerList.setOnItemClickListener(
                new ListView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                        selectItem(position);
                    }
                }
        );

        // アクションバーにhomeボタンを追加
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

        // ホームボタンクリック時の動作
        // 押下することで開閉を切り替える
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* メインアクティビティ */
                mDrawerLayout,         /* ドロワーメニュー */
                R.drawable.ic_drawer,  /* ドロワーアイコン */
                R.string.drawer_open,  /* 開く */
                R.string.drawer_close  /* 閉じる */
        ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // onPrepareOptionsMenuを呼びます
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // onPrepareOptionsMenuを呼びます
            }
        };
        // リスナーに登録
        mDrawerLayout.setDrawerListener(mDrawerToggle);


    }

    // ドロワーメニューのリスト選択処理
    private void selectItem(int position) {
        // フラグメントを生成して値を引き渡す
        Fragment fragment = new PlanetFragment();
        Bundle args = new Bundle();
        args.putString(PlanetFragment.ARG_PLANET_TEXT, mPlanetTitles[position]);
        fragment.setArguments(args);

        // 画面切り替え
        FragmentManager fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

        // 選択状態
        mDrawerList.setItemChecked(position, true);

        // タイトル変更
        setTitle(mPlanetTitles[position]);

        // ドロワーメニューを閉じる
        mDrawerLayout.closeDrawer(mDrawerList);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        int id = item.getItemId();

        return super.onOptionsItemSelected(item);

    }

    @Override
    public void setTitle(CharSequence title) {
        // タイトル切り替え
        mTitle = title;
        getActionBar().setTitle(mTitle);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }


    // 選択後の画面のフラグメント
    public static class PlanetFragment extends Fragment {

        public static final String ARG_PLANET_TEXT = "planet_text";


        public PlanetFragment() {
            // Empty constructor required for fragment subclasses
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_planet, container, false);

            String str = getArguments().getString(ARG_PLANET_TEXT);
            TextView text2 = (TextView)rootView.findViewById(R.id.text2);
            text2.setText(str + " Selected! ");

            //getActivity().setTitle(str);
            return rootView;
        }
    }
}

※そこそこマッチョになった感じ…

その他

values/strings.xml
<resources>
    <string name="app_name">SampleDrawer02</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    <string name="drawer_open">Open navigation drawer</string>
    <string name="drawer_close">Close navigation drawer</string>
</resources>

結果

f:id:m_shige1979:20150708061728p:plain

f:id:m_shige1979:20150708061739p:plain

f:id:m_shige1979:20150708061752p:plain

なんとか様になったかも

所感

1つの画面で表示できるものには限界があるので、一部の情報を隠して表示を切り替えることでできることが
増えていく感じがする。
メニュー用のアクティビティを増やすのは手間なのでこの機能はメニューとして役に立ちそう