[英]“Shrink” CardView while scrolling in another view
Screenshot 截图
As you can see, the layout is a bit too big for the older device. 如您所见,对于较旧的设备,布局有点太大。 My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger.
我的想法是在用户在白色区域(ViewPager)中滚动时缩小CardView使其变大。 I have seen it working well in another app (can't remember which).
我已经看到它在另一个应用程序中运行良好(不记得是哪个)。 I have no idea how I can do it, do I need write it programmatically?
我不知道该怎么做,是否需要以编程方式编写?
XML: XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".WordActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="@font/poppins"
android:text="@string/word_title"
android:textColor="@android:color/white"
android:textSize="30sp" />
<TextView
android:id="@+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/wordTitle"
android:layout_alignStart="@id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="@font/poppins"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="@+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="@font/bungee_hairline"
android:text="@string/powered"
android:textColor="@android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cardView">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/primary"
android:elevation="5dp"
app:tabIndicatorColor="@android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time. 它可能不适用于您当前的布局,但是如果您可以集成Android的折叠式工具栏 ,则可以节省一些时间。
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise 否则,你可以使用像这样当用户在列表的顶部,并显示视图进行检测,否则隐藏它
Try this sample layout, just change the code inside nested scrollview with your tablayout 试试这个示例布局,只需使用tablayout更改嵌套scrollview内的代码
<android.support.constraint.ConstraintLayout
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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light"/>
</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:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot 这是我的示例屏幕截图
Scene 1 场景1
Scene 2 场景2
try again with this sample layout. 请尝试使用此示例布局。
activity_main2.xml activity_main2.xml
<?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:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="@drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
scene 1 场景1
scene 2 场景2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.