仿美团全部分类页面(网络数据加载+Listview+Textview自动生成)

省去前因后果，咱直奔主题，我们首先来看一下美团最新版本的关于全部分类的布局。

进入全部分类

点击小分类中的下拉TextView弹出完整小分类

从下图可以看出明显的生成LinearLayout再生成TextView痕迹

ListView +自动生成TextView、

0.布局里写个listview，初始化并设置自定义适配器

1.从服务器哥们手里拿数据

HttpRequestDAO.getInstance().request(WebConstrant.getMoreCategory, null, context, new IStringRequestCallback() {

@Override

public void onFailure(int code, String error) {

netError();

}

private void netError() {

Toast.makeText(EWifi.getApp().getMainActivity(), "网络错误", Toast.LENGTH_SHORT).show();

}

@Override

public void onSuccess(int code, String data) {

}

});

格式化

生成JavaBean

创建JavaBean生成必要getter/setter方法

继续数据转换和调试

HttpRequestDAO.getInstance().request(WebConstrant.getMoreCategory, null, context, new IStringRequestCallback() {

@Override

public void onFailure(int code, String error) {

netError();

}

private void netError() {

Toast.makeText(EWifi.getApp().getMainActivity(), "网络错误", Toast.LENGTH_SHORT).show();

}

@Override

public void onSuccess(int code, String data) {

Gson gson = new GsonBuilder().create();

MoreCategory moreCategory = gson.fromJson(data, MoreCategory.class);// json转bean

ArrayList<String> hotRowNames = new ArrayList<String>();// 热门大类分类名称arraylist

ArrayList<String> categoryNames = new ArrayList<>();// 普通分类大类的名称

categorys = new LinkedHashMap<String, ArrayList<String>>();// 全部分类

for (int i = 0; i < moreCategory.responseData.total; i++) {// 大类

categoryNames.add(moreCategory.responseData.rows.get(i).getName());

Log.e("MoreFragment", "普通大类:" + moreCategory.responseData.rows.get(i).getName());

}

for (int j = 0; j < categoryNames.size(); j++) {// 往普通大类里添加小分类

ArrayList<String> childrenNames = new ArrayList<>();// 小分类名称集合

for (int k = 0; k < moreCategory.responseData.rows.get(j).children.size(); k++) {

childrenNames.add(moreCategory.responseData.rows.get(j).children.get(k).name);

}

categorys.put(categoryNames.get(j), childrenNames);

}

// 热门分类填充数据

for (int i = 0; i < moreCategory.getResponseData().getHottotal(); i++) {

hotRowNames.add(moreCategory.getResponseData().getHotrows().get(i).getName());

}

// 往全部分类最后添加热门分类

categorys.put("热门", hotRowNames);

printList(categorys);//数据调试

EWifi.getApp().getMainActivity().runOnUiThread(new Runnable() {

public void run() {

categoryAdapter.notifyDataSetChanged();

}

});

}

private void printList(LinkedHashMap<String, ArrayList<String>> categorys) {

Iterator iter = categorys.entrySet().iterator();

while (iter.hasNext()) {

Map.Entry entry = (Map.Entry) iter.next();

System.out.println("大分类: "+entry.getKey()+" 小分类 "+entry.getValue());

}

});

输出如下

编写adapter

package com.xxx.app.adapter;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.LinkedHashMap;

import java.util.Map;

import com.xxx.app.xxx;

import com.xxx.app.R;

import com.xxx.app.adapter.CategoryAdapter.CategoryTitleHolder;

import com.nostra13.universalimageloader.core.ImageLoader;

import android.content.Context;

import android.graphics.Color;

import android.media.Image;

import android.text.TextUtils;

import android.view.Gravity;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.WindowManager;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.LinearLayout.LayoutParams;

import android.widget.TextView;

import android.widget.Toast;

public class CategoryAdapterNew extends BasicAdapter<Object> {

private final int ITEM_TITLE = 0;// title类型的item

private final int ITEM_INFO = 1;// info类型的item

private final ArrayList<TextView> disabledTextView;

public CategoryAdapterNew(Context context, ArrayList<Object> list) {

super(context, list);

disabledTextView = new ArrayList<TextView>();

}

@Override

public boolean areAllItemsEnabled() {

return false;

}

@Override

public boolean isEnabled(int position) {

return false;

}

/**

* 共2中item类型：title和info

@Override

public int getViewTypeCount() {

return 2;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

TitleHolder titleHolder;

InfoHolder infoHolder;

int itemViewType = getItemViewType(position);

switch (itemViewType) {

case ITEM_TITLE:// 当前是title

if (null == convertView) {

convertView = View.inflate(context, R.layout.adapter_category_title_new, null);

titleHolder = new TitleHolder();

titleHolder.icon = (ImageView) convertView.findViewById(R.id.icon);

titleHolder.category_title = (TextView) convertView.findViewById(R.id.category_title);

convertView.setTag(titleHolder);

} else {

titleHolder = (TitleHolder) convertView.getTag();

}

setTitleImage(list.get(position).toString(), titleHolder);

titleHolder.category_title.setText(list.get(position).toString());

titleHolder.category_title.setTextColor(Color.parseColor("#666666"));

break;

case ITEM_INFO:// 当前是info

if (null == convertView) {

convertView = View.inflate(context, R.layout.adapter_category_info_new, null);

infoHolder = new InfoHolder();

infoHolder.infoLayout = (LinearLayout) convertView.findViewById(R.id.adapter_category_info);

convertView.setTag(infoHolder);

} else {

infoHolder = (InfoHolder) convertView.getTag();

infoHolder.infoLayout.removeAllViews();

}

// 获取分类数据

ArrayList<String> smallCategoryList = new ArrayList<String>();

smallCategoryList = (ArrayList<String>) list.get(position);

buildLayout(smallCategoryList, infoHolder.infoLayout);// 创建布局

break;

}

return convertView;

}

private void buildLayout(final ArrayList<String> smallCategoryList, LinearLayout infoLayout) {

// 根据小分类的长度进行创建布局

// 与4求模

int count = 0;// 求模次数

// 数据调试

// smallCategoryList.clear();

// smallCategoryList.add("测试1");

// smallCategoryList.add("测试2");

// smallCategoryList.add("测试3");

// smallCategoryList.add("测试4");

// smallCategoryList.add("测试5");

// smallCategoryList.add("测试6");

// smallCategoryList.add("测试7");

// smallCategoryList.add("测试8");

// smallCategoryList.add("测试9");

// smallCategoryList.add("测试10");

// smallCategoryList.add("测试11");

// smallCategoryList.add("测试12");

// smallCategoryList.add("测试13");

// smallCategoryList.add("测试14");

System.out.println("求模前尺寸:" + smallCategoryList.size());

for (int i = 0; i < smallCategoryList.size(); i++) {

if (i != 0) {

if (i % 4 == 0) {

count = count + 1;

}

if (4 * count < smallCategoryList.size()) {

System.out.println("剩余模独数:" + (smallCategoryList.size() - 4 * count) + "已得生成数：" + count);

count = count + 1;// 不管怎样要多一行

if ((smallCategoryList.size() - 4 * count) == 4) {

}

// 判断count数量是否大于3 是的话3行4列显示下拉否则直接全部显示

if (count > 3) {

for (int i = 0; i < count; i++) {

// 生成两行行小分类LinearLayout并且生成小分类列表对应尺寸的textview

// 生成4格小格小LinearLayout

LinearLayout llayout = new LinearLayout(context);

llayout.setOrientation(LinearLayout.HORIZONTAL);

llayout.setBackground(context.getResources().getDrawable(R.drawable.setbar_bg));

LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,

android.view.ViewGroup.LayoutParams.MATCH_PARENT);

params.leftMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

params.rightMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

llayout.setGravity(Gravity.CENTER_VERTICAL);

llayout.setLayoutParams(params);

// TextView部分

for (int j = i * 4; j < smallCategoryList.size(); j++) {

final int m = j;

// 当大于第12项将3行4列变为下拉的符号

if (j == 11) {

* <LinearLayout android:id="@+id/line3_tv5"

* android:layout_width="0dp"

* android:layout_height="@dimen/y150"

* android:layout_weight="3"

* android:background="@drawable/setbar_bg"

* android:gravity="center" android:visibility="gone" >

* <ImageView android:layout_width="wrap_content"

* android:layout_height="wrap_content"

* android:background=

* "@drawable/ic_global_more_category_arrow_down" />

final ImageView imageView = new ImageView(context);

imageView.setBackground(

context.getResources().getDrawable(R.drawable.ic_global_more_category_arrow_down));

LinearLayout.LayoutParams mParams = new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,

LinearLayout.LayoutParams.WRAP_CONTENT);

mParams.setMargins(xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x100), 0,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50), 0);

mParams.gravity = Gravity.CENTER_VERTICAL;

imageView.setLayoutParams(mParams);

imageView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

imageView.setVisibility(View.GONE);

System.out.println("disabledTextView"+disabledTextView.size()+"smallCategoryList"+smallCategoryList.size());

for (int k = 0; k < disabledTextView.size(); k++) {

disabledTextView.get(k).setVisibility(View.VISIBLE);

}

});

// 当时的那个下拉对应的textview

// 添加4格TextView

TextView textView = new TextView(context);

// 获得屏幕宽

WindowManager wm = xxx.getApp().getMainActivity().getWindowManager();

int width = wm.getDefaultDisplay().getWidth();

int height = wm.getDefaultDisplay().getHeight();

width = width / 4 - (xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x26));

System.out.println("mWidth4:" + width);

android.view.ViewGroup.LayoutParams tvparams = new LayoutParams(width,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.y150));

textView.setLayoutParams(tvparams);

textView.setTextColor(Color.parseColor("#535553"));

textView.setGravity(Gravity.CENTER);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setBackground(xxx.getApp().getResources().getDrawable(R.drawable.setbar_bg));

textView.setText(smallCategoryList.get(j));

textView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, smallCategoryList.get(m), Toast.LENGTH_SHORT).show();

}

});

textView.setVisibility(View.GONE);

disabledTextView.add(textView);

llayout.addView(textView);

llayout.addView(imageView);

break;

}

// 添加4格TextView

TextView textView = new TextView(context);

// 获得屏幕宽

WindowManager wm = xxx.getApp().getMainActivity().getWindowManager();

int width = wm.getDefaultDisplay().getWidth();

int height = wm.getDefaultDisplay().getHeight();

width = width / 4 - (xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x26));

System.out.println("mWidth4:" + width);

android.view.ViewGroup.LayoutParams tvparams = new LayoutParams(width,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.y150));

textView.setLayoutParams(tvparams);

textView.setTextColor(Color.parseColor("#535553"));

textView.setGravity(Gravity.CENTER);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setBackground(xxx.getApp().getResources().getDrawable(R.drawable.setbar_bg));

textView.setText(smallCategoryList.get(j));

textView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, smallCategoryList.get(m), Toast.LENGTH_SHORT).show();

}

});

if (j > 11) {

textView.setVisibility(View.GONE);

disabledTextView.add(textView);

}

llayout.addView(textView);

}

infoLayout.addView(llayout);

}

} else

{

// 如果一行

if (count == 1) {

// 生成一行小分类LinearLayout并且生成小分类列表对应尺寸的textview

// 生成4格小格小LinearLayout

LinearLayout llayout = new LinearLayout(context);

llayout.setOrientation(LinearLayout.HORIZONTAL);

llayout.setBackground(context.getResources().getDrawable(R.drawable.setbar_bg));

LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,

android.view.ViewGroup.LayoutParams.MATCH_PARENT);

params.leftMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

params.rightMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

llayout.setGravity(Gravity.CENTER_VERTICAL);

llayout.setLayoutParams(params);

// TextView部分

for (int i = 0; i < smallCategoryList.size(); i++) {

final int m = i;

// 添加4格TextView

TextView textView = new TextView(context);

// 获得屏幕宽

WindowManager wm = xxx.getApp().getMainActivity().getWindowManager();

int width = wm.getDefaultDisplay().getWidth();

int height = wm.getDefaultDisplay().getHeight();

width = width / 4 - (xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x26));

System.out.println("mWidth4:" + width);

android.view.ViewGroup.LayoutParams tvparams = new LayoutParams(width,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.y150));

textView.setLayoutParams(tvparams);

textView.setTextColor(Color.parseColor("#535553"));

textView.setGravity(Gravity.CENTER);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setBackground(xxx.getApp().getResources().getDrawable(R.drawable.setbar_bg));

textView.setText(smallCategoryList.get(i));

textView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, smallCategoryList.get(m), Toast.LENGTH_SHORT).show();

}

});

llayout.addView(textView);

}

infoLayout.addView(llayout);

} else if (count == 2) {

for (int i = 0; i < count; i++) {

// 生成两行行小分类LinearLayout并且生成小分类列表对应尺寸的textview

// 生成4格小格小LinearLayout

LinearLayout llayout = new LinearLayout(context);

llayout.setOrientation(LinearLayout.HORIZONTAL);

llayout.setBackground(context.getResources().getDrawable(R.drawable.setbar_bg));

LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,

android.view.ViewGroup.LayoutParams.MATCH_PARENT);

params.leftMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

params.rightMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

llayout.setGravity(Gravity.CENTER_VERTICAL);

llayout.setLayoutParams(params);

// TextView部分

for (int j = i * 4; j < smallCategoryList.size(); j++) {

final int m = j;

System.out.println("初始j:" + j);

System.out.println("初始i:" + i);

// 添加4格TextView

TextView textView = new TextView(context);

// 获得屏幕宽

WindowManager wm = xxx.getApp().getMainActivity().getWindowManager();

int width = wm.getDefaultDisplay().getWidth();

int height = wm.getDefaultDisplay().getHeight();

width = width / 4 - (xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x26));

System.out.println("mWidth4:" + width);

android.view.ViewGroup.LayoutParams tvparams = new LayoutParams(width,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.y150));

textView.setLayoutParams(tvparams);

textView.setTextColor(Color.parseColor("#535553"));

textView.setGravity(Gravity.CENTER);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setBackground(xxx.getApp().getResources().getDrawable(R.drawable.setbar_bg));

textView.setText(smallCategoryList.get(j));

textView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, smallCategoryList.get(m), Toast.LENGTH_SHORT).show();

}

});

llayout.addView(textView);

}

infoLayout.addView(llayout);

}

} else if (count == 3) {

for (int i = 0; i < count; i++) {

// 生成两行行小分类LinearLayout并且生成小分类列表对应尺寸的textview

// 生成4格小格小LinearLayout

LinearLayout llayout = new LinearLayout(context);

llayout.setOrientation(LinearLayout.HORIZONTAL);

llayout.setBackground(context.getResources().getDrawable(R.drawable.setbar_bg));

LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,

android.view.ViewGroup.LayoutParams.MATCH_PARENT);

params.leftMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

params.rightMargin = xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x50);

llayout.setGravity(Gravity.CENTER_VERTICAL);

llayout.setLayoutParams(params);

// TextView部分

for (int j = i * 4; j < smallCategoryList.size(); j++) {

final int m = j;

// 添加4格TextView

TextView textView = new TextView(context);

// 获得屏幕宽

WindowManager wm = xxx.getApp().getMainActivity().getWindowManager();

int width = wm.getDefaultDisplay().getWidth();

int height = wm.getDefaultDisplay().getHeight();

width = width / 4 - (xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.x26));

System.out.println("mWidth4:" + width);

android.view.ViewGroup.LayoutParams tvparams = new LayoutParams(width,

xxx.getApp().getResources().getDimensionPixelOffset(R.dimen.y150));

textView.setLayoutParams(tvparams);

textView.setTextColor(Color.parseColor("#535553"));

textView.setGravity(Gravity.CENTER);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setBackground(xxx.getApp().getResources().getDrawable(R.drawable.setbar_bg));

textView.setText(smallCategoryList.get(j));

textView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, smallCategoryList.get(m), Toast.LENGTH_SHORT).show();

}

});

llayout.addView(textView);

}

infoLayout.addView(llayout);

}

/**

* 根据position判断当前bean应该使用哪种类型的item

@Override

public int getItemViewType(int position) {

Object object = list.get(position);

if (object instanceof String) {

// 当前是title类型的item

System.out.println("object instanceof String");

return ITEM_TITLE;

} else {

// 当前是info类型的item

System.out.println("object not instanceof String");

return ITEM_INFO;

}

private void setTitleImage(String title, TitleHolder titleHolder) {

if (title.equals("热门")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.renmen, titleHolder.icon);

} else if (title.equals("美食")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.meishi, titleHolder.icon);

} else if (title.equals("电影")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.dianying, titleHolder.icon);

} else if (title.equals("房产")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.fangchan, titleHolder.icon);

} else if (title.equals("购物")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.gouwu, titleHolder.icon);

} else if (title.equals("酒店")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.jiudian, titleHolder.icon);

} else if (title.equals("丽人")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.liren, titleHolder.icon);

} else if (title.equals("旅游")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.lvyou, titleHolder.icon);

} else if (title.equals("汽车")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.qiche, titleHolder.icon);

} else if (title.equals("其他")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.qita, titleHolder.icon);

} else if (title.equals("热门")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.renmen, titleHolder.icon);

} else if (title.equals("音乐")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.yinyue, titleHolder.icon);

} else if (title.equals("娱乐")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.yule, titleHolder.icon);

} else if (title.equals("生活")) {

ImageLoader.getInstance().displayImage("drawable://" + R.drawable.qita, titleHolder.icon);

}

private static class TitleHolder {

ImageView icon;

TextView category_title;

}

private static class InfoHolder {

LinearLayout infoLayout;

}

最终效果左边美团右边我们的

时间： 2024-08-18 06:25:34

仿美团全部分类页面(网络数据加载+Listview+Textview自动生成)的相关文章

Android下设置ListView数据加载完成后执行layoutanimation

今天使用android的volley框架写了一个简单的网络天气获取的demo. 承载数据的空间是ListView 因为是网络加载,必然先要设置ListView的默认数据,我设置的就是那个Loading... 然后从网络获取到数据后,再解析,然后更新到adapter,然后notifyDataSetChanged更新数据到ListView. 可是ListView设置了layoutanimation,这样默认的ListView打开后那个Loading执行了动画,当网络数据加载完毕后, layoutan

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

【Android】解决RadioButton+FragmentPagerAdapter+Fragment切换页面数据加载的问题

解决RadioButton+FragmentPagerAdapter+Fragment切换页面数据加载的问题

angular延时函数和数据加载完才显示主要的页面、上传文件到后端、富文本框编辑框（ckeditor)

延时函数 setTimeout(()=>{ console.log("延时打印") },10000); // 延时10秒打印 //简单等数据加载完才显示主要的页面 1.先下载ngx-loading模块 npm install --save ngx-loading 2.在app.module.ts中引入NgxLoadingModule模块 import {NgxLoadingModule} from 'ngx-loading'; imports: [ BrowserModule,

实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）

实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624.aspx 译 Q:77811970 实现虚拟模式的原因之一 DataGridView控制只检索数据,因为它是必要的. 这就是所谓的即时数据加载 . 如果你正在与一个非常大的表在一个远程数据库,例如,您可能希望避免启动延迟,只检索所需的数据显示和检索额外的数据只有当用户新行滚动到视图. 如果客户

APP中数据加载的6种方式-b

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数

[转]6种常见的数据加载模式设计

原文链接:http://elya.cc/2014/03/31/loading/ 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的

6种常见的数据加载模式设计

设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待