android 工程目录优化,Android 项目优化笔记（四）：列表

一、列表优化问题

先来看一下 app 原来的列表效果：

app原来效果

之前发现的问题已经优化建议有：

使用 TabLayout + ViewPager 使该页面可左右滑动；

item 控件间距不规范，视觉效果不好；

使用 CardView。

1.1 TabLayout + ViewPager

这个没什么好说的，给新司机的一点小建议：Fragment 的复用。

创建 ViewPager 时一般会有多种类似的 Fragment，可以在创建时通过 setArguments() 方法将 Bundle 设置给 Fragment，然后在 Fragment 的 onCreateView() 获取该 Bundle。

举个栗子：

public class OfferFragment extends BaseFragment {

private String mCurrentType = "";

public static OfferFragment newInstance(String type) {

Bundle args = new Bundle();

args.putString("type", type);

OfferFragment fragment = new OfferFragment();

fragment.setArguments(args);

return fragment;

}

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

...

if(null != getArguments()){

getBundleExtras(getArguments());

}

...

return v;

}

private void getBundleExtras(Bundle arguments) {

if (arguments.containsKey("type")) {

mCurrentType = arguments.getString("type");

}

}

这时就可以根据 mCurrentType 来获取不同类型的数据，当然也可以把这部分代码写到 BaseFragment 里。

1.2 item 布局规范

先来看一张从 MD 官网扣来的一张

列表：三行

通过仔细观察上图可得出以下基本结论：

item 最外层 padding 为 16dp；

第一行文字基线(Text baseline)与顶部距离为 28dp，再减去 padding 的 16dp，文字高度为 12dp；

第二行文字基线与第一行文字基线间距为 20dp，说明文字行间距为 8dp，也就是说第二行 marginTop=8dp。

带图片的可以根据以上标注调整图片位置以及大小。

然鹅，实际项目中一般 UI 会标注各个文本间距，上面权当是给没有 UI 的童鞋们一些参考。像我们的项目，以前也没有 UI，现在到我手上基本可以改改间距：

列表页面

大概就是这样子，看上去比之前好了很多，重点是 margin/pading 为 4dp 的倍数。比如第一行加粗标题，为了突出它，第二行与第一行间距为 12dp。第二到三四行的间距为 8dp，因为它们属于同级描述。

在外层套了 CardView，看上去就比较有立体感了。上图 item 布局 源码。

二、 CardView 的使用

CardView 的基本使用已经无需再提，本文记录 CardView 使用要注意的一些地方。先大概看一下效果：

5.0 以上 CardView效果

2.1 CardView Style

values 文件夹下 Style 设置示例：

4dp

4dp

4dp

?android:attr/selectableItemBackground

圆角弧度： cardCornerRadius；

阴影：cardElevation；

点击相应：android:foreground；

values-v21 文件夹，适配 21 以上版本设备。也就是说 Android 5.0 以上的设备会优先使用这个文件夹下的配置内容。其中一些配置低版本使用无效或不可使用。

4dp

4dp

4dp

?android:attr/selectableItemBackgroundBorderless

@animator/mtrl_card_state_list_anim

这里的 android:foreground 使用的是 selectableItemBackgroundBorderless，android 内置的水波纹效果，也可以自定义效果，用来实现点击响应。

点击抬起阴影效果：android:stateListAnimator：API Level 21 引入的 z 轴动画，简单的说是 MD 的 UI 抬起动画。看一下 mtrl_card_state_list_anim 代码：

xmlns:android="http://schemas.android.com/apk/res/android">

android:state_pressed="true">

android:duration="150"

android:propertyName="translationZ"

android:valueTo="15dp"

android:startDelay="75"

android:interpolator="@anim/mtrl_card_fast_interpolator"

android:valueType="floatType"/>

android:duration="150"

android:propertyName="translationZ"

android:valueTo="0dp"

android:interpolator="@anim/mtrl_card_lowers_interpolator"

android:valueType="floatType"/>

android:duration：动画时长；

android:propertyName：属性名称，translationZ 表示 Z 轴移动；

android:valueTo：移动到 15 dp；

android:startDelay：延时执行；

android:interpolator：插值器，控制动画执行速率，比如先慢后快、匀速等；

android:valueType：移动类型，此处为浮点数。

MD 示例 Z 轴抬起动画是在 CardView 拖拽时执行，本文 demo 中是在点击时触发，推荐在 CardView 移动时添加 Z 轴抬起下落动画。

image.png

有关 CardView Style 设置还有更多属性，大家可根据需要查阅和添加。

2.2 RecyclerView + CardView

在本项目中，把 CardView 用于列表，既然是列表就需要用到 RecyclerView 了。常见的列表有横向的、纵向的，表格、瀑布流等等。上面展示的是纵向列表，接下来是瀑布流的实现：

瀑布流

这样展示列表信息，与普通纵向相比：

优点：新颖，美观。同一页面可以展示更多信息。

缺点：信息展示过多过密集，容易引起视觉疲劳。

接下来看一下瀑布流的实现，核心代码在与给 RecyclerView 设置 LayoutManager：

//设置layoutManager

StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2,

StaggeredGridLayoutManager.VERTICAL);

//解决item跳动

manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

mRecyclerView.setLayoutManager(manager);

布局的话就比较简单了，使用 CardView 包裹 RelativeLayout，将所有 item 相对摆放即可。

2.3 item 展开动画

结合项目需求，假设货主用户发布某一订单之后，会有承运商来报价。页面默认展示最低报价，因为一般情况下，货主希望能以最低的价格把这批货运到目的地。那么如果想看其他承运商的报价，可以点击按钮展开报价信息。

展开动画

这个效果的实现也比较简单，使用 RecyclerView 的局部刷新功能，让默认隐藏的更多报价展示：

mOfferAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {

@Override

public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {

switch (view.getId()){

case R.id.btn_expand:

OfferBean bean = mOfferAdapter.getItem(position);

bean.setExpand(!bean.isExpand());

mOfferAdapter.notifyItemChanged(position,"payload");

break;

}

}

});

关于列表写到这里，下文记录 跳转动画 以及 CoordinatorLayout 的使用。

源码地址 欢迎 Star。