一款超酷的Android自定义加载控件

在设计应用的时候,我们应该热爱极简主义,简单就是好的,对于很多用户来说,复杂的东西并不受欢迎。
我要实现的是根据不同的情况去显示不同的加载效果,随用随调,效果是借鉴于某一项目的效果,我认为有必要提取出来改善封装一下,供以后使用。情况大致分为:加载中、无网络、无数据、加载失败等,这些仅仅就需要一个View 就可以搞定啦!

预览下效果图:

我们怎么实现这种效果呢
view_loading.xml的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <LinearLayout
  android:id="@+id/lin_loading"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:visibility="gone"
  android:orientation="vertical">

  <ImageView
   android:id="@+id/img_loading"
   android:layout_width="100dp"
   android:layout_height="100dp"
   android:src="@drawable/loading_animation" />

  <TextView
   android:id="@+id/tv_loading"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="16dp"
   android:layout_gravity="center_horizontal"
   android:textSize="14sp" />

 </LinearLayout>

 <LinearLayout
  android:id="@+id/lin_load"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:gravity="center"
  android:orientation="vertical"
  android:visibility="visible"

  >

  <ImageView
   android:id="@+id/iv_load"
   android:layout_width="100dp"
   android:layout_height="100dp"
   android:src="@mipmap/ic_launcher" />

  <TextView
   android:id="@+id/tv_load"
   android:layout_width="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_height="wrap_content" />

  <Button
   android:id="@+id/btn_load"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="8dp"
   android:layout_gravity="center_horizontal"
   android:textSize="14sp" />

 </LinearLayout>

</FrameLayout>

从布局来看,我分了两个部分,一个是加载中,另外一个是带有ImagView、文字和按钮的布局,有人看到这,就会说,哇靠,这不是很简单吗?根据不同的情况去设置Visibility的值就好了啊,没错,原理就是这样。

XHLoadingView.java的代码如下:

package com.woyou.loadingdemo.widget;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.woyou.loadingdemo.LoadingState;
import com.woyou.loadingdemo.R;

/**
 * Created by Xiho on 11:21.
 */
public class XHLoadingView extends FrameLayout {

 private Context mContext;
 // 加载中的布局
 private LinearLayout mLinearLoad;
 //其他加载的布局
 private LinearLayout mLinearLoading;

 private TextView mTvLoading;

 private TextView mTvLoad;

 private ImageView mIvLoading;

 private ImageView mIvLoad;

 private Button mBtnLoad;

 private LoadingState mState;

 private AnimationDrawable animation;

 public XHLoadingView(Context context) {
  super(context);
  mContext = context;
 }

