Android在进行访问网络或者是请求数据(例如加载列表数据,载入网页等等),需要给用户反馈一个加载的状态,一般会使用一个锁屏的加载弹出框。但是使用弹出框进行加载会有一个不好的体验效果,用户想要退出的加载页面的时候需要按两次返回键才能推出此页面(第一次关闭弹出框,第二次退出当前页面)。所有使用镶嵌在内部的加载可以提供更好的用户体验,使用一次返回就可以退出当前页面,同时自定义布局自定义加载效果。
实现原理:将自定义的控件放到需要加载数据的控件(例如一个listview或者是一个webview等等)同一个父控件(一个FrameLayout或者是RelativeLayout)下,将此控件设置为gone。在进行加载的时候就可以调用控件自定义的方法遮挡加载控件显示想要的效果。
可以显示正在加载,加载失败,加载内容为空等状态。
自定义控件布局文件:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/drakwhite" > <!-- 正在加载中。。。 --> <LinearLayout android:id="@+id/helper_loading" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:focusable="true" android:background="@color/white" android:focusableInTouchMode="true" android:gravity="center" android:orientation="vertical" > <!-- 圆角黑色背景 android:background="@drawable/bg_connect_loading" --> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:padding="15dip" > <ImageView android:id="@+id/loading_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" /> <TextView android:id="@+id/tv_loading_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dip" android:text="@string/loading" android:textColor="#666666" android:textSize="16sp" /> </LinearLayout> </LinearLayout> <!-- 数据加载失败 --> <LinearLayout android:id="@+id/helper_load_failed" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/white" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:gravity="center" android:orientation="vertical" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:background="@null" android:src="@drawable/loading_failed" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="20dp" android:background="@null" android:gravity="center_horizontal" android:text="@string/sorry_load_fail" android:textColor="#666666" android:textSize="16sp" /> <Button android:id="@+id/bt_connect_refresh" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:layout_marginRight="30dp" android:layout_marginTop="15dip" android:background="@drawable/btn_downbutton" android:text="@string/flush" android:textColor="@color/darkgray" android:textSize="16sp" /> </LinearLayout> </LinearLayout> <!-- 加载的内容为空 --> <LinearLayout android:id="@+id/helper_is_empty" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/white" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv_is_empty" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:background="@null" android:src="@drawable/loading_failed" /> <TextView android:id="@+id/tv_is_empty" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="20dp" android:gravity="center" android:text="@string/sorry_info_empty" android:textColor="#666666" android:textSize="16sp" /> <Button android:id="@+id/bt_skip_to_coupon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:background="@color/darkgray" android:textColor="@color/white" android:textSize="16sp" android:visibility="gone" /> </LinearLayout> </FrameLayout>自定控件类:
public class Loading { /** * 显示正在加载(没有延迟) * * @param helperView */ public static void showLoading(final View helperView) { AnimationDrawable anim; final View loadingView = helperView.findViewById(R.id.helper_loading); final View failedView = helperView .findViewById(R.id.helper_load_failed); final View isEmptyView = helperView.findViewById(R.id.helper_is_empty); final ImageView loadingImg = (ImageView)helperView.findViewById(R.id.loading_img); // loadingImg.setAnimation(loadingImg.getContext().getResources().getAnimation(R.anim.animation_list)); loadingImg.setBackgroundResource(R.anim.animation_list); anim = (AnimationDrawable)loadingImg.getBackground(); anim.start(); helperView.setVisibility(View.VISIBLE); failedView.setVisibility(View.GONE); isEmptyView.setVisibility(View.GONE); loadingView.setVisibility(View.VISIBLE); } /** * 显示正在加载(延迟一秒后显示) * * @param helperView */ public static void showLoading_Delayed(final View helperView) { helperView.setTag(true); // 标记为显示 final View loadingView = helperView.findViewById(R.id.helper_loading); final View failedView = helperView .findViewById(R.id.helper_load_failed); final View isEmptyView = helperView.findViewById(R.id.helper_is_empty); Handler handler = new Handler(); handler.postDelayed(new Runnable() { @Override public void run() { if ((Boolean) helperView.getTag()) { helperView.setVisibility(View.VISIBLE); failedView.setVisibility(View.GONE); isEmptyView.setVisibility(View.GONE); loadingView.setVisibility(View.VISIBLE); } } }, 1000); } /** * 隐藏加载提示 * * @param helperView */ @SuppressWarnings("unused") public static void hideLoad_Helper(final View helperView) { ImageView loadingImg = (ImageView)helperView.findViewById(R.id.loading_img); // loadingImg.setBackground(null); helperView.setTag(false); // 标记为隐藏 helperView.setVisibility(View.GONE); } /** * 显示加载失败(没有延迟) * * @param helperView */ public static void showFaild(final View helperView, OnClickListener listener) { final View loadingView = helperView.findViewById(R.id.helper_loading); final View failedView = helperView .findViewById(R.id.helper_load_failed); final View isEmptyView = helperView.findViewById(R.id.helper_is_empty); Button bt_Refresh = (Button) failedView .findViewById(R.id.bt_connect_refresh); bt_Refresh.setOnClickListener(listener); helperView.setVisibility(View.VISIBLE); failedView.setVisibility(View.VISIBLE); loadingView.setVisibility(View.GONE); isEmptyView.setVisibility(View.GONE); } /** * 显示加载失败(延迟一秒后显示) * * @param helperView */ public static void showLoadFaild_Delayed(final View helperView, OnClickListener listener) { helperView.setTag(true); // 标记为显示 final View loadingView = helperView.findViewById(R.id.helper_loading); final View failedView = helperView .findViewById(R.id.helper_load_failed); final View isEmptyView = helperView.findViewById(R.id.helper_is_empty); Button bt_Refresh = (Button) loadingView .findViewById(R.id.bt_connect_refresh); bt_Refresh.setOnClickListener(listener); Handler handler = new Handler(); handler.postDelayed(new Runnable() { @Override public void run() { if ((Boolean) helperView.getTag()) { helperView.setVisibility(View.VISIBLE); failedView.setVisibility(View.VISIBLE); loadingView.setVisibility(View.GONE); isEmptyView.setVisibility(View.GONE); } } }, 1000); } /** * 显示提示内容为空的提示页面 */ public static void showIsEmpty(View helperView) { View loadingView = helperView.findViewById(R.id.helper_loading); View failedView = helperView.findViewById(R.id.helper_load_failed); View isEmptyView = helperView.findViewById(R.id.helper_is_empty); helperView.setVisibility(View.VISIBLE); failedView.setVisibility(View.GONE); loadingView.setVisibility(View.GONE); isEmptyView.setVisibility(View.VISIBLE); } /** * 更改内容为空界面 * * @param helperView * @param imgId * 更改提示图片(null 表示不更改) * @param msg * 更改提示文字(null 值不更改) */ public static void changeEmptyView(View helperView, Integer imgId, String msg) { ImageView iv_IsEmptyView = (ImageView) helperView .findViewById(R.id.iv_is_empty); TextView tv_isEmptyView = (TextView) helperView .findViewById(R.id.tv_is_empty); if (null != imgId) { iv_IsEmptyView.setImageResource(imgId); } if (null != msg) { tv_isEmptyView.setText(msg); } } /** * 显示Empty页面的按钮 * * @param helperView * @param btnText * 按钮文字 * @param listener * 按钮listener */ public static void showShipToCoupon(View helperView, String btnText, OnClickListener listener) { Button skipToCoupon = (Button) helperView .findViewById(R.id.bt_skip_to_coupon); skipToCoupon.setVisibility(View.VISIBLE); if (null != btnText) { skipToCoupon.setText(btnText); } if (null != listener) { skipToCoupon.setOnClickListener(listener); } } public static void changeLoadingText(View helperView, String msg) { TextView tv_LoadingText = (TextView) helperView .findViewById(R.id.tv_loading_text); if (null != msg) { tv_LoadingText.setText(msg); } } /** * 更改提示页面的背景 * * @param helperView * @param drawableId */ public static void changeBacground(View helperView, int drawableId) { helperView.setBackgroundResource(drawableId); } }在布局文件中引入Loading
<FrameLayout android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="35" > <WebView android:id="@+id/settingwebView" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <include android:id="@+id/ui_helper_web" android:layout_width="fill_parent" android:layout_height="fill_parent" layout="@layout/layout_connecte_state" android:visibility="gone" /> </FrameLayout>
View load=(View)findById(R.id.ui_helper_web); Loading.showLoading(load);//显示加载页面 Loading.hideLoad_Helper(load)//显示隐藏页面 Loading.showFaild(load)//显示加载失败页面 Loading.showIsEmpty(load)//显示加载内容为空页面以上可以实现内嵌加载,修改布局文件变换不同样式。