一步步实现 仿制Android LOL多玩盒子(一) 概览

一、起源

最近比较闲，玩LOL的时候感觉 Android LOL多玩盒子 里面应用到的东西挺多也挺有意思，打算仿照着做一个。抱着练练手的心态，打算只使用原APK中的图片，代码和布局均自己实现。由于该应用涉及的内容较多、个人能力和空闲时间受限，可能部分功能难以实现。项目完成度达到一定程度后会将代码放到 csdn code中去。如果涉及到版权问题，请告知，我将立刻处理。

二、简单的初步分析

1，仿制过程需要使用的工具

抓包工具Fiddler、图片异步加载框架 universal-image-loader、网络请求框架android-async-http、Json解析工具jacksonjson、百度地图SDK、可能会需要使用到html解析工具 htmlparser。

2，主界面布局分析

官方版本界面如下。底部一排工具按钮，控制上半部分功能界面的切换。可能是因为在资讯页面中左右滑动的事件用来切换资讯类型了，各功能界面的之间的切换不支持左右滑动。于是，这一框架的实现比较简单，各功能界面分别放在Fragment中，底部的工具按钮控制各Fragment的显示或隐藏。标题栏的实现方式，不打算使用ActionBar，而是在布局中自己实现。

三、主界面初步实现

主界面Activity

package com.warren.lolbox;

import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;

import com.warren.lolbox.model.BaseContentFragment;
import com.warren.lolbox.model.IListener;

/**
 * 主界面
 * @author warren
 * @date 2014年12月28日
 */
public class MainActivity extends Activity {

	private FootFragment mFootFrag;

	/**
	 * 用于各功能Fragment切换的监听器
	 */
	private IListener<Integer> mListener;
	private BaseContentFragment[] mFragContents = new BaseContentFragment[5];
	private int mCurrentFragIndex = 0;

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

		mListener = new IListener<Integer>() {

			@Override
			public void onCall(Integer t) {
				
				FragmentTransaction tranc = getFragmentManager().beginTransaction();
				tranc.hide(mFragContents[mCurrentFragIndex]);
				
				// 如果功能Fragment之前从未打开过，则创建并添加之；如果打开过，则显示之。
				if (mFragContents[t] == null) {
					switch (t) {
					case 0:
						mFragContents[t] = new ToolFragment();
						break;
					case 1:
						mFragContents[t] = new NewsFragment();
						break;
					case 2:
						mFragContents[t] = new ChatFragment();
						break;
					case 3:
						mFragContents[t] = new ActionFragment();
						break;
					case 4:
						mFragContents[t] = new FindFragment();
						break;

					default:
						break;
					}
					tranc.add(R.id.fl_main_frags, mFragContents[t], mFragContents[t].getName());
				} else {
					tranc.show(mFragContents[t]);
				}
				tranc.commit();
				mCurrentFragIndex = t;
			}
		};

		initFrags();
	}

	/**
	 * 添加初始Fragment
	 */
	private void initFrags() {

		FragmentTransaction tranc = getFragmentManager().beginTransaction();
		mFootFrag = new FootFragment();
		// 设置工具选中监听器回调。
		mFootFrag.setListeners(mListener);
		tranc.add(R.id.ll_main_foot_root, mFootFrag, mFootFrag.getName());

		mFragContents[0] = new ToolFragment();
		tranc.add(R.id.fl_main_frags, mFragContents[0], mFragContents[0].getName());

		tranc.commit();
	}

}

第一个内容Fragment

package com.warren.lolbox;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.warren.lolbox.model.BaseContentFragment;
import com.warren.lolbox.model.SimpleTool;

/**
 * 工具Fragment
 * @author warren
 * @date 2014年12月28日
 */
public class ToolFragment extends BaseContentFragment {

	private static String LOGTAG = "ToolFragment";

	private LinearLayout mLlRoot;
	private GridView mGridTools;
	private AdapterGridTools mAdapter;

	private List<SimpleTool> mTools = new ArrayList<SimpleTool>();

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		mLlRoot = (LinearLayout) inflater.inflate(R.layout.frag_tool, container, false);

		initTools();

		initCtrl();

