CollapsingToolbarLayout实现翻转的toolbar

2019-11-08 00:20:11

字体：大中小

来源：转载

供稿：网友

Android5.0后引入design设计，利用design很容易实现翻转效果效果图 collapsing_01

collapsing_02

collapsing_03

中间布局的搜索框滚动到顶部后，固定在标题栏。先看xml代码

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:focusable="true" android:focusableInTouchMode="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/ctl" android:layout_width="match_parent" android:layout_height="220dp" app:collapsedTitleGravity="bottom" app:contentScrim="@color/colorPRimary" app:expandedTitleMarginStart="100dp" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" app:titleEnabled="false"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" android:gravity="center_horizontal" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.6"> <ImageView android:id="@+id/iv_logo" android:layout_width="220dp" android:layout_height="80dp" android:layout_marginTop="60dp" android:src="@mipmap/ic_launcher" /> </RelativeLayout> <LinearLayout android:id="@+id/ll_show_search" android:layout_width="match_parent" android:layout_height="35dp" android:layout_gravity="bottom" android:layout_marginBottom="20dp" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:background="@drawable/main0_edit_bg" android:orientation="horizontal"> <EditText android:id="@+id/et_show" android:layout_width="0dp" android:layout_height="35dp" android:layout_weight="1" android:hint="@string/search_hint" android:textColor="@color/black_text" android:textColorHint="@color/text_hint" android:layout_gravity="center_horizontal" android:textSize="14dp" android:paddingBottom="2dp" android:background="@null" android:paddingLeft="15dp" /> <ImageView android:id="@+id/iv_search_show" android:layout_width="20dp" android:layout_height="20dp" android:layout_gravity="center_vertical" android:layout_marginRight="10dp" android:src="@mipmap/icon_search" /> </LinearLayout> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:background="@color/colorPrimary" app:layout_collapseMode="pin"> <LinearLayout android:id="@+id/ll_hide_search" android:layout_width="match_parent" android:layout_height="35dp" android:background="@drawable/main0_edit_bg" android:layout_marginRight="30dp" android:visibility="gone" > <EditText android:id="@+id/et_hide" android:layout_width="0dp" android:layout_height="40dp" android:layout_weight="1" android:textSize="14dp" android:hint="@string/search_hint" android:textColor="@color/black_text" android:textColorHint="@color/text_hint" android:paddingBottom="4dp" android:background="@null" android:paddingLeft="20dp" /> <ImageView android:id="@+id/iv_search_hide" android:layout_width="20dp" android:layout_height="20dp" android:layout_gravity="center_vertical" android:layout_marginRight="10dp" android:src="@mipmap/icon_search" /> </LinearLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

前提是你已经在项目中依赖了design包，并在styles.xml文件中配置toolbar的主题

<style name="APPTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>  <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

至于strings和colors文件中的文字描述，和颜色设定可以自由设置，这里不再贴出。 MainActivity中的代码

appbar = (AppBarLayout)findViewById(R.id.appbar); ivLogo = (ImageView)findViewById(R.id.iv_logo); hideSearch = (LinearLayout)findViewById(R.id.ll_hide_search); etHide = (EditText)findViewById(R.id.et_hide); etShow = (EditText)findViewById(R.id.et_show); appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { float a = ((float)Math.abs(verticalOffset)) / ((float)appBarLayout.getTotalScrollRange()); hideSearch.setVisibility(a> 0.6 ?View.VISIBLE:View.GONE); hideSearch.setAlpha(a>0.6 ? (a-0.6f) * 2.5f : 0f); ivLogo.setAlpha(imageScale(a)); } }); etHide.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { if(!etShow.hasFocus()&& etHide.hasFocus()){ etShow.setText(s); } } }); etShow.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { if(!etHide.hasFocus()&&etShow.hasFocus()){ etHide.setText(s); } } }); } private float imageScale(float a) { return a>0.5f ? 0: (1f- 2f*a); }

属性介绍: app:collapsedTitleGravity 设置和获取折叠之后的标题位置 app:contentScrim 获取和设置折叠之后的背景 app:expandedTitleMarginStart 在展开状态改变标题文字的位置 app:expandedTitleMargin, app:expandedTitleMarginBottom, app:expandedTitleMarginEnd app:layout_scrollFlags =”scroll|exitUntilCollapsed|snap” scroll - 想滚动就必须设置这个。 enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。 exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。 enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 app:titleEnabled 是否显示标题 app:layout_collapseMode=”parallax” 折叠模式 pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。 parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。 app:layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。具体效果自行测试

上一篇：Swift与OC混编

下一篇：Hybrid App（混合模式移动应用）