如何在ScrollingActivity中创建Sticky Header

时间:2016-12-29 05:29:02

标签: java android

我使用android studio中的ScrollActivity在滚动时创建一个很酷的动画。 ScrollActivity附带了两个xml文件,分别是content_scrolling.xml和activity_scrolling.xml。我想在content_scrolling.xml中创建粘性标头。我之前创建了粘贴标题,但我遇到的问题是标题没有“粘在”我想要的图像下面,而是粘在屏幕顶部,被图像阻挡。我提供了一个我想要完成的事情的图像,我希望它有助于理解我想要做的事情。谢谢!

Image

activity_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.myapplication.foodapp.ScrollingActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.PopupOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="545dp"
            android:layout_alignParentTop="true"
            android:scaleType="fitXY"
            android:src="@mipmap/food1"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chipotle Chicken Fajitas"
            android:textSize="27sp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="5dp"
            android:textColor="#fff"
            android:id="@+id/first_food_title"/>

        <me.grantland.widget.AutofitTextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="16 ingredients | 284 Calories | 1 hour"
            android:singleLine="true"
            android:textAlignment="center"
            android:textColor="#fff"
            android:layout_gravity="bottom"
            android:textSize="20sp"
            android:id="@+id/spec_text"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_collapseMode="pin"
            />



        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@mipmap/arrow"
            android:id="@id/back_Arrow"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            />


    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

content_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.myapplication.foodapp.ScrollingActivity"
android:id="@+id/nested_scroll_view">


<RelativeLayout
    android:id="@+id/relative_layout1"
    android:layout_width="match_parent"
    android:layout_height="2000dp"
    android:background="#fff">


    <me.grantland.widget.AutofitTextView
        android:id="@+id/spec_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="16 ingredients | 284 Calories | 1 hour"
        android:textAlignment="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textSize="20sp"
        android:layout_alignBottom="@+id/imageView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        app:sizeToFit="true"/>



    <View
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:background="#2C7873"
        android:layout_below="@+id/imageView2"
        android:layout_alignRight="@+id/imageView3"
        android:layout_alignEnd="@+id/imageView3"
        android:id="@+id/ingredient_view"
        />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="50dp"
        android:id="@+id/imageView3"
        android:src="@drawable/servings"
        android:layout_alignBottom="@+id/relativeLayout"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />



    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Ingredients"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold"
        android:paddingLeft="5dp"
        android:paddingTop="15dp"
        android:layout_below="@+id/imageView2"
        android:layout_alignRight="@+id/imageView3"
        android:layout_alignEnd="@+id/imageView3"
        />

    <TextView
        android:id="@+id/bullet_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5px" 
        android:text="@string/_1_lb_boneless_skinless_chicken_breasts_cut_into_thin_strips"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_below="@+id/imageView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/bullet_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_one"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_tsp_ground_cumin"
        android:textAppearance="?android:attr/textAppearanceLarge" />


    <TextView
        android:id="@+id/bullet_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_two"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_tsp_chili_powder"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_three"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/kosher_salt"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_four"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/freshly_ground_black_pepper"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_six"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_five"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_tbsp_canola_oil"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_seven"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_six"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_red_bell_pepper_sliced"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_eight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_seven"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_small_onion_sliced"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_nine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_eight"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_c_sliced_mushrooms"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_ten"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_nine"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_3_garlic_cloves_chopped"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_elven"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_ten"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_tbsp_chopped_chipotles_in_adobo"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_twelve"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_ten"
        android:layout_marginTop="29dp"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_1_1_2_tbsp_fresh_lime_juice"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_thirteen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_twelve"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/_8_warm_flour_tortillas"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_fithteen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_thirteen"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/cilantro_for_serving"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_sixteen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_fithteen"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/lime_wedges_for_serving"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/bullet_fourteen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/bullet_sixteen"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="@string/grated_cheddar_cheese_for_serving"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView23"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:paddingTop="10dp"
        android:text="View Directions"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="15sp"
        android:layout_below="@+id/bullet_fourteen"
        />

    <View
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:background="#2C7873"
        android:layout_below="@+id/textView23"
        android:layout_alignRight="@+id/imageView3"
        android:layout_alignEnd="@+id/imageView3"
        android:id="@+id/view2"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:tag="sticky"/>

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="10dp"
        android:text="Nutrition Facts"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_alignTop="@+id/view2"
        android:layout_alignLeft="@+id/textView23"
        android:layout_alignStart="@+id/textView23" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:text="View More"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textSize="15sp"
        android:layout_alignBottom="@+id/textView15"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="5dp" />


    <RelativeLayout
        android:id="@+id/relativeLayout4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:paddingEnd="15dp"
        android:paddingStart="30dp"
        android:layout_below="@+id/view2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageView
            android:id="@+id/imageView18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/protein" />

        <ImageView
            android:id="@+id/imageView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/imageView18"
            android:layout_toRightOf="@+id/imageView18"
            android:src="@drawable/sodium" />

        <ImageView
            android:id="@+id/imageView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@+id/imageView19"
            android:layout_toRightOf="@+id/imageView19"
            android:src="@drawable/fats" />

        <ImageView
            android:id="@+id/imageView21"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_toEndOf="@+id/imageView20"
            android:layout_toRightOf="@+id/imageView20"
            android:src="@drawable/sugars" />
    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#2C7873"
        android:layout_below="@+id/relativeLayout4"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/view3"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:tag="sticky"/>

    <TextView
        android:id="@+id/textView19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:text="Reviews"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_alignBottom="@+id/view3"
        android:layout_alignLeft="@+id/textView15"
        android:layout_alignStart="@+id/textView15" />

    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="230dp"
        android:layout_height="35dp"
        android:clickable="false"
        android:numStars="5"
        android:scaleX=".5"
        android:scaleY=".5"
        android:layout_alignTop="@+id/textView19"
        android:layout_alignRight="@+id/textView16"
        android:layout_alignEnd="@+id/textView16"
        android:layout_marginTop="-5dp" />

    <TextView
        android:id="@+id/display_review"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#f1fcf0"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="20sp"
        android:layout_below="@+id/view3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>
</android.support.v4.widget.NestedScrollView>

0 个答案:

没有答案