开发平台 ： eclipse , ubuntu ，android  sdk 4.0+ ### 1.背景    主页的设计从上往下依次是滚动广告（ViewFlipper ），分类信息（ GridView ）,热门榜单（ ListView ）,整个界面可以滑动，通过ScrollView 包裹，使得整个页面可滑动。    界面展示 ：                                                                        后发现遇到的问题 ， ListView 滑动和 ScrollView 冲突，后整个布局进行了修改，下面的热门榜单是通过 Fragment 实现，在启动的时候进行数据加载。但是有一个问题，如果上面分类信息（GridView）没有实现的话，下面Fragment加载完成并适配好数据的时候，重新定义Fragment 所要适配的布局的高度，进行重新定义，将会蹦到该Fragment上，故在完成GridView的时候，就不在‘蹦’了，如上图所示，效果还不错。 ### 2.广告栏实现（ViewFlipper ）    ViewFlipper 的实现 ，布局是自定义布局实现的，包括背景，透明层，左右的文字显示;   （1）ViewFlipper 内容布局实现 ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp" > <ImageView android:id="@+id/iv_list_item_flipper" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/moren_big" /> <FrameLayout android:layout_width="match_parent" android:layout_height="40dp" android:layout_alignParentBottom="true" android:background="@color/app_color_borwn" > <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center|left" android:layout_marginLeft="20dp" android:text="@string/tv_main_xindie" android:textColor="@color/text_color_whrit" /> </FrameLayout> <TextView android:id="@+id/tv_list_item_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_margin="10dp" android:text="@string/list_item_flipper_tv" android:textColor="@color/text_color_whrit" /> </RelativeLayout> ~~~    （2）布局实现 ~~~ <ViewFlipper android:id="@+id/main_view_flipper" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="10dp" > </ViewFlipper> ~~~    （3）初始化VIewFlipper实现 ~~~ private void initViewFlipper() { main_view_flipper.setInAnimation(this, R.drawable.main_fliper_in); main_view_flipper.setOutAnimation(this, R.drawable.main_fliper_out); main_view_flipper.setOnTouchListener(new viewFlipperListener()); for (int i = 0; i < 4; i++) { flipperView = LayoutInflater.from(this).inflate( R.layout.list_item_main_flipper, main_scroll_view, false); flipperTv = (TextView) flipperView .findViewById(R.id.tv_list_item_num); flipperIv = (ImageView) flipperView .findViewById(R.id.iv_list_item_flipper); flipperIv.setTag(VolleyHttpPath.RANDOM_IMAGE_URL); flipperTv.setText((i + 1) + "/4"); ~~~ ~~~ //加载网络图片实现Volley 框架实现 imageListener = ImageLoader.getImageListener(flipperIv, R.drawable.moren, R.drawable.moren_big); main_view_flipper.addView(flipperView); VolleyHttpRequest.Image_Loader(VolleyHttpPath.RANDOM_IMAGE_URL + "?" + i, imageListener); } main_view_flipper.setFlipInterval(7000); main_view_flipper.startFlipping(); } ~~~    （4）两个动画         ---fade in ~~~ <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="800" android:fromXDelta="-100%p" android:toXDelta="0" /> </set> ~~~        ---fade out  ~~~ <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <translate android:duration="800" android:fromXDelta="0" android:toXDelta="100%p" /> </set> ~~~     （5）手势控制 ~~~ /** * ViewFlipper 手势控制 * */ private class viewFlipperListener implements OnTouchListener { private int start = 0; @Override public boolean onTouch(View v, MotionEvent event) { gestureDetector.onTouchEvent(event); return true; } } /** * 手势判断 * */ private class gestureDetectorListener extends SimpleOnGestureListener { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if (e1.getX() - e2.getX() < 1000) { main_view_flipper.showPrevious(); } return true; } } ~~~ ### 3. 分类信息 （GridView）     静态数据，非网络请求，使用了最简单的数据适配，并添加点击事件；    （1） 布局实现             1）GridView 布局 ~~~ <GridView android:id="@+id/main_gridview" android:layout_width="356dp" android:layout_height="match_parent" android:layout_marginTop="2dp" android:gravity="center" android:horizontalSpacing="0dp" android:numColumns="4" android:scrollbars="none" android:verticalSpacing="0dp" > </GridView> ~~~                 2）Item布局 ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="1dp" android:background="@color/text_color_whrit" > <ImageView android:id="@+id/iv_item_main_gird" android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:src="@drawable/logo" /> <TextView android:id="@+id/tv_item_main_grid" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:text="@string/list_item_grid_tv" android:textColor="@color/text_color_main" /> </RelativeLayout> ~~~     （2）Adapter实现 ~~~ public class MusicGridAdapter extends BaseAdapter { /** * 主界面 分类信息，适配Adapter */ private SparseArray<String> gridItems; private Context context; private ViewHolder holder = null; private int[] ids = { R.drawable.mingyao, R.drawable.xiaoliang, R.drawable.china, R.drawable.oumei, R.drawable.hongkang, R.drawable.hanguo, R.drawable.riben, R.drawable.yaogun }; public void setGridItems(SparseArray<String> gridItems) { this.gridItems = gridItems; } public void setContext(Context context) { this.context = context; } @Override public int getCount() { return gridItems.size() > 0 ? gridItems.size() : 0; } @Override public String getItem(int position) { // TODO Auto-generated method stub return gridItems.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(context).inflate( R.layout.list_item_main_gridview, parent, false); holder = new ViewHolder(convertView); } holder.tv_item_main_grid.setText(gridItems.get(position) + ""); holder.iv_item_main_gird.setImageResource(ids[position]); return convertView; } private class ViewHolder { /** * ViewHolder */ public ImageView iv_item_main_gird; public TextView tv_item_main_grid; public ViewHolder(View convertView) { iv_item_main_gird = (ImageView) convertView .findViewById(R.id.iv_item_main_gird); tv_item_main_grid = (TextView) convertView .findViewById(R.id.tv_item_main_grid); } } } ~~~       （3）基本业务实现 ~~~ /** * 初始化 数据 */ private void initData() { gridItems.put(0, getString(R.string.music_fenlei_mingyao)); gridItems.put(1, getString(R.string.msuic_fenlei_xiaoliang)); gridItems.put(2, getString(R.string.music_fenlei_china)); gridItems.put(3, getString(R.string.music_fenlei_oumei)); gridItems.put(4, getString(R.string.music_fenlei_hangkang)); gridItems.put(5, getString(R.string.music_fenlei_hanguo)); gridItems.put(6, getString(R.string.music_fenlei_riben)); gridItems.put(7, getString(R.string.music_fenlei_yaogun)); getFenlei(); } public void getFenlei() { maps.put(getString(R.string.music_fenlei_mingyao), 18); maps.put(getString(R.string.msuic_fenlei_xiaoliang), 23); maps.put(getString(R.string.music_fenlei_china), 5); maps.put(getString(R.string.music_fenlei_oumei), 3); maps.put(getString(R.string.music_fenlei_hangkang), 6); maps.put(getString(R.string.music_fenlei_hanguo), 16); maps.put(getString(R.string.music_fenlei_riben), 17); maps.put(getString(R.string.music_fenlei_yaogun), 19); // 热歌 26 } ~~~ ~~~ // GridView初始化分类信息 MusicGridAdapter musicGridAdapter = new MusicGridAdapter(); musicGridAdapter.setContext(this); musicGridAdapter.setGridItems(gridItems); main_gridview.setAdapter(musicGridAdapter); main_gridview.setOnItemClickListener(new main_gridviewListener()); ~~~     （4）点击监听事件 ~~~ /** * GirdView点击事件 */ private class main_gridviewListener implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // showToast("点击了乡村 " + maps.get(gridItems.get(position))); Intent intent = new Intent(MainActivity.this, MusicListActivity.class); intent.putExtra("musictype", maps.get(gridItems.get(position))); startActivity(intent); } } ~~~ ### 4.热门榜单实现    使用Fragment 实现 （非v4 包下的），动态的添加到布局中；    实现思路：在MainActivity.xml 给 Fragment一个空白的布局，等待Fragment的填充；   （1）布局实现       --- mainactivity.xml  中给fragment 预留的布局 ~~~ <RelativeLayout android:id="@+id/main_listview_fragement" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="2dp" /> ~~~         ----  fragment.xml 布局实现 ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ListView android:id="@+id/main_list_view" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </RelativeLayout> ~~~     ---- list_item.xml ~~~ <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@color/text_color_whrit" android:layout_height="70dp" > <TextView android:id="@+id/list_item_play" android:layout_width="30dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_centerInParent="true" android:layout_margin="10dp" android:gravity="center" android:textColor="@color/app_color" android:text="@string/main_item_num" /> <TextView android:id="@+id/tv_item_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="18dp" android:layout_toRightOf="@+id/list_item_play" android:maxLines="2" android:text="@string/list_item_song_name" android:textColor="@color/text_color_black" android:textSize="12sp" /> <TextView android:id="@+id/tv_item_singer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv_item_name" android:layout_toRightOf="@+id/list_item_play" android:text="@string/list_item_singer_name" android:textColor="@color/text_color_main" android:textSize="12sp" /> </RelativeLayout> ~~~      （2）Fragment实现 ~~~ package cn.labelnet.fragment; import java.util.ArrayList; import java.util.List; import cn.labelnet.adapter.MusicListAdapter; import cn.labelnet.event.MainToFragmentRefrsh; import cn.labelnet.maskmusic.R; import cn.labelnet.model.MusicModel; import cn.labelnet.net.MusicAsync; import cn.labelnet.net.MusicAsyncHandler; import cn.labelnet.net.MusicRequest; import android.annotation.SuppressLint; import android.app.Fragment; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.AdapterView.OnItemClickListener; import android.widget.AdapterView; import android.widget.ListView; import android.widget.Toast; public class MainListViewFragment extends Fragment implements MusicAsync { /** * 热歌榜单实现 * MainActivity界面内容填充 */ // 数据请求 private MusicRequest musicRequest = null; private MusicAsyncHandler musicHandler = null; // listview private ListView main_list_view; // adapter private MusicListAdapter musicAdapter; private List<MusicModel> mmsList = new ArrayList<MusicModel>(); // 接口 : 给 Main传递参数 private MainToFragmentRefrsh mainToFragmentRefrsh; // 给Fragment 添加此事件 public void setMainToFragmentRefrsh( MainToFragmentRefrsh mainToFragmentRefrsh) { this.mainToFragmentRefrsh = mainToFragmentRefrsh; } public android.view.View onCreateView(android.view.LayoutInflater inflater, android.view.ViewGroup container, android.os.Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main_listview_layout, container, false); return view; }; @Override public void onViewCreated(View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); // 初始化数据 initData(); // 初始化View initView(view); // 数据请求 musicRequest.requestStringData(5); } /** * 初始化View * * @param view */ private void initView(View view) { main_list_view = (ListView) view.findViewById(R.id.main_list_view); musicAdapter = new MusicListAdapter(mmsList, getActivity()); main_list_view.setAdapter(musicAdapter); main_list_view.setOnItemClickListener(new Main_list_viewListener()); } /** * 初始化数据请求 */ private void initData() { musicHandler = new MusicAsyncHandler(); musicHandler.setMAsync(this); musicRequest = new MusicRequest(); musicRequest.setMusicAsyncHandler(musicHandler); } @Override public void setUserVisibleHint(boolean isVisibleToUser) { if(isVisibleToUser){ musicRequest.requestStringData(5); } } @Override public void onSuccess(List<MusicModel> mms) { // 给MainActivity返回size mainToFragmentRefrsh.changeFragmentHeight(mms.size()); mainToFragmentRefrsh.getMusicModelList(mms); // 请求成功 // String name = mms.get(1).getSingername(); // showToast(name); // Log.i("MaskMusic", name); mmsList.addAll(mms); musicAdapter.notifyDataSetChanged(); } @Override public void onFail(String msg) { // 请求失败 showToast(msg); mainToFragmentRefrsh.onFailListener(); } /** * Toast * * @param msg * 消息 */ private void showToast(String msg) { Toast.makeText(getActivity(), msg, Toast.LENGTH_SHORT).show(); } // listview点击事件 private class Main_list_viewListener implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { mainToFragmentRefrsh.onListviewOnItemClickListener(position); } } } ~~~     （3）Fragment 中的List 适配器实现 ~~~ package cn.labelnet.adapter; import java.util.List; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; import cn.labelnet.maskmusic.R; import cn.labelnet.model.MusicModel; public class MusicListAdapter extends BaseAdapter { /** * 主页 listview 音乐列表 * 在MainListViewFragment中实现，实现初始化界面适配 */ private List<MusicModel> list; private Context context; private ViewHolder holder = null; public MusicListAdapter(List<MusicModel> list, Context content) { this.list = list; this.context = content; } @Override public int getCount() { return list.size() > 0 ? list.size() : 0; } @Override public MusicModel getItem(int position) { return list.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { if (convertView == null) { convertView = LayoutInflater.from(context).inflate( R.layout.list_item_main_layout, parent, false); holder = new ViewHolder(convertView); } MusicModel musicModel = list.get(position); String songName = musicModel.getSongname() != null ? musicModel .getSongname() : "什么东东"; holder.tv_item_name.setText(songName); String singerName = musicModel.getSingername() != null ? musicModel .getSingername() : "未知"; position += 1; String num = position >= 10 ? (position + "") : ("0" + position); holder.list_item_play.setText(num); holder.tv_item_singer.setText(singerName); return convertView; } class ViewHolder { public TextView tv_item_name; public TextView tv_item_singer, list_item_play; public ViewHolder(View convertView) { tv_item_name = (TextView) convertView .findViewById(R.id.tv_item_name); tv_item_singer = (TextView) convertView .findViewById(R.id.tv_item_singer); list_item_play = (TextView) convertView .findViewById(R.id.list_item_play); } } } ~~~     （4）Fragment 回调事件 （重点）             回调图：                                         作用：1）当网络请求成功后，总的条数，从而改变mainactivity.xml中需要填充布局的高度；                        2）回调出所有的数据 models，进行初始化 Service 和通知栏，消除进度条；                        3）点击实现回调，传递item的poistion ，在MainActivity中通过广播通知Service播放这个音乐；                        4）数据请求失败调用，提示和消除进度条； ~~~ public interface MainToFragmentRefrsh { /** * 传条数，改变布局高度 * * @param size */ void changeFragmentHeight(int size); /** * 得到音乐列表 * * @param models */ void getMusicModelList(List<MusicModel> models); /** * ListView点击事件 * * @param postion */ void onListviewOnItemClickListener(int postion); /** * 失败的回调 */ void onFailListener(); } ~~~       （5）改变Fragment填充到的布局高度                 1）工具类 ： 像素px和dp的转化 ~~~ public class ViewUtil { /** * dp转px * @param context * @param dpValue * @return */ public static int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } /** * px转dp * @param context * @param pxValue * @return */ public static int px2dip(Context context, float pxValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (pxValue / scale + 0.5f); } } ~~~             2）实现动态改变布局高度 ~~~ /** * 作用 : 从 Fragment拿过来 总长度,后 设置 Fragment 所在布局的总高度 */ @Override public void changeFragmentHeight(int size) { // 给listView 设置 高度 main_listview_parames.height = ViewUtil.px2dip(this, ViewUtil.dip2px(this, 70) * size); main_listview_fragement.setLayoutParams(main_listview_parames); } ~~~ ### 5.总结    通过主页的实现，可以通过fragment实现复杂的页面布局（这个布局实现单独的网络请求与数据适配），这是目前我可以想到的并可以实现的；在此应用中请求图片使用了Volley 网络请求框架，使用的是自己进行[二次封装](http://blog.csdn.net/LABLENET/article/details/47859613)的。在此之前有人说，可能发生内存泄露问题，经过使用，并没有发生内存泄露问题，请放心使用。  *使用地址 ： [http://blog.csdn.net/LABLENET/article/details/47859613](http://blog.csdn.net/LABLENET/article/details/47859613)*   下篇将进行Service 的实现，在Service 中实现 进行音乐的控制实现；