android折叠布局,Android材料设计库之折叠式布局你应该知道的一切

最新推荐文章于 2024-05-16 14:13:05 发布
最新推荐文章于 2024-05-16 14:13:05 发布
阅读量271 收藏
点赞数
文章标签： android折叠布局

在Android5.0之后，Android给我们提供了非常丰富关于UI设计的材料设计库，其中就有非常实用的折叠式布局

常见问题：

1. ToolBar中自定义的title不能居中

设置CollapsingToolbarLayout的app:titleEnabled="false"即可

背景图片没有完全沉浸在状态栏里边

设置即可

常见模板布局1：

效果图：

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​

布局代码：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="@dimen/detail_backdrop_height"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

android:fitsSystemWindows="true">

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_scrollFlags="scroll|exitUntilCollapsed"

android:fitsSystemWindows="true"

app:contentScrim="?attr/colorPrimary"

app:expandedTitleMarginStart="48dp"

app:expandedTitleMarginEnd="64dp">

android:id="@+id/backdrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:fitsSystemWindows="true"

app:layout_collapseMode="parallax" />

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_collapseMode="pin" />

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingTop="24dp">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="@dimen/card_margin">

style="@style/Widget.CardContent"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="卡片1"

android:textAppearance="@style/TextAppearance.AppCompat.Title" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/news_content" />

android:layout_height="wrap_content"

android:layout_width="wrap_content"

app:layout_anchor="@id/appbar"

app:layout_anchorGravity="bottom|right|end"

android:src="@drawable/ic_discuss"

android:layout_margin="@dimen/fab_margin"

android:clickable="true"/>

502af3adfb04?utm_campaign=hugo

image.gif

常见模板布局2：

效果图：

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​

布局代码：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_scrollFlags="scroll|enterAlways|snap" />

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end|bottom"

android:layout_margin="@dimen/fab_margin"

android:src="@drawable/ic_done" />

502af3adfb04?utm_campaign=hugo

image.gif

1.CoordinatorLayout

根布局必须使用CoordinatorLayout，即协调式布局，用来协调AppBarLayout和Scrollview之间的滚动关系

2.AppBarLayout

AppBarLayout必须依赖父控件CoordinatorLayout，AppBarLayout为ChildrenView提供了一个`app:layout_scrollFlags属性来设置ScrollView滚动时Childview的滚动模式`，ScrollFlags共有五种常量值，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；

2.1 app:layout_scrollFlags="scroll" :往下滚ScrollView优先滚动

`

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​`

2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滚ChildView优先滚动

`

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​`

2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView，直到ScrollView滚动完毕再开始滚动ChildView

`

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​`

2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView

`

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​`

2.5 app:layout_scrollFlags="scroll|snap"：往下滚ScrollView优先滚动，然后ChildView开始滚动，但是ChildView必须滚动到一定的比例才能继续往下滚，否则ChildView滚动没有到达一定比例，手松了之后就会回弹回去，类似ViewPager左滑右滑的那种效果

`

502af3adfb04?utm_campaign=hugo

image

502af3adfb04?utm_campaign=hugo

image.gif

​`

3.CollapsingToolbarLayout

CollapsingToolbarLayout必须依赖父控件AppBarLayout，其中非常重要的几个属性如下

3.1 title

标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。注意，没有设置这个属性时，默认使用Toolbar的标题；

3.2 statusBarScrim

顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?attr/colorPrimaryDark"，即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本，位于setContentView语句前面)一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；

3.3 contentScrim

内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；

3.4 layout_collapseMode：ChildView使用

折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果，比如上述效果图中的图片；pin，固定别针效果，比如上图中的Toolbar；

3.5 layout_collapseParallaxMultiplier：ChildView使用

不折叠视差系数，配合parallax模式使用，取值有点类似alpha(不透明度)，在0.0 ～ 1.0之间，默认值为0.5。当设置为1.0，滚动列表时图片不会折叠移动；

