[英]Collapsing toolbar with Additional Information and viewpager
I want to design a layout like above image with Collapsing toolbar Effect, I have already tried collapsing toolbar with viewpager but with that I can add only Image and viewpgaer, I want to add the below information and then viewpager, please help me here, if anyone have any idea. 我想使用折叠工具栏效果设计类似上图的布局,我已经尝试过使用viewpager折叠工具栏,但是我只能添加Image和viewpgaer,我想添加以下信息,然后添加viewpager,请在这里帮助我任何人都有任何想法。
Thank you so much in advanced !!! 非常感谢您!
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="@dimen/collapsing_tool_bar_margin_end"
app:expandedTitleMarginBottom="@dimen/collapsing_tool_bar_margin_bottom"
app:expandedTitleMarginStart="@dimen/collapsing_tool_bar_margin_bottom">
<ImageView
android:id="@+id/coverImage"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ActionBarThemeOverlay"
app:popupTheme="@style/ActionBarPopupThemeOverlay"
app:layout_collapseMode="pin"
android:background="@drawable/gradient_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="@+id/slidingTabs"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
app:tabMode="scrollable"
app:tabGravity="fill"
android:background="@color/transparent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
You can add different view inside your collapsing toolbar like: 您可以在折叠的工具栏中添加其他视图,例如:
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="@+id/header_layout"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginBottom="10dp"
android:layout_gravity="bottom|left">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Title"
android:textColor="#ffffff"
android:textSize="25dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="subtitle"
android:textColor="#ffffff"/>
</LinearLayout>
Adjust the textsize,margin,and the rest as you wish. 根据需要调整文本大小,边距和其余部分。
But then add a this code to make sure that your added layout fades in when the toolbar collapses 但是,然后添加此代码,以确保在工具栏折叠时您添加的布局淡入
headerLayout=(LinearLayout) findViewById(R.id.header_layout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(this);
And make your activity class implement AppBarLayout.OnOffsetChangedListener 并使您的活动类实现 AppBarLayout.OnOffsetChangedListener
Then your onOffsetChanged method should be like this. 然后,您的onOffsetChanged方法应该是这样的。
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
float scaleFactor=1+(offset*0.005f);
if(!(scaleFactor<0)){
headerLayout.setAlpha(scaleFactor);
}
if(scaleFactor<0.3){
headerLayout.setAlpha(0);
}
}
Adjust the float value "0.005f" for the desired effect. 调整浮点值“ 0.005f”以获得所需效果。
I hope this is helpful 我希望这是有帮助的
I changed theme to solve this issue: 我更改了主题以解决此问题:
you should use ThemeOverlay.AppCompat.Light; 您应该使用ThemeOverlay.AppCompat.Light;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.