Android 实现带视觉差的 ListView

什么是视差效果呢?一起来看效果图就知道了:

这里写图片描述

我们可以看到 ListView 的 HeaderView 会跟随 ListView 的滑动而变大,HeaderView里的图片会有缩放效果。这些可以使用属性动画来实现。接下来我们就来动手吧!

首先自定义几个属性,在之后可以用到:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ZoomListView">
<!-- headerView的高度 -->
<attr name="header_height" format="dimension|reference"></attr>
<!-- headerView的最大高度 -->
<attr name="header_max_height" format="dimension|reference"></attr>
<!-- headerView里面的图片最大的伸缩量 -->
<attr name="header_max_scale" format="float"></attr>
</declare-styleable>
</resources>
阅读更多

Android 实现美团的下拉刷新

给大家带来的是仿美团的下拉刷新。相信美团大家都用过,下面就贴出了美团的下拉刷新效果:

这里写图片描述

我们可以大致地分析一下:首先根据下拉改变的 paddingTop 来动态地缩放“绿色椭圆物”,然后当 headerView 的 paddingTop 大于0时,播放美团小人出现的帧动画,最后就是手指松开时播放刷新中的帧动画了。

基本上思路就是上面分析的那样了,那么我们下面一步就是要获取帧动画的素材了。我们先下载好美团的 apk ,解压后在 res/drawable-xhdpi-v4 里,我们可以得到相关的图片了。如果嫌麻烦,文末有本 Demo 的下载链接,里面就有素材图片。

阅读更多

Android FloatingActionButton 在滚动时显示或隐藏

在Material Design中,FloatingActionButton(即FAB)是一个很重要的元素。而通常在列表向下滚动的时候,FAB应该会隐藏;而在向上滚动时,FAB应该会显示出来。本篇就记录其中一种实现FAB显示或隐藏的方案,主要应用了属性动画。

其实关于FAB的显示和隐藏,Google官方就提供了其中一种方案:fab.hidden()fab.show()。但是自带的是FAB缩放的效果。并不是上下移动的效果。

那么我们就来看看如何实现FAB上下移动的效果吧!

首先在你想要滑动的View(比如说RecyclerView等)的布局上加上:

1
app:layout_behavior="@string/appbar_scrolling_view_behavior"
阅读更多

Android Scroller 滚动原理分析

Scroller来实现平滑滚动的效果。而我们今天就来探究一下为什么Scroller能够实现平滑滚动。

首先我们先来看一下Scroller的用法,基本可概括为“三部曲”:

  1. 创建一个Scroller对象,一般在View的构造器中创建:
1
2
3
4
5
6
7
8
9
10
11
12
public ScrollViewGroup(Context context) {
this(context, null);
}

public ScrollViewGroup(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public ScrollViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mScroller = new Scroller(context);
}
阅读更多

Android 《Android开发艺术探索》笔记一

第一章:Activity的生命周期和启动模式

1.1 Activity的生命周期全面分析

典型情况下的生命周期分析

onStart()和onStop()是从Activity是否可见这个角度来回调的,而onResume()和onPause()是从Activity是否位于前台这个角度来回调的。

阅读更多

Android MD 式转场动画

最近在做MD设计风格的APP,所以在转场动画上当然也得符合MD了。下面就是效果图:

这里写图片描述

一开始并未了解过这种转场动画,原来是Google在SDK中已经给我们提供了。ActivityOptions是 Android 5.0 及以上使用的,但是也提供了ActivityOptionsCompat向下兼容。

下面我们就来看看吧:

layout_item.xml(ListView的item布局):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:padding="10dp">

<ImageView
android:id="@+id/iv_img"
android:layout_width="90dip"
android:layout_height="65dip"
android:transitionName="photos"
android:padding="1dp" />

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="@id/iv_img"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
android:textColor="?android:attr/textColorPrimary"
tools:text="标题" />

<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_title"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_toRightOf="@id/iv_img"
android:maxLines="2"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="?android:attr/textColorPrimary"
tools:text="标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题" />

<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/tv_content"
android:maxLines="1"
android:text="2016-02-25 11:22:23"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="?android:attr/textColorSecondary"
android:textSize="12sp" />

</RelativeLayout>
阅读更多

Android 联系人界面仿照

美团中选择城市的界面:

这里写图片描述

我们可以看到在右侧有一个支持快速索引的栏。接下来,我们就要实现这种索引栏。

首先是attrs.xml,定义了三个自定义属性:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="QuickIndexBar">
// 字体的颜色
<attr name="font_color" format="color|reference"></attr>
// 选中时字体的颜色
<attr name="selected_font_color" format="color|reference"></attr>
// 字体的大小
<attr name="font_size" format="dimension|reference"></attr>
</declare-styleable>
</resources>
阅读更多

Android 《Android群英传》笔记二

第六章:Android绘图机制与处理技巧

6.1 屏幕的尺寸信息

系统屏幕密度如下

  • ldpi—120—240X320分辨率
  • mdpi—160—320X480分辨率
  • hdpi—240—480X800分辨率
  • xhdpi—320—720X1280分辨率
阅读更多

Android WebView 中 JS 和 App 之间的交互

Native App 和 JS 交互

今天被问到了一个问题:在 WebView 中加载了一个网页,点击网页中的按钮,如何跳转到指定 Activity ?当时听到后脸上就写了大大的“懵逼”两个字,一时词穷,没回答上来。之前对 WebView 也没有更深入地了解,只是简单地用来加载网页而已。

之后在脑海中回想到 WebView 中的 JS 可以和 app 产生交互,于是搜索了一下,果然网上有类似的实现效果。看了一下,在这里就做一个简单的笔记了以便之后查看。

阅读更多

Android 使用 RecyclerView 实现仿喵街效果

效果图:

这里写图片描述

值得一提的是,这是旧版本的特效,新版本的喵街已经去掉了这种效果。

看完了效果,接下来就是动手的时间了。

我们先来分析一下思路:我们先给RecyclerView添加一个OnScrollListener,然后分别去获得firstVisiblePosition和firstCompletelyVisiblePosition。这里要注意一下,firstVisiblePosition是第一个在屏幕中可见的itemView对应的position,而firstCompletelyVisiblePosition是是第一个在屏幕中完全可见的itemView对应的position。之后在滚动中去动态地设置itemView的高度。整体的思路就这样了,下面我们直接来看代码。

阅读更多