首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android开发笔记(一百六十四)仿京东首页的下拉刷新

所以此处得捕捉页面滚动到顶部的事件,相对应的则是页面滚动到底部的事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...然而成功监听页面是否到达顶部或底部,仅仅解决了状态栏和工具栏的变色问题。因为页面到顶时继续下拉,ScrollView要怎么处理?...这个和事佬必须是下拉布局和滚动视图的上级布局,考虑到下拉布局在上,而滚动视图在下,故它俩的上级布局继承线性布局LinearLayout比较合适。...现在有了新定义的下拉上层布局,搭配自定义的滚动视图,就能很方便地实现高仿京东首页的下拉刷新效果了。...-- title_drag.xml是带搜索框的工具栏布局 -->     以上布局模板用到的

2.9K40

【Android从零单排系列三十】《Android布局介绍——RelativeLayout》

你可以通过在子视图的属性中指定相对于其他视图的位置进行布局,例如使用android:layout_alignParentTop将一个视图与其父容器顶部对齐,或使用android:layout_below...将一个视图放置在另一个视图的下方。...每个子视图都可以通过设置android:layout_alignXXXX属性来指定与其他视图的相对位置关系。布局规则作用于子视图,而不是整个容器,使得开发者能够更精确地控制视图的放置方式。...编程控制:除了在XML布局文件中设置属性外,开发者也可以通过编程方式使用RelativeLayout的方法来动态地添加和管理子视图,例如使用addView()、setLayoutParams()等方法。...除了在XML布局文件中设置属性之外,你还可以使用Java代码动态地操作RelativeLayout。

