一步步实现 仿制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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mListener = new IListener<Integer>() {@Overridepublic 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>();@Overridepublic 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() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {}});}@Overridepublic 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;}@Overridepublic int getCount() {return mTools.size();}@Overridepublic Object getItem(int position) {return mTools.get(position);}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic 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的子项完全填充GridViewAbsListView.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;}}

初步的主界面效果