今天我們來研究網絡加載中設計的加載界面
效果圖：
2016-10-18-06mzload.gif
我們先實現實現加載頁面，這里我們繼承FrameLayout ，主要就是在網絡加載和失敗覆蓋在我們需要顯示的頁面上面就ok！
LoadingFramelayout.java
public class LoadingFramelayout extends FrameLayout {
private ImageView mIvLoading;
private Button mBtnReTry;
private RelativeLayout mLoadingView;
private AnimationDrawable mAnimationDrawable;
private OnReloadListener mOnReloadListener;
//構造方法，在我們需要網絡加載頁面是調用，看清楚，第二個傳入的一個布局
public LoadingFramelayout(Context context, @LayoutRes int res) {
super(context);
LayoutInflater mInflater = LayoutInflater.from(context);
mInflater.inflate(res,this);
View rootView = mInflater.inflate(R.layout.fragment_loading_framelayout,this);
mLoadingView = (RelativeLayout) rootView.findViewById(R.id.load_view);
mIvLoading = (ImageView) rootView.findViewById(R.id.iv_loading);
mBtnReTry = (Button) rootView.findViewById(R.id.btn_retry);
mBtnReTry.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnReloadListener.onReload();
}
});
init(context);
}
// 構造方法，在我們需要網絡加載頁面是調用，看清楚，第二個傳入的一個View
public LoadingFramelayout(Context context,View view) {
super(context);
addView(view);
LayoutInflater mInflater = LayoutInflater.from(context);
View rootView = mInflater.inflate(R.layout.fragment_loading_framelayout,this);
mLoadingView = (RelativeLayout) rootView.findViewById(R.id.load_view);
mIvLoading = (ImageView) rootView.findViewById(R.id.iv_loading);
mBtnReTry = (Button) rootView.findViewById(R.id.btn_retry);
mBtnReTry.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnReloadListener.onReload();
}
});
init(context);
}
//這里是一個動畫效果，我們這里采用6張不同加載時候的圖片
private void init(Context context) {
mAnimationDrawable = new AnimationDrawable();
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_01),100);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_02),100);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_03),100);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_04),100);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_05),100);
mAnimationDrawable.addFrame(ContextCompat.getDrawable(context,R.drawable.loading_06),100);
mIvLoading.setImageDrawable(mAnimationDrawable);
mIvLoading.post(new Runnable() {
@Override
public void run() {
mAnimationDrawable.start();
}
});
}
//這一個用于完成加載的調用方法
public void completeLoading(){
stopLoading();
post(new Runnable() {
@Override
public void run() {
mLoadingView.setVisibility(GONE);
}
});
}
//成功和失敗后停著加載，將動畫stop
private void stopLoading() {
((AnimationDrawable)mIvLoading.getDrawable()).stop();
}
//在加載失敗后，點擊加載再次加載的時候調用
public void startLoading(){
post(new Runnable() {
@Override
public void run() {
mBtnReTry.setVisibility(GONE);
mIvLoading.setImageDrawable(mAnimationDrawable);
((AnimationDrawable)mIvLoading.getDrawable()).start();
}
});
}
//加載失敗后，停著動畫，將失敗頁面和重新加載按鈕Visible出來
public void loadingFailed(){
stopLoading();
post(new Runnable() {
@Override
public void run() {
mIvLoading.setImageResource(R.drawable.loading_failed);
mBtnReTry.setVisibility(VISIBLE);
}
});
}
//在重新加載的時候用來回調重新加載的方法
public void setOnReloadListener(OnReloadListener onReloadListener) {
mOnReloadListener = onReloadListener;
}
//實現接口，重新加載用作回調
public interface OnReloadListener {
void onReload();
}
}
MainActivity.java作為一個開始請求網絡的發起頁面
device-2016-10-17-214400.png
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
//監聽按鈕，進入下一頁
findViewById(R.id.btn_load_net).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this,NetWorkActivity.class);
startActivity(intent);
}
});
}
}
NetWorkActivity.java 使我們用來模擬網絡請求成功和失敗
加載成功后的界面
device-2016-10-17-214215.png
public class NetWorkActivity extends Activity {
private LoadingFramelayout mLoadingFramelayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mLoadingFramelayout = newLoadingFramelayout(this,R.layout.activity_net_work);
setContentView(mLoadingFramelayout);
init();
}
private void init() {
simulation2NetworkFialed();
}
//模擬網絡加載失敗
private void simulation2NetworkFialed(){
//開啟一個子線程
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000);//這里我們模擬網絡請求休眠2s
mLoadingFramelayout.loadingFailed();
mLoadingFramelayout.setOnReloadListener(new LoadingFramelayout.OnReloadListener() {
@Override
public void onReload() {
mLoadingFramelayout.startLoading();
simulation2Network();
}
});
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
//網絡請求通暢
private void simulation2Network(){
//開啟一個子線程
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000); //這里模擬再次請求網絡
mLoadingFramelayout.completeLoading();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
}