[Android] 快速實現一個通用EmptyView

好的APP應當具備良好的交互, 最好能貼心的滿足用戶的需求. 而人性化的提醒就是其中之一. 某些APP中經常會看到這樣的場景, 當加載內容失敗, 或者獲取內容失敗時, 界面會變成一個可與用後交互的場景. 允許用戶點擊屏幕或者界面中某個按鈕, 嘗試重新獲取內容或者檢測網絡連接等等. Android的ListView中有類似setEmptyView(...) 的方法, 當列表中沒有數據, 就會顯示該 emptyView. 但並非所有的View都有這樣的接口方法, 為此我們可以自己去實現可通用的emptyView.

 

這裡通過簡單的例子提供一種思路, 當然不是唯一的. 我們可以根據自己的想法實現各種各樣的emptyView本質還是調用view.setVisibility(...).

效果圖如下, 看起來好簡單吧!

 

So 直接上代碼喇!

將EmptyView封裝在某個常用布局文件中, 比如RelativeLayout, 當然也可以是LinearLayout等等.

 

public class CustomRelativeLayout extends RelativeLayout{
    public static interface RetryListener{
        void retry();
    }

    private ProgressBar progressBar = null;
    private Button btn_refresh = null;
    private TextView tv_tip = null;
    private boolean isNormal = true;
    private RetryListener retryListener = null;

    private final static int tvTipId = 0x1001;


    public CustomRelativeLayout(Context context) {
        this(context, null);
    }


    public CustomRelativeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomRelativeLayout(Context context, AttributeSet attrs,
                                int defStyle) {
        super(context, attrs, defStyle);
    }


    /**
     * 設置加載界面
     */
    protected void setInProgress()
    {
        if(progressBar == null)
        {
            int size = (int) TypedValue
                    .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 45, getResources().getDisplayMetrics());
            progressBar = new ProgressBar(getContext());
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(size,size);
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            progressBar.setLayoutParams(lp);
            addView(progressBar);
        }

        if(getChildCount() > 0)
        {
            int childCount = getChildCount();
            if(childCount >0)
            {
                for(int i=(childCount-1); i>=0; i--)
                {
                    getChildAt(i).setVisibility(View.GONE);
                }
            }
        }

        if(btn_refresh != null)
            btn_refresh.setVisibility(View.GONE);
        if(tv_tip != null)
            tv_tip.setVisibility(View.GONE);

        progressBar.setVisibility(View.VISIBLE);
    }

    /**
     * 顯示加載失敗界面,隱藏所有正常的View元素
     */
    protected void setChildrenGone()
    {
        if(btn_refresh == null)
        {
            btn_refresh = new Button(getContext());
            tv_tip = new TextView(getContext());
            tv_tip.setText(網絡連接失敗);
            tv_tip.setGravity(Gravity.CENTER);
            tv_tip.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            btn_refresh.setText(刷新);

            btn_refresh.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(retryListener != null)
                    {
                        retryListener.retry();
                    }
                    else
                    {
                        Toast.makeText(getContext(), 暫無數據, Toast.LENGTH_SHORT).show();
                    }
                }
            });
            int btnWidth = (int)TypedValue
                    .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 80, getResources().getDisplayMetrics());
            RelativeLayout.LayoutParams lp
                    = new RelativeLayout.LayoutParams(btnWidth, LayoutParams.WRAP_CONTENT);
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            lp.setMargins(0, 10, 0, 0);
            btn_refresh.setLayoutParams(lp);
            btn_refresh.setId(tvTipId);
            btn_refresh.setVisibility(View.GONE);
            addView(btn_refresh);

            RelativeLayout.LayoutParams lp_tv
                    = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
            lp_tv.addRule(RelativeLayout.ABOVE, tvTipId);
            tv_tip.setLayoutParams(lp_tv);
            addView(tv_tip);
        }

        if(getChildCount() > 0)
        {
            int childCount = getChildCount();
            if(childCount >0)
            {
                for(int i=(childCount-1); i>=0; i--)
                {
                    getChildAt(i).setVisibility(View.GONE);
                }
            }
        }

        if(progressBar != null)
            progressBar.setVisibility(View.GONE);

        isNormal = false;
        btn_refresh.setVisibility(View.VISIBLE);
        tv_tip.setVisibility(View.VISIBLE);
    }

    /**
     * 顯示正常View元素
     */
    protected void setChildrenVisible()
    {
        if(getChildCount() > 0)
        {
            int childCount = getChildCount();
            if(childCount >0)
            {
                for(int i=(childCount-1); i>=0; i--)
                {
                    getChildAt(i).setVisibility(View.VISIBLE);
                }
            }
            if(progressBar != null)
                progressBar.setVisibility(View.GONE);

            if(btn_refresh != null)
                btn_refresh.setVisibility(View.GONE);

            if(tv_tip != null)
                tv_tip.setVisibility(View.GONE);

            isNormal = true;
        }
    }

    protected boolean isNormalView()
    {
        return isNormal;
    }

    public void setRetryListener(RetryListener listener)
    {
        this.retryListener = listener;
    }


}

提供一個RetryListener接口, 作為點擊 刷新 按鈕後的事件.

 

 

然後模擬加載中並且加載失敗的界面, 點擊按鈕後遲延3秒, 假設獲取數據成功, 更新view後顯示正常的界面.

 

public class MainActivity extends Activity {
    private Button btn_start = null;
    private static CustomRelativeLayout cuLayout = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }


    private static Handler mHandler = new Handler()
    {
       @Override
        public void handleMessage(Message msg)
       {
           if(msg.what == 0x1)
           {
               cuLayout.setChildrenVisible();
           }
           else if(msg.what == 0x2)
           {
               cuLayout.setChildrenGone();
           }
           super.handleMessage(msg);
       }
    };

    private void init()
    {
        btn_start = (Button) findViewById(R.id.btn_start);
        cuLayout = (CustomRelativeLayout) findViewById(R.id.container);

        cuLayout.setRetryListener(new CustomRelativeLayout.RetryListener(){
            public void retry()
            {
                cuLayout.setInProgress();
                mHandler.sendEmptyMessageDelayed(0x1,3000);
            }
        });


        btn_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cuLayout.setChildrenGone();
            }
        });

        cuLayout.setInProgress();
        mHandler.sendEmptyMessageDelayed(0x2,2000);
    }




}

布局文件:

 

 

就是這麼簡單喇, 相信看完後也能定制出自己喜愛的界面哦! 另外, 作為EmptyView和加載view, 並不推薦使用復雜的元素. 最好簡單而好看的View元素就夠了. 因為僅僅是充當輔助的作用, 輕量化, 幾乎不占內存是前提.