次のようなレイアウトを実現しようとしました。CardViewオーバーラップの作成方法AppBarLayout
注意すべき点がいくつかあります。私がxmlレイアウトでnestedscrollviewを持っているので、appbarと重なるcardviewはnestedscrollviewの一部ではないと考えられます。 cardviewは正しく配置されていますが、appbarlayoutの直下に配置されています。
次のようなレイアウトを実現しようとしました。CardViewオーバーラップの作成方法AppBarLayout
注意すべき点がいくつかあります。私がxmlレイアウトでnestedscrollviewを持っているので、appbarと重なるcardviewはnestedscrollviewの一部ではないと考えられます。 cardviewは正しく配置されていますが、appbarlayoutの直下に配置されています。
次のレイアウトで試してみてください。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<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="200dp"
android:background="@color/colorAccent"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="@+id/toolbar_logo"
android:src="@drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="@+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
これはこれを達成するための良い方法です。唯一の問題は、コーディネーターのレイアウトを使用していないことです。ユーザーがスクロールダウンすると、最上部のカードがフェードアウトします。ありがとう。 –
私はちょうどこれを解決しました。私はCardViewに高度値を与えていない、それは間違っていた。私はCoordinatorLayoutで最後に来るようにすると上に置くべきだと思ったばかりです。それは今働く。標高値を追加しました。ここにコードはありますか?
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="@dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>
カスタム背景を持つCardViewではなくAppbarLayoutだと思いますか? –
@ cricket_007私はAppBarLayoutでCardViewを実装しようとしています。私は、ユーザーがスクロールダウンするとカードビューがフェードアウトされるような動作を追加したいと思います。ありがとう。 –
ここでは重複があります。https://stackoverflow.com/questions/31031918/overlaying-content-above-appbarlayout-using-new-material-design –