Diablo3英雄榜-进度条

大家好，欢迎来到IT知识分享网。

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就可以了。