 public XHLoadingView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
 }

 public XHLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  mContext = context;
 }

 public XHLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  mContext = context;

 }
 public void build(){
  LayoutInflater.from(mContext).inflate(R.layout.view_loading, this, true);

  mLinearLoading = (LinearLayout) findViewById(R.id.lin_loading);

  mLinearLoad = (LinearLayout) findViewById(R.id.lin_load);

  mIvLoading = (ImageView) findViewById(R.id.img_loading);

  mIvLoad = (ImageView) findViewById(R.id.iv_load);

  mTvLoading = (TextView) findViewById(R.id.tv_loading);

  mTvLoad = (TextView) findViewById(R.id.tv_load);

  mBtnLoad = (Button) findViewById(R.id.btn_load);

  mBtnLoad.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    setState(LoadingState.STATE_LOADING);
    mOnRetryListener.onRetry();
   }
  });

 }

 @Override
 public void setVisibility(int visibility) {
  super.setVisibility(visibility);
  if(View.GONE==visibility && mState==LoadingState.STATE_LOADING && animation!=null&&animation.isRunning()){
   animation.stop();
  }
 }

 /**
  * 加载中提示文字
  */
 private String mLoadingText;
 private int mLoadingIcon;
 public XHLoadingView withLoadingIcon(int resId){
  mLoadingIcon = resId;
  return this;
 }

 /**
  * 加载数据为空提示文字
  */
 private String mLoadEmptyText;
 private int mLoadEmptyIcon;
 public XHLoadingView withEmptyIcon(int resId){
  mLoadEmptyIcon = resId;
  return this;
 }

 /**
  * 无网络提示
  */
 private String mLoadNoNetworkText;
 private int mNoNetworkIcon;
 public XHLoadingView withNoNetIcon(int resId){
  mNoNetworkIcon = resId;
  return this;
 }

 private OnRetryListener mOnRetryListener;

 /**
  * 定义重试的的接口
  */
 public interface OnRetryListener {
  void onRetry();
 }

 public XHLoadingView withOnRetryListener(OnRetryListener mOnRetryListener){
  this.mOnRetryListener = mOnRetryListener;
  return this;
 }

 /**
  * 设置加载的状态
  * @param state
  */
 public void setState(LoadingState state){
  if(mState==state){
   return;
  }else if(state==LoadingState.STATE_LOADING){
   mLinearLoading.setVisibility(VISIBLE);
   mLinearLoad.setVisibility(GONE);
  }else if(state!=LoadingState.STATE_LOADING){
   mLinearLoading.setVisibility(GONE);
   mLinearLoad.setVisibility(VISIBLE);
   if(animation!=null && mState==LoadingState.STATE_LOADING)
    animation.stop();
  }
  changeState(state);
 }

 public boolean btnEmptyEnable = true;
 public boolean btnErrorEnable = true;
 public boolean btnNoNetworkEnable = true;

 public XHLoadingView withBtnNoNetEnnable(boolean ennable) {
  btnNoNetworkEnable = ennable;
  return this;
 }

 public XHLoadingView withBtnErrorEnnable(boolean ennable) {
  btnErrorEnable = ennable;
  return this;
 }

 public XHLoadingView withBtnEmptyEnnable(boolean ennable) {
  btnEmptyEnable = ennable;
  return this;
 }

 /**
  * 改变状态
  * @param state
  */
 private void changeState(LoadingState state) {
  switch (state) {
   //加载中
   case STATE_LOADING:
    mState = LoadingState.STATE_LOADING;
    mIvLoading.setImageResource(mLoadingIcon);
    mTvLoading.setText(mLoadingText);
    if (animation == null) {
     animation = (AnimationDrawable) mIvLoading.getDrawable();
    }
    if (animation != null)
     animation.start();
    break;
   //数据为空
   case STATE_EMPTY:
    mState = LoadingState.STATE_EMPTY;
    mIvLoad.setImageResource(mLoadEmptyIcon);
    mTvLoad.setText(mLoadEmptyText);
    if (btnEmptyEnable) {
     mBtnLoad.setVisibility(VISIBLE);
     mBtnLoad.setText(btn_empty_text);
    } else {
     mBtnLoad.setVisibility(GONE);
    }
    break;
   //加载失败
   case STATE_ERROR:
    mState = LoadingState.STATE_ERROR;
    mIvLoad.setImageResource(mErrorIco);
    mTvLoad.setText(mLoadErrorText);
    if (btnErrorEnable) {
     mBtnLoad.setVisibility(VISIBLE);
     mBtnLoad.setText(btn_error_text);
    } else {
     mBtnLoad.setVisibility(GONE);
    }
    break;
   //无网络
   case STATE_NO_NET:
    mState = LoadingState.STATE_NO_NET;
    mIvLoad.setImageResource(mNoNetworkIcon);
    mTvLoad.setText(mLoadNoNetworkText);
    if (btnNoNetworkEnable) {
     mBtnLoad.setVisibility(VISIBLE);
     mBtnLoad.setText(btn_nonet_text);
    } else {
     mBtnLoad.setVisibility(GONE);
    }
    break;
  }

 }

 /**
  * 后台或者本地出现错误提示
  */
 private String mLoadErrorText;
 private int mErrorIco;

 public XHLoadingView withErrorIco(int resId) {
  mErrorIco = resId;
  return this;
 }

 /**
  * 加载空数据
  * @param resId
  * @return
  */
 public XHLoadingView withLoadEmptyText(int resId) {
  mLoadEmptyText = getResources().getString(resId);
  return this;
 }

 public XHLoadingView withLoadEmptyText(String mLoadEmptyText) {
  this.mLoadEmptyText = mLoadEmptyText;
  return this;
 }

 /**
  * 无网络时候加载文字
  * @param resId
  * @return
  */
 public XHLoadingView withLoadNoNetworkText(int resId) {
  mLoadNoNetworkText = getResources().getString(resId);
  return this;
 }

 public String btn_empty_text = "重试";
 public String btn_error_text = "重试";
 public String btn_nonet_text = "重试";

 /**
  * 数据为空的Button的文字提示
  * @param text
  * @return
  */
 public XHLoadingView withBtnEmptyText(String text) {
  this.btn_empty_text = text;
  return this;
 }

 /**
  * 加载错误的Button的文字提示
  * @param text
  * @return
  */
 public XHLoadingView withBtnErrorText(String text) {
  this.btn_error_text = text;
  return this;
 }

 /**
  * 加载错误的文字提示
  * @param resId
  * @return
  */
 public XHLoadingView withLoadErrorText(int resId) {
  this.mLoadErrorText = getResources().getString(resId);
  return this;
 }
 public XHLoadingView withLoadErrorText(String mLoadedErrorText) {
  this.mLoadErrorText = mLoadedErrorText;
  return this;
 }

 /**
  * 加载无网络的Button的文字提示
  * @param text
  * @return
  */
 public XHLoadingView withBtnNoNetText(String text) {
  this.btn_nonet_text = text;
  return this;
 }

 /**
  * 加载没有网路的文字提示
  * @param mLoadedNoNetText
  * @return
  */
 public XHLoadingView withLoadNoNetworkText(String mLoadedNoNetText) {
  this.mLoadNoNetworkText = mLoadedNoNetText;
  return this;
 }

 public XHLoadingView withLoadingText(int resId) {
  this.mLoadingText = getResources().getString(resId);
  return this;
 }

 public XHLoadingView withLoadingText(String mLoadingText) {
  this.mLoadingText = mLoadingText;
  return this;
 }

}