58830
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【翻译】MotionLayout实现折叠工具栏(Part 1)

    本系列教程中,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...举个例子,一个折叠工具栏应该根据用户的滚动进行展开和折叠,所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说,让我们看下我们所要尝试模拟做到的行为动作。...在这里我特意使用了最基本的 View 控件类型,用来说明视图本身并没有产生任何其他的行为动作。当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。...如果在设计视图中查看这个布局,我们能看到布局所展示的工具栏处于展开的状态: ?...别小看这里短短的 10 行 XML 代码,它背后可为我们做了大量的工作哦。这其中内部原理非常复杂,它由 RecyclerView 的滚动行为所驱动。

    2K31

    未来布局之星——ConstraintLayout

    :约束 ConstraintLayout是Android Studio 2.2中具有亮点的新功能之一,相比于RelativeLayout、LinearLayout等传统布局,它打破了开发者使用XML...将布局修改为ConstraintLayout 删除一个控件 完成转换后,可以在Component Tree下方看到ConstraintLayout里面有原来存在的TextView控件,如果不需要,可以在蓝色区域选中...如下图所示,在调整按钮宽度后,将两个按钮的左右两边添加约束,然后将下方按钮的上边与上方按钮的下边添加约束,拖动下方的按钮,可设置两个按钮之间的外边距。 ?...较为复杂的约束 调整控件外边距及尺寸 细心的读者们或许会发现,在调整控件位置比例的时候,当进度条滑动至100时,控件未能完全贴上布局的右边界,这是因为控件存在外边距。 ?...删除约束 学习了添加约束后,来看看如何删除约束?删除约束有三种方式: 删除单个约束 将鼠标移动到要删除的约束对应的小圆圈,待小圆圈出现闪烁的红色圈圈时,点击小圆圈即可删除约束。

    1.9K20

    Android开发笔记(一百三十五)应用栏布局AppBarLayout

    RecyclerView是其中一个特工,它可用来替代ListView和GridView;替代ScrollView的则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后的...所以,搜遍Android的SDK源码,总共也只有三个控件符合这个条件,它们是RecyclerView、NestedScrollView,以及SwipeRefreshLayout,在布局文件中使用的名称如下所示...1、AppBarLayout的滚动依赖于主体视图的滚动,与主体视图相对应的,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚的问题了。...2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...所以本文只做下面三个标志的概念解释,有关的效果图参见《Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout》。

    2K40

    Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...不过,Android在实现展开效果的时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。...上述属性在代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...下面是标题栏在折叠时显示渐变图片的效果图: ?...> 点击下载本文用到的可折叠工具栏布局的工程代码 点此查看Android开发笔记的完整目录

    3.3K30

    android studio logcat技巧

    在 Android Studio 中,在物理设备或模拟器上构建并运行您的应用。 从菜单栏中选择“视图”>“工具窗口”>“Logcat”。 默认情况下,Logcat 滚动到末尾。...单击 Logcat 视图或使用鼠标滚轮向上滚动可关闭此功能。要重新打开它,请从工具栏中单击滚动到末尾 。您还可以使用工具栏清除、暂停或重新启动 Logcat。...如何读取日志 每个日志都有一个日期、时间戳、进程和线程 ID、标签、包名称、优先级以及与其关联的消息。不同的标签具有独特的颜色,有助于识别日志的类型。...标准日志视图显示每个日志的日期、时间、进程和线程 ID、标签、包名称、优先级以及与其关联的消息。...在 Logcat 工具栏中,您可以滚动到日志末尾,也可以单击特定行以保持该行可见。 在 Android Studio 中,您可以直接从主查询字段生成键值搜索。

    18310

    Android用户界面开发概述

    从上图可以看出,多个视图组件(View)可以存放在一个视图容器(ViewGroup)中,该容器可以与其他视图组件共同存放在另一个容器中,但是一个界面文件中必须有且只有一个容器作为根结点。... 在XML布局文件中通过XML属性进行控制。  在Java程序代码中通过调用方法进行控制。 实际上不管使用哪种方式,它们控制Android用户界面行为的本质是完全一样的。...3.1使用XML布局文件 实际上在创建HelloWorld应用程序的时候就是使用该方法,这种方法是Android推荐使用的,不仅简单、明了,而且可以将应用的视图控制逻辑从Java代码中分离出来,...当我们在Android应用的app/src/main/res/layout目录下定义一个XML布局文件之后(R.java会自动收录该布局资源),Java代码可通过如下方法在Activity中显示该视图:...当混合使用XML布局文件和代码来控制UI界面时,习惯上把变化小、行为比较固定的组件放在XML布局文件中管理,而那些变化较多、行为控制比较复杂的组件则交给Java代码来管理。

    2.5K100

    【Android】造轮子:轮播图

    需要轮播的图片 经过处理,变成这样 ? 处理后的轮播图 在界面上看到的是三张图片,而实际在ViewPager中的是这样的5张。...当从View4跳转到View5时,在代码中立刻将视图切换到View2,应为图片是一样的,所有在界面上看不到任何效果。 同理,当从View2跳转到View1时,在代码中将视图切换到View4。...为了实现画面重叠的效果,这里用了相对布局,轮播图使用ViewPager来实现。...后面有两个LinearLayout,第一个LinearLayout用来放指示器,在java代码中动态添加;第二个LinearLayout就用来显示Title了,当然,如果还需要显示的其他内容,可以在这个布局里面中添加...,先在布局中添加了需要显示的图片,然后加了个半透明的图,防止显示时文字和图片中白色的部分重叠在一起,导致看不清文字。

    1.9K50

    Android开发笔记(三十五)页面布局视图

    另外还有纵向滚动视图ScrollView,以及横向滚动视图HorizontalScrollView,其作用顾名思义便是让它们的子视图可以在某个方向上滚动罢了。...布局xml属性的定义 最基本的宽高如layout_width、layout_height取值类型有两类,分别是match_parent/fill_parent(这两个都表示与上级视图一致),以及wrap_content...2、layout_margin和padding的区别 : layout_margin指的是当前视图与外部视图的距离,这个margin部分不属于当前视图;padding指的是当前视图与其内部视图的距离,这个...在指定视图上方 layout_below : 在指定视图下方 layout_centerInParent : 在上级视图中间 layout_alignParentLeft : 与上级视图左侧对齐...该方法的第一个参数表示相对位置的属性,如是在相对上方还是相对下方还是相对左边还是相对右边,第二个参数表示视图id,即表示当前视图要相对于哪个视图。

    62730

    【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )

    , 其 解决了 开发 复杂布局 , 出现的布局嵌套过多问题 , 减少了界面绘制的时间 ; 2.意义 : 使用 ConstraintLayout , 视图层级会变得非常精简 , 并在 Android Studio...中 进行可以进行可视化操作 ; 3.与其它布局的比较 : ① 相同点 : ConstraintLayout 与 其它布局 都是 ViewGroup 的子类 , 其 拥有基本布局的公用属性 ; ② 不同点...) : 如下图 , 没有为 C 组件设置 垂直约束 , 在布局编辑器中 其 在 A 组件的下方显示 , 但是 在设备上运行时 , C 组件 左右 与 A 组件对齐 , 但是其显示在 屏幕的 最顶端 ,...: ① 进入布局界面 : 在 Android Studio 打开布局文件 , 选择 Design 视图 ; ② 转换操作 : 打开 “Component Tree” 界面 , 右键点击 根组件 ,..., 可以在工具栏中 , 将 margin 的默认值修改为 0 dp , 默认是 8dp , 这样自动生成的代码中就不会带有 margin 属性了 ; android:layout_marginBottom

    5.8K41

    Constraint Layout 2.0 用法详解

    XML 的工具,甚至可以直接在预览界面中对布局进行编辑。...而是仅仅引用其它视图来辅助它们在布局系统中完成各自的布局功能。...这样一来,在协调多个视图的动画时,就可以做到对各个细节进行精细操控。...尤其是在以下两种情况下,MotionLayout 会比其它动画构建工具更胜一筹: 可追溯的动画 - 由其它输入驱动的动画,例如工具栏在滚动时会出现的折叠效果 状态转换 - 由状态更改驱动的动画,例如用户进入某一界面后...每个界面都旨在向您展示在某些场景下如何使用 Motion Layout 构建实用的动画效果,以及如何将这些效果集成到其它视图上。 Constraint Layout 2.0 还有很多新功能。

    2.3K30

    android 设置标题栏背景颜色_状态栏菜单栏都在哪

    下面是同一个activity切换不同fragment时,状态栏文字颜色跟着变化的效果图: 下图是同一个Activity向上滚动时,标题栏和状态栏文字颜色根据变化的效果: 1....布局的根节点处加上android:fitsSystemWindows=”true”属性就可以了,要不布局会跑到状态栏和导航栏下面,与导航栏和状态栏重叠,这当然不是我们希望的。...带有底部导航栏手机底部导航按钮会和navigationbar重叠 如下图所示: 全屏时,由于视图布局会填充到状态栏和导航栏下方,如果不使用android:fitsSystemWindows=”true...视图布局位于占空布局下方,从而达到视图布局不遮挡状态栏效果。...而对于第一个首页和第四个我的fragment,则需要布局的图片填充到状态栏底下,而标题栏要位于状态栏下方,这其实只需要一种取巧实现,一般手机状态栏高度都是在25dp左右,当然在代码中动态获取状态栏高度,

    2.3K10

    Infer Constraints,Autoconnect,ConstraintLayout拖拽使用教程

    LinearLayout、RelativeLayout等一样,都是继承自ViewGroup,是view容器 能够用较少的视图层级创建出复杂的视图。...与RelativeLayout 类似,view 的摆放位置取决于 view 之间 或者 view 与 parent 之间的相对位置 可以完全的通过拖拽实现某个页面 (很方便,但是也需要了解如何手动编写xml...) ConstraintLayout 最低兼容到 API 9 (即Android 2.3) 二、ConstraintLayout引入和ConstraintLayout布局文件的生成 1、如何引入ConstraintLayout...方法 (1): 最简单,最直接的方式是,切换到 xml 的 design 视图模式下,然后在左上角的 Layouts 中直接 双击 ConstraintLayout , 然后就会弹窗提示是否添加到依赖...in Parent 相对于父布局水平居中;作用于多个被选中的水平排列的view时会导致view的居中重叠,并且具有RelativeLayout的效果,后添加的会覆盖先添加的。

    13710

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    和上一个版本不同的是,新版本的布局检查器可以以三维的视角来展现视图层次结构,您可以直观地看到视图的布局方式。...通过该工具您可以逐层来检查视图层次结构,同时它还会展示所有视图的属性,包括继承自视图父类的属性。 接下来我们一起了解一下最新版本的布局检查器是如何发挥作用的。...点击 rotation 按钮会在二维和三维视图之间进行切换。当处于旋转模式时,您可以旋转 UI 层次结构。旋转操作可以帮助您更直观地了解视图的组织结构。...右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。和旋转特性一样,这个功能也仅适用于 Android 10 以上的设备。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。

    2.5K20

    CSS 定位详解

    CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex和网格布局grid。...因此,它能够形成"动态固定"的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(relative定位)。 ? 页面向下滚动时,工具栏变成固定位置,始终停留在页面头部(fixed定位)。 ?...等到页面重新向上滚动回到原位,工具栏也会回到默认位置。...5.1 堆叠效果 堆叠效果(stacking)指的是页面滚动时,下方的元素覆盖上方的元素。下面是一个图片堆叠的例子,下方的图片会随着页面滚动,覆盖上方的图片(查看 demo)。 ?...div { position: sticky; top: 0; } 它的原理是页面向下滚动时,每张图片都会变成fixed定位,导致后一张图片重叠在前一张图片上面。详细解释可以看这里。

    1.8K40

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    和上一个版本不同的是,新版本的布局检查器可以以三维的视角来展现视图层次结构,您可以直观地看到视图的布局方式。...通过该工具您可以逐层来检查视图层次结构,同时它还会展示所有视图的属性,包括继承自视图父类的属性。 接下来我们一起了解一下最新版本的布局检查器是如何发挥作用的。...点击 rotation 按钮会在二维和三维视图之间进行切换。当处于旋转模式时,您可以旋转 UI 层次结构。旋转操作可以帮助您更直观地了解视图的组织结构。...右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。您可以通过点击任何已声明的属性来打开布局相关的 xml 文件。和旋转特性一样,这个功能也仅适用于 Android 10 以上的设备。...首先我们可以看到 LinearLayout 里布局了一个工具栏 (toolbar),然后是 navigation host。在它下面,您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。

    2.5K10

    通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

    在AppBarLayout里面的View,通过app:layout_scrollFlags属性来控制,滚动时候的表现。其中有4种Flag的类型。...Scroll: 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置. enterAlwaysCollapsed...,它可以控制包含在CollapsingToolbarLayout中的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...它是设计用于直接AppBarLayout的子视图。...同理这是在展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置 app:expandedTitleMarginStart 设置扩张时候

    2.3K90

    Android开发笔记(三十六)展示类控件

    如果填充图片显然不够经济,最简单的做法,就是在xml布局中增加一个View控件,高度或宽度设置为1dp,背景颜色设置为线条颜色,这样便实现了单独显示线条的需求。...maxLines : 指定文本的最大行数。 scrollbars : 指定滚动条的方向,一般取值vertical,如不指定将不显示滚动条。注意该属性只能在xml中设置。...在XML布局文件中实现时,可设置如下属性: drawableTop : 指定文本上方的图形。 drawableBottom : 指定文本下方的图形。...EditText EditText是文本输入框,与输入有关的属性说明如下: 在XML布局文件中指定: inputType : 指定输入的文本类型。...: 在XML布局文件中指定: scaleType : 指定图形的拉伸类型。

    1.5K30
    领券