在Android应用程序中实现类似于Twitter配置文件的滚动

时间:2015-08-11 14:21:36

标签: android animation twitter

我是android新手。我正在尝试实现像twitter的个人资料活动那样的滚动功能。推文,照片和收藏夹位于选项卡中,选项卡上方有基本的配置文件数据,如名称,关于,带有两张图片的位置以及一个按钮。当它滚动时,该部分被隐藏,并且标签在顶部被捕捉,现在您可以浏览推文,当您向下滚动时它会回来。

我已在我的活动中添加了标签。每个选项卡都通过片段加载。我使用PagerView添加了标签。

这是我的活动:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:orientation="vertical">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/action_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingTop="5dp"
        android:paddingRight="5dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:id="@+id/cover"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:src="@drawable/image"
            android:scaleType="fitXY"
            android:background="@drawable/image_background"/>

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:id="@+id/profile"
            android:layout_marginTop="80dp"
            android:layout_alignTop="@+id/cover"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:src="@drawable/image"
            android:background="@drawable/image_background"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"


            android:id="@+id/name"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="30dp"
            android:layout_marginRight="20dp"
            android:layout_alignBottom="@+id/profile"
            android:layout_toRightOf="@+id/profile"
            android:layout_alignRight="@+id/cover"
            android:textSize="20sp"/>

    </RelativeLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/linearLayout">



        <com.example.vickyzia.activity.Misc.SlidingTabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tabs"></com.example.vickyzia.activity.Misc.SlidingTabLayout>

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/pager"
            android:layout_weight="1"
            />
    </LinearLayout>



</LinearLayout>

我想将滚动事件添加到此活动中。有什么办法吗?

2 个答案:

答案 0 :(得分:1)

Twitter Like Profile滚动布局

的示例
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toptoolbar"/>
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/prime_white_1">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="@dimen/spacing_largest"
            app:contentScrim="@color/prime_white_1"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <include
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="?attr/actionBarSize"
                layout="@layout/profile_header_layout"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/profile_toolbar_collapse"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                android:background="@color/transparent">

                <android.support.design.widget.TabLayout
                    android:id="@+id/profile_tabs"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/prime_grey_9"
                    app:layout_collapseMode="none"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/prime_green_1"
                    app:tabIndicatorHeight="@dimen/spacing_small"
                    app:tabMode="fixed"/>

            </android.support.v7.widget.Toolbar>

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

    </android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
        android:id="@+id/profile_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

答案 1 :(得分:0)

您应该使用特殊CollapsingToolbarLayout