Skip to content

Instantly share code, notes, and snippets.

@daichan4649
Last active September 6, 2017 01:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daichan4649/4367183a263b6ae54d5fe843dd0f7647 to your computer and use it in GitHub Desktop.
Save daichan4649/4367183a263b6ae54d5fe843dd0f7647 to your computer and use it in GitHub Desktop.
メイン画面のレイアウト
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="daichan4649.jazzspotfukuoka.view.activity.MainActivity">
<!-- 地図エリア -->
<FrameLayout
android:id="@+id/map_area"
android:layout_width="match_parent"
android:layout_height="200dp">
<!-- 地図 -->
<fragment
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- マーカー切替ボタン -->
<Button
android:id="@+id/change_marker"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_gravity="right|top"
android:layout_marginRight="10dp"
android:layout_marginTop="60dp"
android:background="@drawable/ic_marker_background" />
<!-- 地図拡大縮小ボタン -->
<Button
android:id="@+id/expand_map"
android:layout_width="42dp"
android:layout_height="42dp"
android:layout_gravity="right|bottom"
android:layout_marginBottom="8dp"
android:layout_marginRight="10dp"
android:background="@drawable/ic_expand_background" />
</FrameLayout>
<!-- セッション一覧エリア -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/session_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
<!-- 日付 -->
<TextView
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:paddingBottom="4dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="4dp"
android:text="9/8(金)" />
</FrameLayout>
</LinearLayout>
@daichan4649
Copy link
Author

daichan4649 commented Sep 4, 2017

現在のメイン画面の構成がざっくりこんな感じになってます。ご指摘していただいた、
「セッション一覧を8dpくらい上にしてshadowをつけるとよさそう」という意味は、
「セッション一覧を (ToolBar と同じように) 地図の上に重なって見えるようにする」という意味でしょうか??
(GoogleMap の BottomSheet のような感じ??)

もしそうであれば、、
BottomSheet を使用せずに階層構造をつけるためには・・
普通は FrameLayout と 各 Layout の elevation 設定(自動で shadow が入るやつ)で頑張るかんじなのでしょうか??

現在の構造は上記のとおり、

LinearLayout
- FrameLayout(地図)
- FrameLayout(リスト)

という感じです。修正するとしたら、

FrameLayout
- 1層目 地図(底面)
- 2層目 リスト(ここに elevation 設定?)

大きくこんな形になるのか・・?!
このへんの定石がいまいちわからなくて、うーーんどうしたもんだろうか、となっております。
低レベルかつ不躾な質問になって申し訳ありません!

@konifar
Copy link

konifar commented Sep 5, 2017

BottomSheet を使用せずに階層構造をつけるためには・・
普通は FrameLayout と 各 Layout の elevation 設定(自動で shadow が入るやつ)で頑張るかんじなのでしょうか??

そのイメージです!

@konifar
Copy link

konifar commented Sep 5, 2017

    <!-- セッション一覧エリア -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"
        app:elevation="8dp">

@daichan4649
Copy link
Author

daichan4649 commented Sep 6, 2017

なるほど・・やってみます。
単純に elevation だけで shadow つくのですね・・
助かりました!ありがとうございます!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment