Android 自定義一款炫酷的加載控件

概述:

在設(shè)計(jì)應(yīng)用的時(shí)候屡萤,我們應(yīng)該熱愛極簡主義锈死,簡單就是好的贫堰,對(duì)于很多用戶來說穆壕,復(fù)雜的東西并不受歡迎。
我要實(shí)現(xiàn)的是根據(jù)不同的情況去顯示不同的加載效果其屏,隨用隨調(diào)喇勋,效果是借鑒于某一項(xiàng)目的效果,我認(rèn)為有必要提取出來改善封裝一下偎行,供以后使用川背。情況大致分為:加載中、無網(wǎng)絡(luò)蛤袒、無數(shù)據(jù)熄云、加載失敗等;

預(yù)覽下效果圖

這里寫圖片描述

我們?cè)趺磳?shí)現(xiàn)這種效果呢

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>

從布局來看妙真,我分了兩個(gè)部分缴允,一個(gè)是加載中,另外一個(gè)是帶有ImagView珍德、文字和按鈕的布局练般,有人看到這,就會(huì)說菱阵,哇靠踢俄,這不是很簡單嗎?根據(jù)不同的情況去設(shè)置Visibility的值就好了啊晴及,沒錯(cuò),原理就是這樣嫡锌。

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;
    }

    /**
     * 加載數(shù)據(jù)為空提示文字
     */
    private String mLoadEmptyText;
    private int mLoadEmptyIcon;
    public XHLoadingView withEmptyIcon(int resId){
        mLoadEmptyIcon = resId;
        return this;
    }

    /**
     * 無網(wǎng)絡(luò)提示
     */
    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;
    }

    /**
     *  設(shè)置加載的狀態(tài)
     * @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;
    }

    /**
     * 改變狀態(tài)
     * @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;
            //數(shù)據(jù)為空
            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;
            //無網(wǎng)絡(luò)
            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;
        }

    }


    /**
     * 后臺(tái)或者本地出現(xiàn)錯(cuò)誤提示
     */
    private String mLoadErrorText;
    private int mErrorIco;

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

    /**
     * 加載空數(shù)據(jù)
     * @param resId
     * @return
     */
    public XHLoadingView withLoadEmptyText(int resId) {
        mLoadEmptyText = getResources().getString(resId);
        return this;
    }

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

    /**
     *  無網(wǎng)絡(luò)時(shí)候加載文字
     * @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 = "重試";

    /**
     * 數(shù)據(jù)為空的Button的文字提示
     * @param text
     * @return
     */
    public XHLoadingView withBtnEmptyText(String text) {
        this.btn_empty_text = text;
        return this;
    }

    /**
     * 加載錯(cuò)誤的Button的文字提示
     * @param text
     * @return
     */
    public XHLoadingView withBtnErrorText(String text) {
        this.btn_error_text = text;
        return this;
    }

    /**
     * 加載錯(cuò)誤的文字提示
     * @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;
    }

    /**
     * 加載無網(wǎng)絡(luò)的Button的文字提示
     * @param text
     * @return
     */
    public XHLoadingView withBtnNoNetText(String text) {
        this.btn_nonet_text = text;
        return this;
    }

    /**
     * 加載沒有網(wǎng)路的文字提示
     * @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;
    }

}

針對(duì)不同的情況作了不同的處理虑稼,然后我們?cè)谛枰腁ctivity調(diào)用。

    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("你擋著信號(hào)啦o( ̄ヘ ̄o)??? 你走").withNoNetIcon(R.drawable.ic_chat_empty).withBtnNoNetText("網(wǎng)弄好了势木,重試")
                    .withLoadingIcon(R.drawable.loading_animation).withLoadingText("加載中...").withOnRetryListener(new XHLoadingView.OnRetryListener() {
                @Override
                public void onRetry() {
                    SnackbarUtil.show(mLoadingView,"已經(jīng)在努力重試了",0);
                }
            }).build();
     }

........

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

 //空數(shù)據(jù)
      mLoadingView.setVisibility(View.VISIBLE);
      mLoadingView.setState(LoadingState.STATE_EMPTY)
 //無網(wǎng)絡(luò)
      mLoadingView.setVisibility(View.VISIBLE);
      mLoadingView.setState(LoadingState.STATE_NO_NET);

 //加載錯(cuò)誤
      mLoadingView.setVisibility(View.VISIBLE);
      mLoadingView.setState(LoadingState.STATE_ERROR);

.......


   }

源碼中注釋詳細(xì)蛛倦,就不用再做過多的解釋了吧!

完整代碼XHLoadingView

作者:xuhao
QQ:504105930
轉(zhuǎn)載請(qǐng)注明出處:http://blog.csdn.net/u011974987/article/details/51455333
希望您能指出寶貴意見啦桌,謝謝溯壶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市甫男,隨后出現(xiàn)的幾起案子且改,更是在濱河造成了極大的恐慌,老刑警劉巖板驳,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件又跛,死亡現(xiàn)場離奇詭異,居然都是意外死亡若治,警方通過查閱死者的電腦和手機(jī)慨蓝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門感混,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人礼烈,你說我怎么就攤上這事弧满。” “怎么了此熬?”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵庭呜,是天一觀的道長。 經(jīng)常有香客問我摹迷,道長疟赊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任峡碉,我火速辦了婚禮近哟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鲫寄。我一直安慰自己吉执,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開白布地来。 她就那樣靜靜地躺著戳玫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪未斑。 梳的紋絲不亂的頭發(fā)上咕宿,一...
    開封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音蜡秽,去河邊找鬼府阀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛芽突,可吹牛的內(nèi)容都是我干的试浙。 我是一名探鬼主播,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼寞蚌,長吁一口氣:“原來是場噩夢啊……” “哼田巴!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挟秤,我...
    開封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤壹哺,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后煞聪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斗躏,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了啄糙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笛臣。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖隧饼,靈堂內(nèi)的尸體忽然破棺而出沈堡,到底是詐尸還是另有隱情,我是刑警寧澤燕雁,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布诞丽,位于F島的核電站,受9級(jí)特大地震影響拐格,放射性物質(zhì)發(fā)生泄漏僧免。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一捏浊、第九天 我趴在偏房一處隱蔽的房頂上張望懂衩。 院中可真熱鬧,春花似錦金踪、人聲如沸浊洞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽法希。三九已至,卻和暖如春靶瘸,著一層夾襖步出監(jiān)牢的瞬間苫亦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來泰國打工怨咪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留著觉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓惊暴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親趁桃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子辽话,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,498評(píng)論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,708評(píng)論 22 664
  • 【作者】喬冠清 【導(dǎo)師】劉艷 袁浩 鄭鵬 【導(dǎo)圖解說】這幅導(dǎo)圖主要說明了藏羚羊跪拜這篇課文的主要內(nèi)容是一開始老獵人...
    喬丹2005閱讀 678評(píng)論 4 3
  • 面授卫病,顧名思義油啤,就是面對(duì)面的授課,主要就是集中在課堂里直接授課學(xué)習(xí)蟀苛。相信大家對(duì)此并不陌生益咬,九年義務(wù)教務(wù)就是這個(gè)模式...
    小范媽閱讀 1,993評(píng)論 0 1