【问题标题】:Is it possible to do a simple image view parallax with coordinator layout without the collpsing toolbar layout?是否可以在没有折叠工具栏布局的情况下使用 coordinatorlayout 进行简单的图像视图视差?
【发布时间】:2015-10-01 23:23:51
【问题描述】:

你好,假设我有一个包含以下内容的布局

    <ScrollView
        android:id="@+id/scroll"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button">

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:scaleType="centerCrop"
            android:src="@drawable/android" />
        <View android:id="@+id/anchor"
            android:layout_width="match_parent"
            android:layout_height="240dp" />
        <TextView
            android:id="@+id/body"
            android:layout_below="@+id/anchor"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:textColor="@android:color/black"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:text="@string/sample" />
    </RelativeLayout>

    </ScrollView>

是否可以使用协调器布局使图像视图在向上或向下滚动时以滚动视图的一半速度移动。

【问题讨论】:

    标签: android coordinator-layout


    【解决方案1】:

    很少有库可以帮助您处理视差:

    尤其是 ParallaxEveryWhere 令人印象深刻。但是你应该根据你的使用情况来采用。

    【讨论】:

      【解决方案2】:

      可能不是 CoordinatorLayout 的预期用途,但我相信我通过执行以下操作达到了您的预期效果:

      <android.support.design.widget.CoordinatorLayout
      android:id="@+id/main_content"
      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">
      
      <android.support.design.widget.AppBarLayout
          android:id="@+id/appbar"
          android:layout_width="match_parent"
          android:layout_height="300px"
          android:fitsSystemWindows="true"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
      
          <android.support.design.widget.CollapsingToolbarLayout
              android:id="@+id/collapsing_toolbar"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:fitsSystemWindows="true"
              app:layout_scrollFlags="scroll|exitUntilCollapsed">
      
              <ImageView
                  android:id="@+id/backdrop"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:paddingTop="?attr/actionBarSize"
                  android:fitsSystemWindows="true"
                  android:scaleType="centerCrop"
                  app:layout_collapseMode="parallax"/>
      
              <android.support.v7.widget.Toolbar
                  android:id="@+id/myToolbar"
                  android:layout_width="match_parent"
                  android:layout_height="?attr/actionBarSize"
                  android:background="?attr/colorPrimary"
                  app:layout_collapseMode="pin"
                  app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                  <TextView android:id="@+id/textViewTitle"  
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"/>
                  </android.support.v7.widget.Toolbar>
          </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"
          app:layout_behavior="@string/appbar_scrolling_view_behavior">
      
          <!-- my content that scrolls over the backdrop image -->
      
      </android.support.v4.widget.NestedScrollView>
      

      【讨论】:

      • 这对我有帮助!但正如你提到的,这可能不是预期的用途。但是,如果您想查看整个图片,我可以建议将 imageview 的 padding top 更改为 margin top
      猜你喜欢
      • 2016-07-22
      • 1970-01-01
      • 1970-01-01
      • 2015-10-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-11-09
      相关资源
      最近更新 更多