针对不同的情况作了不同的处理,然后我们在需要的Activity调用。

 private XHLoadingView mLoadingView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_display);
  mLoadingView = (XHLoadingView) findViewById(R.id.lv_loading);
  mLoadingView.withLoadEmptyText("≥﹏≤ , 啥也木有 !").withEmptyIcon(R.drawable.disk_file_no_data).withBtnEmptyEnnable(false)
     .withErrorIco(R.drawable.ic_chat_empty).withLoadErrorText("(῀( ˙᷄ỏ˙᷅ )῀)ᵒᵐᵍᵎᵎᵎ,我家程序猿跑路了 !").withBtnErrorText("臭狗屎!!!")
     .withLoadNoNetworkText("你挡着信号啦o( ̄ヘ ̄o)☞ᗒᗒ 你走").withNoNetIcon(R.drawable.ic_chat_empty).withBtnNoNetText("网弄好了,重试")
     .withLoadingIcon(R.drawable.loading_animation).withLoadingText("加载中...").withOnRetryListener(new XHLoadingView.OnRetryListener() {
    @Override
    public void onRetry() {
     SnackbarUtil.show(mLoadingView,"已经在努力重试了",0);
    }
   }).build();
  }

........

 //加载中
  mLoadingView.setVisibility(View.VISIBLE);
  mLoadingView.setState(LoadingState.STATE_LOADING);

 //空数据
  mLoadingView.setVisibility(View.VISIBLE);
  mLoadingView.setState(LoadingState.STATE_EMPTY)
 //无网络
  mLoadingView.setVisibility(View.VISIBLE);
  mLoadingView.setState(LoadingState.STATE_NO_NET);

 //加载错误
  mLoadingView.setVisibility(View.VISIBLE);
  mLoadingView.setState(LoadingState.STATE_ERROR);

