### 1.背景
? ?還記得主頁上GridView的內容嗎？對，是分類信息，在這里將要實現音樂分類的顯示播放，在這里使用了v7兼容包下的RecyclerView實現，同時包含兩個布局，一個有圖的一個沒圖的！
? ?如下圖所示：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
### 2.實現步驟
? ? 在這里我們的RecyclerView采用了混排的形式，就是根據不同的位置，設置不同的布局實現，我們在這里有兩個布局一個有圖的View和一個沒圖的View, 對應兩個ViewHolder .
### ? ? （1）兩個Item 布局實現
? ? ? ? ? ? ?1）有圖的Item Layout
?
~~~
<?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="80dp"
android:background="@color/app_color_whrit">
<ImageView
android:id="@+id/mlist_iv_music_songpic"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="@drawable/moren_big" />
<TextView
android:id="@+id/mlist_tv_music_songname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="18dp"
android:layout_toRightOf="@+id/mlist_iv_music_songpic"
android:maxLines="2"
android:text="@string/list_item_song_name"
android:textColor="@color/text_color_whrit"
android:textSize="15sp" />
<TextView
android:id="@+id/mlist_tv_music_singer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="20dp"
android:text="@string/list_item_singer_name"
android:textColor="@color/app_color_zi"
android:textSize="12sp" />
</RelativeLayout>
~~~
??
? ? ? ? ? ? ? 2）沒圖的Item Layout 實現
~~~
<?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/app_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_whrit"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_item_singer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_toRightOf="@+id/list_item_play"
android:text="@string/list_item_singer_name"
android:textColor="@color/app_color_zi"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_item_heart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginRight="20dp"
android:drawablePadding="3dp"
android:drawableRight="@drawable/heart_net"
android:text="@string/list_item_singer_name"
android:textColor="@color/text_color_whrit"
android:textSize="12sp" />
</RelativeLayout>
~~~
### ? ?（2）ViewHolder實現
? ? ? ? ? ? ? 1）有圖的ViewHolder實現
~~~
package cn.labelnet.ui;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import cn.labelnet.event.MusicListRecyclerOnItemClick;
import cn.labelnet.maskmusic.R;
/**
* 有圖 ViewHolder 作者 ：原明卓 時間 ：2015年12月11日 上午10:19:05 描述 ：TODO
*/
public class MusicListBigViewHolder extends ViewHolder implements
OnClickListener {
private ImageView mlist_iv_music_songpic;
private TextView mlist_tv_music_songname, mlist_tv_music_singer;
private MusicListRecyclerOnItemClick itemClick;
public ImageView getMlist_iv_music_songpic() {
return mlist_iv_music_songpic;
}
public TextView getMlist_tv_music_songname() {
return mlist_tv_music_songname;
}
public TextView getMlist_tv_music_singer() {
return mlist_tv_music_singer;
}
public MusicListBigViewHolder(View itemView,MusicListRecyclerOnItemClick itemClick) {
super(itemView);
this.itemClick=itemClick;
initView(itemView);
}
private void initView(View itemView) {
mlist_iv_music_songpic = (ImageView) itemView
.findViewById(R.id.mlist_iv_music_songpic);
mlist_tv_music_songname = (TextView) itemView
.findViewById(R.id.mlist_tv_music_songname);
mlist_tv_music_singer = (TextView) itemView
.findViewById(R.id.mlist_tv_music_singer);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View v) {
itemClick.onRecyclerItemClick(getPosition());
}
}
~~~
? ? ? 2）沒圖的ViewHolder實現
~~~
package cn.labelnet.ui;
import cn.labelnet.event.MusicListRecyclerOnItemClick;
import cn.labelnet.maskmusic.R;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
/**
* 無圖 ViewHolder
* 作者 ：原明卓
* 時間 ：2015年12月11日 上午10:20:25
* 描述 ：TODO
*/
public class MusicListNoViewHolder extends ViewHolder implements OnClickListener {
private TextView list_item_play,tv_item_name,tv_item_singer,tv_item_heart;
private MusicListRecyclerOnItemClick itemClick;
public TextView getList_item_play() {
return list_item_play;
}
public TextView getTv_item_name() {
return tv_item_name;
}
public TextView getTv_item_singer() {
return tv_item_singer;
}
public MusicListNoViewHolder(View itemView,MusicListRecyclerOnItemClick itemClick) {
super(itemView);
this.itemClick=itemClick;
initView(itemView);
}
private void initView(View itemView) {
list_item_play=(TextView) itemView.findViewById(R.id.list_item_play);
tv_item_name=(TextView) itemView.findViewById(R.id.tv_item_name);
tv_item_singer=(TextView) itemView.findViewById(R.id.tv_item_singer);
tv_item_heart=(TextView) itemView.findViewById(R.id.tv_item_heart);
itemView.setOnClickListener(this);
}
public TextView getTv_item_heart() {
return tv_item_heart;
}
@Override
public void onClick(View v) {
itemClick.onRecyclerItemClick(getPosition());
}
}
~~~
### ? ? （3）Recycler.Adapter實現
? ? ? ? ? ? ? ? getItemViewType() 方法 ，返回不同的結果，用來區分不同的item view;
? ? ? ? ? ? ? ?onCreateViewHolder 創建ViewHolder返回子類；
? ? ? ? ? ? ? ?onBindViewHolder 給ViewHolder 綁定數據；
~~~
package cn.labelnet.adapter;
import java.util.List;
import java.util.Random;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import cn.labelnet.event.MusicListRecyclerOnItemClick;
import cn.labelnet.maskmusic.R;
import cn.labelnet.model.MusicModel;
import cn.labelnet.net.MusicAsyncGetUrl;
import cn.labelnet.net.MusicAsyncHandlerGetUrl;
import cn.labelnet.net.MusicRequest;
import cn.labelnet.net.VolleyHttpRequest;
import cn.labelnet.ui.MusicListBigViewHolder;
import cn.labelnet.ui.MusicListNoViewHolder;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageListener;
/**
* MusicListActivity 適配器 作者 ：原明卓 時間 ：2015年12月11日 上午10:33:42 描述 ：TODO
*/
public class MusicTypeListAdapter extends RecyclerView.Adapter<ViewHolder>
implements MusicAsyncGetUrl {
private List<MusicModel> musics = null;
private Random random = new Random();
private int r = 7;
private Context context;
private MusicModel mm = null;
// 布局控制
private MusicListBigViewHolder bigViewHolder = null;
private MusicListNoViewHolder listNoViewHolder = null;
private MusicListRecyclerOnItemClick itemClick;
// 圖片請求
private MusicAsyncHandlerGetUrl musicAsyncHandlerGetUrl;
private ImageListener imageListener = null;
private MusicRequest musicRequest = null;
private ImageView iv_list;
//
private String urlStr = null;
public MusicTypeListAdapter(List<MusicModel> musics, Context context,
MusicListRecyclerOnItemClick itemClick) {
this.musics = musics;
this.context = context;
this.itemClick = itemClick;
// 請求圖片資源
musicAsyncHandlerGetUrl = new MusicAsyncHandlerGetUrl();
musicAsyncHandlerGetUrl.setMusicasyncGetUrl(this);
musicRequest = new MusicRequest();
musicRequest.setMusicAsyncHandler(musicAsyncHandlerGetUrl);
}
@Override
public int getItemViewType(int position) {
return position == 0 ? 0 : 1;
}
@Override
public int getItemCount() {
return musics.size() > 0 ? musics.size() : 0;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup vg, int flag) {
ViewHolder holder = null;
if (flag == 0) {
// 有圖的布局
View itemView = LayoutInflater.from(context).inflate(
R.layout.list_item_music_layout, vg, false);
holder = new MusicListBigViewHolder(itemView, itemClick);
} else {
// 沒圖的布局
View itemView = LayoutInflater.from(context).inflate(
R.layout.list_item_music_no_layout, vg, false);
holder = new MusicListNoViewHolder(itemView, itemClick);
}
return holder;
}
@Override
public void onBindViewHolder(ViewHolder vh, int position) {
mm = musics.get(position);
if (mm != null) {
// 不建議，待優化
if (vh instanceof MusicListNoViewHolder) {
// 無圖適配
listNoViewHolder = (MusicListNoViewHolder) vh;
// Log.d("MaskMusic", "無圖適配");
listNoViewHolder.getList_item_play().setText("" + position);
listNoViewHolder.getTv_item_singer()
.setText(mm.getSingername());
listNoViewHolder.getTv_item_name().setText(mm.getSongname());
int heartNum = (mm.getSongid() + mm.getSingerid()) / 134;
listNoViewHolder.getTv_item_heart().setText("" + heartNum);
} else {
// 有圖適配
bigViewHolder = (MusicListBigViewHolder) vh;
bigViewHolder.getMlist_tv_music_singer().setText(
mm.getSingername());
bigViewHolder.getMlist_tv_music_songname().setText(
mm.getSongname());
if (urlStr == null) {
iv_list = bigViewHolder.getMlist_iv_music_songpic();
imageListener = ImageLoader.getImageListener(iv_list,
R.drawable.moren, R.drawable.moren_big);
musicRequest.setMusicAsyncHandler(musicAsyncHandlerGetUrl);
musicRequest.requestStringData(mm.getSingername() + "");
}
}
}
}
@Override
public void getSongImageURL(String imgUrl) {
urlStr = imgUrl;
VolleyHttpRequest.Image_Loader(imgUrl, imageListener);
}
}
~~~
### 3. 使用
### ? ?（1）綁定 RecyclerView
~~~
list_recycler_view = (RecyclerView) findViewById(R.id.list_recycler_view);
// 設置是否固定長度
list_recycler_view.setHasFixedSize(true);
// 添加樣式
list_recycler_view.setLayoutManager(new LinearLayoutManager(this,
LinearLayoutManager.VERTICAL, false));
// 添加item動畫
list_recycler_view.setItemAnimator(new DefaultItemAnimator());
// 添加item分割線
list_recycler_view.addItemDecoration(new SpacesItemDecoration(2));
// 添加適配器
musicTypeAdapter = new MusicTypeListAdapter(musics, this, this);
list_recycler_view.setAdapter(musicTypeAdapter);
~~~
### ? ? （2）點擊事件回調
? ? ? ? ? ? ?一個接口實現 ：
~~~
/**
* MusicListActivity RecycleView點擊事件
* 作者 ：原明卓
* 時間 ：2015年12月11日 下午5:13:55
* 描述 ：TODO
*/
public interface MusicListRecyclerOnItemClick {
void onRecyclerItemClick(int position);
}
~~~
??
? ? ? ? ? ?具體的步驟是 ：
? ? ? ? ? ? ? ? 在ViewHolder 中實現OnClickListener 點擊事件，在MusicListActivity 中進行回調使用，前面已經有解釋了。
### 4.總結
? ? ?下篇講實現網絡請求數據和實現音樂播放
? ? ? ? ? ?
- 前言
- Android實戰 － 音心音樂播放器 （開啟篇）
- Android實戰 - 音心音樂播發器 （主界面實現）
- Android實戰 - 音心播放器 （Music Service 實現）
- Android實戰 - 音心播放器 （通知實現音樂的播放/暫停/下一曲控制）
- Android實戰 - 音心播發器 （MusicService ,Notification, MainActivity 總結）
- Android實戰 - 音心播放器 （MusicActivity-音樂播放頁面界面實現）
- Android實戰 - 音心播放器 （MusciActivity-專輯圖片獲得，基本控制實現）
- Android實戰 - 音心播放器（MusicActivity - 歌詞實現）
- Android實戰 - 音心播放器 （MusicActivity - 倒計時 ，進度條實現）
- Android實戰 - 音心播放器 （MusicActivity ，MusicNotification，MusicService總結）
- Android實戰 - 音心播放器 （MusicListActivity - 分類信息界面實現）
- Android實戰 - 音心播放器 （MusicListActivity - 音樂播放和MainActivity的一個問題）
- Android實戰 - 音心播放器 （啟動頁與社交分享（ShareSDK））
- Android實戰 - 音心播放器 （優化Service退出，按兩下退出應用實現）
- Android實戰 - 音心播放器 （項目總結，應用打包發布）