Diablo3英雄榜-進度條

Diablo3英雄榜-進度條

目標

• 在發呆的時候添加一個進度條
• 使用第三方控件
• Fragment之間的通訊
• Handler的使用

 

源起

在讀取魔獸英雄榜數據的時候，有時候會有不少個網絡請求，可是網絡的速度永遠是沒法預估的。這個時候有一個進度條是極好的。咱們在前一篇文章中，咱們讀取了用戶信息和用戶的裝備信息。在讀取信息的時候使用了27個Request。這個時候應用有一點點頓。爲了讓頓的時候有更好的體驗，咱們加入了一個進度條。我添加了一個第三方控件，用於在等待。作出來的效果是這個樣子的。

 

這個進度條是在英雄列表界面中，我點擊了一個英雄以後，他開始讀取這個英雄的信息，而後在根據這個英雄讀取26件裝備的信息。在這個過程當中就會隨機顯示一個圖騰，圖騰周圍有一圈綠色的進度條。由於是讀取網絡數據，我沒有精確的定位進度，因此這個綠條走滿以後會切換到下一個圖騰，而後繼續走進度條。

 

第三方控件

Android-square-progressbar

 

在目錄中右鍵->Git Bash

$git clone https://github.com/mrwonderman/android-square-progressbar.git

官方地址：

https://github.com/mrwonderman/android-square-progressbar

 

Fragment顯示進度條

Square_progressbar.xml 代碼以下

<FrameLayout

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:background="#80000000"

xmlns:android="http://schemas.android.com/apk/res/android">

<net.yscs.android.square_progressbar.SquareProgressBar

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/sprogressbar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:paddingTop="20dp"

android:layout_gravity="center">

</net.yscs.android.square_progressbar.SquareProgressBar>

</FrameLayout>

ProgressbarFragment 的代碼以下：

public class ProgressbarFragment extends Fragment {

OnHeadlineSelectedListener mCallback;

SquareProgressBar mSquareProgressBar;

public static final String ARG_POSITION =

"com.example.lijing.diablo3armory.position";

// 用來存放fragment的Activtiy必須實現這個接口

public interface OnHeadlineSelectedListener {

public void onArticleSelected(int position);

}

 

@Override

public void onAttach(Activity activity) {

super.onAttach(activity);

 

// 這是爲了保證Activity容器實現了用以回調的接口。若是沒有，它會拋出一個異常。

try {

mCallback = (OnHeadlineSelectedListener) activity;

} catch (ClassCastException e) {

throw new ClassCastException(activity.toString()

+ " must implement OnHeadlineSelectedListener");

}

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

View v = inflater.inflate(R.layout.square_progressbar, container, false);

mSquareProgressBar = (SquareProgressBar)v.findViewById(R.id.sprogressbar);

Random rm = new Random();

 

mSquareProgressBar.setImage(mThumbIds[rm.nextInt(mThumbIds.length)]);

int position = (int)getArguments().getInt(ARG_POSITION);

mSquareProgressBar.setProgress(position);

return v;

}

// references to our images

private Integer[] mThumbIds2 = {

R.drawable.barcrest, R.drawable.crscrest,

R.drawable.dhcrest, R.drawable.monkcrest,

R.drawable.wdcrest, R.drawable.widcrest

};

private Integer[] mThumbIds = {

R.drawable.photo1, R.drawable.photo2,

R.drawable.photo3, R.drawable.photo4

};

public void updateArticleView(int position) {

mSquareProgressBar.setProgress(position);

}

}

 

這個Fragment具備以下功能：

• 隨機顯示一個圖片
• 根據Argument裏面的數字來設置進度（這個Fragment是能夠跟其餘Fragmeng交互的）

 

如何使用

FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();

transaction.add(R.id.fragmentContainer, fragment, "progress");

transaction.commit();

 

在讀取完後數據後，好比onResponse()裏面，在跳轉到其餘Fragment以前執行下面的代碼

Fragment fragment = getActivity().getSupportFragmentManager().findFragmentByTag("progress");

if(fragment != null)

getActivity().getSupportFragmentManager().beginTransaction().remove(fragment).commit();

 

這樣在點擊後退鍵的時候就不會回到進度條的Fragment裏面了。如今就能夠正常的顯示這個圖片了，可是這樣作只能顯示一個靜態的圖片。咱們須要不停的改變這個控件的進度。由於這個Fragment已經具有了跟其餘Fragment交互的條件。

 

設置進度條的進度

要想使Fragment能夠與其餘的Fragment能夠交互，都必須經過其關聯的Activity，而不會跟對方直接通訊。咱們須要定義一個接口，並在Activity調用該接口。Fragment在onAttach()生命週期方法中獲取到接口方法，以後就能夠經過調用接口中的方法與Activity進行通訊了。

 

在ProgressbarFragment中，咱們作出了以下定義

OnHeadlineSelectedListener mCallback;

……

// 用來存放fragment的Activtiy必須實現這個接口

public interface OnHeadlineSelectedListener {

public void onArticleSelected(int position);

}

…..

@Override

public void onAttach(Activity activity) {

super.onAttach(activity);

 

// 這是爲了保證Activity容器實現了用以回調的接口。若是沒有，它會拋出一個異常。

try {

mCallback = (OnHeadlineSelectedListener) activity;

} catch (ClassCastException e) {

throw new ClassCastException(activity.toString()

+ " must implement OnHeadlineSelectedListener");

}

}

 

而後咱們就能夠

public class MainActivity extends FragmentActivity

implements ProgressbarFragment.OnHeadlineSelectedListener{

….

而後在這個Activity中重寫onArticleSelected()

public void onArticleSelected(int position) {

ProgressbarFragment articleFrag = (ProgressbarFragment)

getSupportFragmentManager().findFragmentById(R.id.squareProgressBar1);

 

if (articleFrag != null) {

articleFrag.updateArticleView(position);

} else {

ProgressbarFragment newFragment = new ProgressbarFragment();

Bundle args = new Bundle();

args.putInt(ProgressbarFragment.ARG_POSITION, position);

newFragment.setArguments(args);

 

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

transaction.replace(R.id.fragmentContainer, newFragment);

transaction.commit();

}

}

這樣以後咱們可使用onArticleSelected(0-100)來設置進度條了。

 

讓進度條不停的動

咱們須要讀取27條信息固然咱們能夠作成在每一個onResponse()裏面根據讀取的數量之一來設置進度。若是這樣作的話還能夠在圖片上顯示數字百分比更好看。個人作法是設置了一個時鐘每次隨機增長一個數字，當數字大於或等於100後自動歸0。這個就涉及到一個時鐘的問題。

 

我採用了handler，首先我先定義了3個變量和一個方法

private Handler handler = new Handler();

private boolean run = true;

private int count = 1;

。。。。。

private Runnable myRunnable= new Runnable() {

public void run() {

Random rm = new Random();

if (run) {

handler.postDelayed(this, 100);

if(count >= 100)

count=1;

else

count += rm.nextInt(50);

onArticleSelected(count);

}

 

}

};

這樣咱們就可使用handler.post(myRunnable);來激活這個handler了。當須要讓handler中止的時候，只須要將run = false就能夠了。