.......

 }

上面我是为了展示不同的效果,所以写了几个点击事件呢,实际中不是这样的,初始化过后,在需要的地方调用OK, 源码中注释详细,就不用再做过多的解释了吧!

完整代码:XHLoadingView

作者:xuhao
QQ:504105930
转载请注明出处:http://blog.csdn.net/u011974987/article/details/51455333

以上就是本文的全部内容,希望对大家学习Android软件编程有所帮助。

(0)

相关推荐

  • android异步加载图片并缓存到本地实现方法

    在android项目中访问网络图片是非常普遍性的事情,如果我们每次请求都要访问网络来获取图片,会非常耗费流量,而且图片占用内存空间也比较大,图片过多且不释放的话很容易造成内存溢出.针对上面遇到的两个问题,首先耗费流量我们可以将图片第一次加载上面缓存到本地,以后如果本地有就直接从本地加载.图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片. 首先看一下异步加载缓存本地代码: 复制代码 代码如下: public

  • Android 异步加载图片分析总结

    研究了android从网络上异步加载图像,现总结如下: (1)由于android UI更新支持单一线程原则,所以从网络上取数据并更新到界面上,为了不阻塞主线程首先可能会想到以下方法. 在主线程中new 一个Handler对象,加载图像方法如下所示 复制代码 代码如下: private void loadImage(final String url, final int id) { handler.post(new Runnable() { public void run() { Drawable

  • android WebView加载html5介绍

    Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解决方式:1 viewport属性 2 CSS控制 3 JS控制 1 viewport属性放在HTML的<meta>中 Html代码 复制代码 代码如下: <SPANstyle="FONT-SIZE: x-small"> <

  • Android中自定义加载样式图片的具体实现

    先让大家看看效果图吧,相信很多Android初学者都想知道这中效果是怎么实现的,来上图: 想实现上面这张图中的自定义加载样式,其实很简单,首先我们需要的布局组件有ProcessBar和TextView,下面是布局文件的代码(只是加载的页面的布局): 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.an

  • Android加载大分辨率图片到手机内存中的实例方法

    还原堆内存溢出的错误首先来还原一下堆内存溢出的错误.首先在SD卡上放一张照片,分辨率为(3776 X 2520),大小为3.88MB,是我自己用相机拍的一张照片.应用的布局很简单,一个Button一个ImageView,然后按照常规的方式,使用BitmapFactory加载一张照片并使用一个ImageView展示. 代码如下: 复制代码 代码如下: btn_loadimage.setOnClickListener(new View.OnClickListener() { @Override   

  • android动态加载布局文件示例

    一.布局文件part.xml: 复制代码 代码如下: <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="

  • Android 中动态加载.jar的实现步骤

    首先第一个是 jar 文件的制作,Java 里面直接把 .class 文件打包到 .jar 文件里面就可以了,但是 Android 的 Dalvik VM 是不认 Java 的 byte code 的,所以不能直接这么打包,而要用 dx 工具转成 Dalvik byte code 才可以.当然,dx 工具转了之后,jar 包里面就不 是 .class 文件了,而是 .dex 文件. 第二个是,Android 里面虽然也提供了 URLClassLoader 的实现,但是并不能用.要动态加载其它类,

  • android 加载本地联系人实现方法

    首先先建布局文件,界面很简单,就是一个搜索框和下面的联系人列表:   复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layou

  • Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

    Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如ListView上有100个Item,一屏只显示10个Item,我们知道getView()中convertView是用来复用View对象的,因为一个Item的对应一个View对象,而Ima

  • android判断phonegap是否联网且加载super.loadUrl网址

    复制代码 代码如下: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setIntegerProperty("splashscreen", R.drawable.splash); ConnectivityManager cwjManager=(ConnectivityManager)getSystemService(Context.CONNECTIVI

随机推荐