4.Toolbar

4.1Toolbar初始设置

Toolbar toolbar = findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowTitleEnabled(false);

toolbar.setNavigationOnClickListener(new View.OnClickListener(){

@Override

public void onClick(View v) {

onBackPressed();

}

});

502af3adfb04?utm_campaign=hugo

image.gif

4.2 Activity样式设置：

@mipmap/navbar_icon_return

502af3adfb04?utm_campaign=hugo

image.gif

#673AB7

#512DA8

#FF4081

502af3adfb04?utm_campaign=hugo

image.gif

问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

QQ：303704981

email：geduo_83@163.com

weibo：@geduo_83

关于作者

var geduo_83 = {

nickName : "geduo_83",

site : "http://www.weibo.com/geduo83"

}

502af3adfb04?utm_campaign=hugo

image.gif

沐雲閣主 荻生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 折叠布局
07-09
http://blog.csdn.net/lmj623565791/article/details/44278417 代码为博客实例，有问题博客留言。
Android 伸缩布局
06-24
通过理解并实践这个伸缩布局的实现，开发者可以将其应用到各种场景，例如折叠式菜单、展开式详情视图等。这样的交互设计不仅可以提升应用的趣味性，还能有效地节省屏幕空间，优化用户体验。 总之，Android的伸缩...
Android开发实战手把手教你实现一个折叠式布局
leveretz的博客
11-09 304
Android开发实战手把手教你实现一个折叠式布局
2024年最全Android FoldingLayout 折叠布局 原理及实现（二），最新大厂Android校招面试经验汇总
最新发布
2401_84545088的博客
05-16 346
以前一直是自己在网上东平西凑的找，找到的东西也是零零散散，很多时候都是看着看着就没了，时间浪费了，问题却还没得到解决，很让人抓狂。后面我就自己整理了一套资料，还别说，真香！资料有条理，有系统，还很全面，我不方便直接放出来，大家可以先看看有没有用得到的地方吧。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
Android折叠屏开发学习（三）---使用MotionLayout实现折叠屏分屏效果
Vaccae的博客
06-27 2821
学更好的别人，做更好的自己。——《微卡智享》本文长度为6259字，预计阅读11分钟前言今天是折叠屏开发的第三篇，前面已经介绍了铰链的角度监听和Jetpack Window实现监听效果，今天我们就来做个折叠状态和展开状态显示的不同效果Demo，本篇的重点主要是两个，一是布局文件的设计，另一个就是MotionLayout的动画效果。实现效果竖屏折叠竖屏展开横屏折叠横屏展开上图...
android 折叠式布局,[Android] Android利用Coordinatorlayout+AppbarLayout实现折叠式布局
weixin_36382556的博客
05-26 827
折叠式布局在App中相当常见，给人一种科技感，充满良好的用户体验。本文就以两个简单的例子，来举例说明基本折叠式布局：首先需要在app/build.gradle下添加如下依赖：compile 'com.android.support:support-v4:23.4.0'compile 'com.android.support:design:23.4.0'一、实现Toolbar + menu 菜单布局...
Android 折叠式布局
晨曦
08-31 7359
折叠式布局 效果图如下 从头开始 先建立一个名为 Folding 项目，然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件， ** 标题栏折叠** 首先打开activity_one.xml文件 将里面的总布局改为CoordinatorLayout里面以此嵌套AppBarLayout 、Toolbar。如下图所示 嵌套好之后设置一些简单的样...
Android 仿facebook布局效果.zip
12-04
在Android应用开发中，创建一个...通过深入研究这个源码，开发者可以了解到如何将这些技术有效地组合在一起，创建出类似Facebook的交互式布局。这不仅有助于提升个人的编程技能，还能为今后的项目提供有价值的参考。
Android源码——仿facebook布局效果.7z
10-08
在Android开发中，为了提供丰富的用户体验，开发者常常会尝试实现各种各样的界面布局，而Facebook的布局设计就是其中一种备受推崇的设计模式。本资源"Android源码——仿facebook布局效果.7z"提供了实现类似Facebook...
DoubleLift：sequentially依次在水平和垂直方向上扩展和折叠布局
02-04
DoubleLift是一个Android库，专为创建可顺序地在水平和垂直方向上展开和折叠的布局而设计。这个库由Skydoves开发，它提供了一种动态和交互式的UI元素，能够增强用户在应用程序中的体验。主要适用于那些需要展现层次...
android ui设计：响应式用户界面与设计模式
07-23
4. **可折叠布局**：针对折叠屏设备，设计师需要考虑如何优雅地处理内容展开和折叠时的变化。 5. **手势识别**：响应式设计也包括对触摸事件的处理，如滑动、捏合等手势，以增强用户交互体验。 设计模式在Android...
Collapsible-Frame-Layout:可折叠展开的框架布局
05-18
可折叠框架布局 可以折叠/展开的框架布局 去做 转换为.aar 检测重力==顶部还是底部
AndroidFoldingLayout自定义控件-超炫可折叠布局
10-13
AndroidFoldingLayout自定义控件-超炫可折叠布局。简洁、可以直接引用、易于修改
ToggleExpandLayout-一个可折叠和展开子view的开关布局控件.zip
09-24
ToggleExpandLayout是一个可折叠和展开子view的开关布局控件。它可以将它的子view以阶梯式的展开。项目地址：https://github.com/fenjuly/ToggleExpandLayout 效果图：如何使用<com.fenjuly.mylibrary.ToggleExpandLayout             android:id="@ id/toogleLayout"             android:layout_width="wrap_content"             android:layout_height="80dp"             >             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 1"/>             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 2"/>             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view"/>                      </com.fenjuly.mylibrary.ToggleExpandLayout>注意，由于ToggleExpandLayout的本质是个FrameLayout，所以必须将其高度设置为大于所有子view展开状态的高度，不能设为wrap_content。为了解决这个问题，你可以将ToggleExpandLayout的外面在加个DropDownLayout：<com.fenjuly.mylibrary.DropDownLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         >         <com.fenjuly.mylibrary.ToggleExpandLayout             android:id="@ id/toogleLayout"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             >             <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 1"/>              <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view 2"/>               <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="view"/>                              </com.fenjuly.mylibrary.ToggleExpandLayout> </com.fenjuly.mylibrary.DropDownL
Android 折叠屏适配(分屏滑动布局发生改变)
王鑫林的博客
08-31 1598
Android 折叠屏分屏适配
Flutter 实现 Android CollapsingToolbarLayout折叠布局效果
weixin_54204022的博客
11-13 640
Flutter 是通过Tabbar + TabbarView 来实现 类似Android Viewpager 页面切换的效果的。我个人觉得Flutter 的tab 切换实现过程要比Android的实现过程要简单容易不是一星半点，哈哈哈哈 ，因为她所用到的widget 都是google 官方封装好的，用起来代码量简洁了超级多！tabs, tabViews 是我定义的两个成员集合变量，tabController 也是个成员变量，tabController 在initstate（）初始化状态的函数中赋值。
Android开发&可折叠的布局——CollapseLayout
mnlin
11-29 5171
collapselayout 一款可折叠的、简单的布局；继承LinearLayout，由两个子TextView组成；可用于一般ViewGroup、ListView、RecyclerView中 在Android开发时，经常会设计“使用说明”、“消息”或者“帮助”等页面，通常来说里面只是一些单纯的文本（包含富文本）； 之前为偷懒都是直接使用Bootstrap的collapse插件，不过因为内置网页
Android studio -简单实现textview的折叠和展开
zzzzzwbetter的博客
03-24 1443
网上有很多实现的办法，但是大多都比较麻烦，发现上面那篇文章的方法实现的比较简单，所以进行了尝试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值