先看一下實作的效果圖(CSDN上傳gif圖限制在2M,是以隻能通過壓縮圖檔寬高和幀數來降低圖檔大小,結果導緻圖檔分辨率變低),不過還好可以看清
如果有朋友想知道如何錄制手機螢幕,然後将錄制的video再轉換成gif動圖,請參考下面這篇部落格(Android手機螢幕錄制并轉換成GIF)
言歸正轉,這裡主要完成的功能如下:
1、實作可以水準滑動的清單
2、清單項的點選效果與互動限制(隻可以選擇三個标簽)
寫這篇部落格的原因,是因為之前的實作碰到了一個問題。
之前的實作可以檢視這篇部落格 HorizontalScrollView實作可滑動GridView,并通過與該篇部落格進行對比,來了解RecyclerView的強大,以及RecyclerView在使用上與傳統ListView和GridView的差別
這裡的效果是直接使用RecyclerView來實作的
首先說明一下,這裡我并沒有通過
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview_horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:scrollbars="horizontal" />
這種方式來聲明,而是聲明了一個FramLayout進行占位,然後在代碼中動态添加
<FrameLayout
android:id="@+id/tag_recyclerView_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_above="@id/start_live_btn"
/>
動态添加RecyclerVIew
/**
* 初始化水準滑動标簽清單
* add By Author
*/
private void initHorizontalTagRecycler() {
// 建立一個線性布局管理器
FrameLayout tagFrameLayout = (FrameLayout) findViewById(R.id.tag_recyclerView_container);
horizontalTagRecyclerView = new RecyclerView(this);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
// 設定布局管理器
horizontalTagRecyclerView.setLayoutManager(layoutManager);
//設定間距
int spacingInPixels = getResources().getDimensionPixelSize(R.dimen.dp_5);
horizontalTagRecyclerView.addItemDecoration(new SpaceItemDecoration(spacingInPixels));
//去掉RecyclerView滑到邊界産生的藍色陰影
horizontalTagRecyclerView.setOverScrollMode(View.OVER_SCROLL_NEVER);
tagFrameLayout.addView(horizontalTagRecyclerView);
TLAdapter = new HorizontalTagAdapter(this);
horizontalTagRecyclerView.setAdapter(TLAdapter);
TLAdapter.setOnItemClickLitener(new HorizontalTagAdapter.OnItemClickLitener() {
@Override
public void onItemClick(View view, int position) {
ArrayList<TalentLableItem> showItems = new ArrayList<TalentLableItem>();
showItems = TLAdapter.getItems();
int count = 0;
for (TalentLableItem item : showItems) {
if (item.isSelected()) {
count++;
}
}
if (count < 3) {
TLAdapter.setSeclection(position);
TLAdapter.notifyDataSetChanged();
} else {
if (items.get(position).isSelected()) {
TLAdapter.setSeclection(position);
TLAdapter.notifyDataSetChanged();
} else {
ToastUtils.toast(CreateLiveRoomActivity.this, "最多隻能選擇三個标簽");
}
}
}
});
}
設定item之間的間距使用到了ItemDecoration這個類
RecyclerView沒有可以直接設定間距的屬性,但可以用ItemDecoration來裝飾一個item,是以繼承重寫ItemDecoration就可以實作(上下左右的)間距了
/**
* RecyclerViews support the concept of ItemDecoration: special offsets and drawing around each element.
*/
public class SpaceItemDecoration extends RecyclerView.ItemDecoration{
private int space;
public SpaceItemDecoration(int space) {
this.space = space;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if(parent.getChildPosition(view) != 0)
outRect.left = space;
}
}
我這裡設定的是左邊距,你也可以設定top、bottom、right
再來看一下擴充卡
/**
* Created by Author on 2015/12/2.
*/
public class HorizontalTagAdapter extends RecyclerView.Adapter<HorizontalTagAdapter.ViewHolder> {
private static final String TAG = "HorizontalTagAdapter";
private Context context;
private ArrayList<TalentLableItem> items;
private LayoutInflater mInflater;
private int clickTemp = -1;
public HorizontalTagAdapter(Context context) {
super();
this.context = context;
items = new ArrayList<TalentLableItem>();
mInflater = LayoutInflater.from(context);
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
// 建立一個View,簡單起見直接使用系統提供的布局,就是一個TextView
View view = View.inflate(viewGroup.getContext(), R.layout.talent_label_item, null);
// 建立一個ViewHolder
ViewHolder holder = new ViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(final HorizontalTagAdapter.ViewHolder viewHolder, int i) {
// 綁定資料到ViewHolder上
viewHolder.mTextView.setText("#" + items.get(i).getLabel() + "#");
TalentLableItem TLItem = items.get(i);
if (TLItem.isSelected()) {
viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_selected);
viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color._3e363d));
} else {
viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_normal);
viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color.ffffff));
}
if (clickTemp == i) {
if (TLItem.isSelected()) {
viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_normal);
viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color.ffffff));
TLItem.setSelected(false);
} else {
viewHolder.mTextView.setBackgroundResource(R.drawable.shape_roundrect_label_selected);
viewHolder.mTextView.setTextColor(context.getResources().getColor(R.color._3e363d));
TLItem.setSelected(true);
}
}
if (mOnItemClickLitener != null) {
viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int pos = viewHolder.getLayoutPosition();
mOnItemClickLitener.onItemClick(viewHolder.itemView, pos);
}
});
}
}
@Override
public int getItemCount() {
return items.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mTextView;
public ViewHolder(View itemView) {
super(itemView);
mTextView = (TextView) itemView.findViewById(R.id.label);
}
}
public void setShowItems(ArrayList<TalentLableItem> items) {
this.items = items;
notifyDataSetChanged();
}
public ArrayList<TalentLableItem> getItems() {
return items;
}
public void setSeclection(int position) {
clickTemp = position;
}
public interface OnItemClickLitener {
void onItemClick(View view, int position);
}
private OnItemClickLitener mOnItemClickLitener;
public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
this.mOnItemClickLitener = mOnItemClickLitener;
}
}
RecyclerView在進行視圖展示,資料綁定,事件響應方面與普通的ListView和GridVIew略有差別,但是基本方式差不多