		return mLlRoot;
	}

	private void initTools() {

		SimpleTool stBMYX = new SimpleTool(R.drawable.tool_menu_hero, R.string.toolmenu_bmyxtest);
		SimpleTool stHero = new SimpleTool(R.drawable.tool_menu_hero, R.string.toolmenu_yx);
		SimpleTool stVideo = new SimpleTool(R.drawable.tool_menu_video, R.string.toolmenu_video);
		SimpleTool stShake = new SimpleTool(R.drawable.tool_menu_shake, R.string.toolmenu_shrink);
		SimpleTool stLottery = new SimpleTool(R.drawable.tool_menu_shake, R.string.toolmenu_lottery);
		SimpleTool stNews = new SimpleTool(R.drawable.tool_menu_news, R.string.toolmenu_boxnews);
		SimpleTool stLiveShow = new SimpleTool(R.drawable.tool_menu_live,
					R.string.toolmenu_liveshow);
		SimpleTool stReflectTest = new SimpleTool(R.drawable.tool_menu_video,
					R.string.toolmenu_reflecttest);
		SimpleTool stBaike = new SimpleTool(R.drawable.tool_menu_baike, R.string.toolmenu_baike);

		mTools.add(stBMYX);
		mTools.add(stHero);
		mTools.add(stVideo);
		mTools.add(stShake);
		mTools.add(stLottery);
		mTools.add(stNews);
		mTools.add(stLiveShow);
		mTools.add(stReflectTest);
		mTools.add(stBaike);
	}

	private void initCtrl() {

		mGridTools = (GridView) mLlRoot.findViewById(R.id.grid_tools);

		mAdapter = new AdapterGridTools(LayoutInflater.from(mLlRoot.getContext()));
		mAdapter.setTools(mTools);
		mGridTools.setAdapter(mAdapter);

		mGridTools.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

			}
		});

	}

	@Override
	public String getName() {
		return "ToolFragment";
	}

	/**
	 * 工具网格的Adapter
	 * @author warren
	 * @date 2014年12月28日
	 */
	class AdapterGridTools extends BaseAdapter {

		private LayoutInflater inflater;
		private List<SimpleTool> lstTools;

		public AdapterGridTools(LayoutInflater inflater) {
			this.inflater = inflater;
		}

		public void setTools(List<SimpleTool> tools) {
			this.lstTools = tools;
		}

		@Override
		public int getCount() {
			return mTools.size();
		}

		@Override
		public Object getItem(int position) {
			return mTools.get(position);
		}

		@Override
		public long getItemId(int position) {
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			ViewHolder holder;
			if (convertView == null) {
				convertView = inflater.inflate(R.layout.frag_tool_grid, parent, false);
				holder = new ViewHolder();
				holder.img = (ImageView) convertView.findViewById(R.id.img);
				holder.tv = (TextView) convertView.findViewById(R.id.tv);
				convertView.setTag(holder);
			} else {
				holder = (ViewHolder) convertView.getTag();
			}
			holder.img.setImageResource(lstTools.get(position).imgResId);
			holder.tv.setText(lstTools.get(position).txtResId);

			// 设置GridView的子项完全填充GridView
			AbsListView.LayoutParams param = new AbsListView.LayoutParams(
						android.view.ViewGroup.LayoutParams.MATCH_PARENT, mGridTools.getHeight()
									/ (lstTools.size() / 3));
			convertView.setLayoutParams(param);
			
			return convertView;
		}

		class ViewHolder {
			ImageView img;
			TextView tv;
		}

	}

}

几个基础类和接口

package com.warren.lolbox.model;

public interface IBaseContentFragment extends IBaseFragment{
}

package com.warren.lolbox.model;

import android.app.Fragment;

/**
 * 内容Fragment的基类
 * @author warren
 * @date 2014年12月28日
 */
public abstract class BaseContentFragment extends Fragment implements IBaseContentFragment {

}

package com.warren.lolbox.model;

public interface IBaseContentFragment extends IBaseFragment{
}

package com.warren.lolbox.model;

public interface IListener<T> {
	public void onCall(T t);
}

package com.warren.lolbox.model;

/**
 * 简单元工具
 * @author warren
 * @date 2014年12月28日
 */
public class SimpleTool {
	
	public int imgResId;
	public int txtResId;
	
	public SimpleTool(int imgResId, int txtResId) {
		super();
		this.imgResId = imgResId;
		this.txtResId = txtResId;
	}
	
}

初步的主界面效果