- 浏览: 5777585 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
如果没听说过AppBarLayout.OnOffsetChangedListener,那么就先看这里:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html
我在项目中的使用:
attr.xml
ids.xml
使用,伪代码:
https://github.com/hugeterry/CoordinatorTabLayout
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html
我在项目中的使用:
import android.content.Context; import android.content.res.Resources; import android.content.res.TypedArray; import android.support.annotation.NonNull; import android.support.design.widget.AppBarLayout; import android.support.v7.widget.Toolbar; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.view.ViewGroup; import android.view.ViewParent; import android.widget.LinearLayout; import android.widget.TextView; /** * CollapsingAvatarToolbar必须在AppBarLayout里面,被CollapsingToolbarLayout包裹。 CollapsingAvatarToolbar必须有个Toolbar伴随,如果你不想使用Toolbar,我们可以讨论讨论。 扩展高度(Expanded height) 取决于AppBarLayout的高度。 折叠高度(Collapsed height )取决于Toolbar的高度。 你必须在CollapsingAvatarToolbar里面设置头像(avatar)和标题视图( title view),且id必须喝上面演示的完全一致。这些id事library里面的。(所以是@而不是@+)。 你可以使用任意TextView作为title,以及任意view作为头像,我这里的例子用的是hdodenhof的CircleImageView ,但是这取决于你自己。 你也可以添加更多view到CollapsingAvatarToolbar里面。 所有的自定义属性都是可选的,如果没有提供就使用默认的 。 * @author Administrator * @see http://www.jcodecraeer.com/a/opensource/2015/0830/3385.html */ public class CollapsingAvatarToolbar extends LinearLayout implements AppBarLayout.OnOffsetChangedListener { private View avatarView; private TextView titleView; private float collapsedPadding; private float expandedPadding; private float expandedImageSize; private float collapsedImageSize; private float collapsedTextSize; private float expandedTextSize; private boolean valuesCalculatedAlready = false; private Toolbar toolbar; private AppBarLayout appBarLayout; private float collapsedHeight; private float expandedHeight; private float maxOffset; public CollapsingAvatarToolbar(Context context) { this(context, null); init(); } public CollapsingAvatarToolbar(Context context, AttributeSet attrs) { super(context, attrs); init(); TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CollapsingAvatarToolbar, 0, 0); try { collapsedPadding = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedPadding, -1); expandedPadding = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedPadding, -1); collapsedImageSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedImageSize, -1); expandedImageSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedImageSize, -1); collapsedTextSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedTextSize, -1); expandedTextSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedTextSize, -1); } finally { a.recycle(); } final Resources resources = getResources(); if (collapsedPadding < 0) { collapsedPadding = resources.getDimension(R.dimen.default_collapsed_padding); } if (expandedPadding < 0) { expandedPadding = resources.getDimension(R.dimen.default_expanded_padding); } if (collapsedImageSize < 0) { collapsedImageSize = resources.getDimension(R.dimen.default_collapsed_image_size); } if (expandedImageSize < 0) { expandedImageSize = resources.getDimension(R.dimen.default_expanded_image_size); } if (collapsedTextSize < 0) { collapsedTextSize = resources.getDimension(R.dimen.default_collapsed_text_size); } if (expandedTextSize < 0) { expandedTextSize = resources.getDimension(R.dimen.default_expanded_text_size); } } private void init() { setOrientation(HORIZONTAL); } @NonNull private AppBarLayout findParentAppBarLayout() { ViewParent parent = this.getParent(); if (parent instanceof AppBarLayout) { return ((AppBarLayout) parent); } else if (parent.getParent() instanceof AppBarLayout) { return ((AppBarLayout) parent.getParent()); } else { throw new IllegalStateException("Must be inside an AppBarLayout"); //TODO actually, a collapsingtoolbar } } protected void onAttachedToWindow() { super.onAttachedToWindow(); findViews(); if (!isInEditMode()) { appBarLayout.addOnOffsetChangedListener(this); } else { setExpandedValuesForEditMode(); } } private void setExpandedValuesForEditMode() { calculateValues(); updateViews(1f, 0); } private void findViews() { appBarLayout = findParentAppBarLayout(); toolbar = findSiblingToolbar(); avatarView = findAvatar(); titleView = findTitle(); } @NonNull private View findAvatar() { View avatar = this.findViewById(R.id.cat_avatar); if (avatar == null) { throw new IllegalStateException("View with id ta_avatar not found"); } return avatar; } @NonNull private TextView findTitle() { TextView title = (TextView) this.findViewById(R.id.cat_title); if (title == null) { throw new IllegalStateException("TextView with id ta_title not found"); } return title; } @NonNull private Toolbar findSiblingToolbar() { ViewGroup parent = ((ViewGroup) this.getParent()); for (int i = 0, c = parent.getChildCount(); i < c; i++) { View child = parent.getChildAt(i); if (child instanceof Toolbar) { return (Toolbar) child; } } throw new IllegalStateException("No toolbar found as sibling"); } @Override public void onOffsetChanged(AppBarLayout appBarLayout, int offset) { if (!valuesCalculatedAlready) { calculateValues(); valuesCalculatedAlready = true; } float expandedPercentage = 1 - (-offset / maxOffset); updateViews(expandedPercentage, offset); } private void calculateValues() { collapsedHeight = toolbar.getHeight(); expandedHeight = appBarLayout.getHeight() - toolbar.getHeight(); maxOffset = expandedHeight; } private void updateViews(float expandedPercentage, int currentOffset) { float inversePercentage = 1 - expandedPercentage; float translation = -currentOffset + ((float) toolbar.getHeight() * expandedPercentage); float currHeight = collapsedHeight + (expandedHeight - collapsedHeight) * expandedPercentage; float currentPadding = expandedPadding + (collapsedPadding - expandedPadding) * inversePercentage; float currentImageSize = collapsedImageSize + (expandedImageSize - collapsedImageSize) * expandedPercentage; float currentTextSize = collapsedTextSize + (expandedTextSize - collapsedTextSize) * expandedPercentage; setContainerOffset(translation); setContainerHeight((int) currHeight); setPadding((int) currentPadding); setAvatarSize((int) currentImageSize); setTextSize(currentTextSize); } private void setContainerOffset(float translation) { this.setTranslationY(translation); } private void setContainerHeight(int currHeight) { this.getLayoutParams().height = currHeight; } private void setPadding(int currentPadding) { this.setPadding(currentPadding, 0, 0, 0); } private void setTextSize(float currentTextSize) { titleView.setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize); } private void setAvatarSize(int currentImageSize) { avatarView.getLayoutParams().height = currentImageSize; avatarView.getLayoutParams().width = currentImageSize; } }
attr.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CollapsingAvatarToolbar"> <attr name="collapsedPadding" format="dimension" /> <attr name="expandedPadding" format="dimension" /> <attr name="collapsedImageSize" format="dimension" /> <attr name="expandedImageSize" format="dimension" /> <attr name="collapsedTextSize" format="dimension" /> <attr name="expandedTextSize" format="dimension" /> </declare-styleable> </resources>
ids.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="cat_avatar" type="id"></item> <item name="cat_title" type="id"></item> </resources>
使用,伪代码:
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <!-- 如果想制造toolbar的折叠效果,我们必须把Toolbar放在CollapsingToolbarLayout中: --> <!-- 通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。 --> <!-- 给需要有折叠效果的组件设置 layout_collapseMode属性 --> <!-- Toolbar 的高度layout_height必须固定,不能 “wrap_content”,否则Toolbar不会滑动,也没有折叠效果 --> <!-- app:contentScrim="?attr/colorPrimary"用于设置收缩的时候Toolbar自动变化到普通的颜色 --> <!-- app:titleEnabled="false"用于设置是否显示title,默认为显示--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:titleEnabled="false" > <!-- 制造视差效果 --> <!-- CollapsingToolbarLayout还能让我们做出更高级的动画,比如在里面放一个ImageView,然后在它折叠的时候渐渐淡出。同时在用户滚动的时候title的高度也会随着改变。 --> <!-- 为了制造出这种效果,我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。 --> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/bg_login" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" app:titleTextAppearance="@style/TextAppearance.AppCompat.Headline" /> <com.widget.view.CollapsingAvatarToolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="center_vertical" > <!-- app:collapsedPadding="@dimen/collapsedPadding" app:expandedPadding="@dimen/expandedPadding" app:collapsedImageSize="@dimen/collapsedImageSize" app:expandedImageSize="@dimen/expandedImageSize" app:collapsedTextSize="@dimen/collapsedTextSize" app:expandedTextSize="@dimen/expandedTextSize" --> <ImageView android:id="@id/cat_avatar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/face" android:background="@drawable/default_face_bg" android:padding="4dp" /> <TextView android:id="@id/cat_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/holo_blue_dark" android:text="Name" /> </com.widget.view.CollapsingAvatarToolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>
https://github.com/hugeterry/CoordinatorTabLayout
发表评论
-
TabLayout和ViewPager结合使用
2015-09-10 10:54 9687TabLayout是android design包内的控件; ... -
Design各控件的搭配使用4
2015-08-28 17:01 1437在上一个版本基础上添加两个Activity: EffectsA ... -
Design各控件的搭配使用3
2015-08-28 11:35 1839在上一个版本基础上新增: 对RecyclerView的操作(线 ... -
Design各控件的搭配使用2
2015-08-25 15:16 1944在上个版本的基础上增加个几个控件: DrawerLayout+ ... -
Design各控件的搭配使用
2015-08-25 13:48 2797PS:使用design包需要在design项目中导入appco ... -
ItemTouchHelper之SwipeDismiss
2015-08-25 10:11 1932引用This is a utility class to ad ... -
CoordinatorLayout之Behavior使用
2015-08-18 10:27 2241import android.animation.An ... -
support.v4之SlidingPaneLayout简单使用
2015-08-13 13:10 2418简单的布局 <android.support.v4. ... -
android5.0之CardView
2015-08-11 17:24 2024CardView继承至FrameLayout类,可以在一个卡片 ... -
ToolBar&DrawerLayout基本结构
2015-08-03 15:22 1981快速迭代用 使用到了 1:ToolBar + ShareAc ... -
android5.0之RecyclerView
2015-07-31 13:55 2488早就听说RecyclerView有多少多少XX 但是直到今天才 ... -
RecylerView相关文章
2015-04-10 12:03 2012RecylerView用于替代ListView,因为它比Lis ...
相关推荐
This is a smooth version of Google Support Design AppBarLayout. If you are using AppBarLayout, you will know it has an issue with fling. Check out these threads to know about that problem: ...
Supports any vertically scrolling LayoutManager, as well as proper integration for AppBarLayout. Planned features are listed at the issues page. You can download the sample APK from the releases page...
浮动操作按钮项的菜单,设计为定位在AppBarLayout上。
appbarlayout-spring-behavior,一种行为帮助AppBarLayout滚动弹簧,博客附件,效果请查看博客相对应项目。
使AppBarLayout 可以弹性下拉的Behavior.zip,一个行为帮助appbarlayout滚动spring
这是一个带图片,上划则图片缩小的demo,接口现在最新的技术AppBarLayout CoordinatorLayout toolbar recyclerview
AppBarLayout往上滑隐藏ToolBar
android demoCoordinatorLayout AppBarLayout 标题渐变 悬浮android demoCoordinatorLayout AppBarLayout 标题渐变 悬浮
使用AppBarLayout与CoordinatorLayout高仿稀土掘金
Android CoordinatorLayout详解 一、CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两...系统(Support V7)提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehav
Android使用应用栏布局AppBarLayout的代码例子。用于演示通过AppBarLayout实现工具栏Toolbar上滑与下拉的动态效果,另外介绍了嵌套滚动视图NestedScrollView的基本用法,以及AppBarLayout的几种滚动标志之间的区别。
一个自定义的AppBarLayout,可以顺利地抛出
AppBarLaout实现上滑隐藏ToolBar,下滑出现
AppBarLayout实现上滑隐藏ToolBar,下滑出现
AppBarLayout使用总结demo。有需要的可以下载看看,如有更好的实现,请指点。
CoordinatorLayout+AppBarLayout 小栗子,仅用示例说明
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo,详细说明 http://blog.csdn.net/amazing7/article/details/51918623
但是当标题栏移动到顶部时是要悬浮在顶部,下面无论如何上滑标题拦都不再移动,当向下滑动时知直到出现RecyclerView的第一条时标题栏才会随着向下移动AppBarLayout+TabLayout+RecyclerView+ViewPager+Fragment