今天我們來研究網(wǎng)絡(luò)加載中設(shè)計的加載界面
效果圖：
2016-10-18-06mzload.gif
我們先實現(xiàn)實現(xiàn)加載頁面，這里我們繼承FrameLayout 坟岔，主要就是在網(wǎng)絡(luò)加載和失敗覆蓋在我們需要顯示的頁面上面就ok谒兄！
LoadingFramelayout.java
public class LoadingFramelayout extends FrameLayout {
private ImageView mIvLoading;
private Button mBtnReTry;
private RelativeLayout mLoadingView;
private AnimationDrawable mAnimationDrawable;
private OnReloadListener mOnReloadListener;
//構(gòu)造方法，在我們需要網(wǎng)絡(luò)加載頁面是調(diào)用社付，看清楚承疲，第二個傳入的一個布局
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);
}
// 構(gòu)造方法，在我們需要網(wǎng)絡(luò)加載頁面是調(diào)用鸥咖，看清楚燕鸽，第二個傳入的一個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();
}
});
}
//這一個用于完成加載的調(diào)用方法
public void completeLoading(){
stopLoading();
post(new Runnable() {
@Override
public void run() {
mLoadingView.setVisibility(GONE);
}
});
}
//成功和失敗后停著加載啼辣，將動畫stop
private void stopLoading() {
((AnimationDrawable)mIvLoading.getDrawable()).stop();
}
//在加載失敗后啊研，點擊加載再次加載的時候調(diào)用
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);
}
});
}
//在重新加載的時候用來回調(diào)重新加載的方法
public void setOnReloadListener(OnReloadListener onReloadListener) {
mOnReloadListener = onReloadListener;
}
//實現(xiàn)接口党远，重新加載用作回調(diào)
public interface OnReloadListener {
void onReload();
}
}
MainActivity.java作為一個開始請求網(wǎng)絡(luò)的發(fā)起頁面
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() {
//監(jiān)聽按鈕，進(jìn)入下一頁
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 使我們用來模擬網(wǎng)絡(luò)請求成功和失敗
加載成功后的界面
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();
}
//模擬網(wǎng)絡(luò)加載失敗
private void simulation2NetworkFialed(){
//開啟一個子線程
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000);//這里我們模擬網(wǎng)絡(luò)請求休眠2s
mLoadingFramelayout.loadingFailed();
mLoadingFramelayout.setOnReloadListener(new LoadingFramelayout.OnReloadListener() {
@Override
public void onReload() {
mLoadingFramelayout.startLoading();
simulation2Network();
}
});
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
//網(wǎng)絡(luò)請求通暢
private void simulation2Network(){
//開啟一個子線程
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000); //這里模擬再次請求網(wǎng)絡(luò)
mLoadingFramelayout.completeLoading();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
}