最總效果:
代碼分析, 其中遇到的問(wèn)題和坑:
1: 外圍的黑色邊框势决,shape完成 ( bg.xml )
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 填充-->
<solid android:color="#ffffff"></solid>
<!-- 邊框 -->
<stroke android:color="#000000" android:width="2dp"></stroke>
</shape>
上面是4面的邊框阻塑,如果想實(shí)現(xiàn)一個(gè)3面的邊框呢?
可以使用layer-list的圖片疊加功能實(shí)現(xiàn)果复,(bg_header.xml)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 實(shí)現(xiàn)了只有l(wèi)eft陈莽,top,right的3面邊框, 底部不需要 -->
<item>
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="@color/black" />
</shape>
</item>
<item
android:left="2dp"
android:right="2dp"
android:top="2dp">
<!-- 可以完全理解為top就是paddingTop虽抄,bottom就是paddingBottom走搁。就是內(nèi)邊距。
這邊的3面有內(nèi)邊距迈窟,-->
<!-- 在實(shí)際使用中我發(fā)現(xiàn)1dp達(dá)不到顯示效果私植,而2dp正好可以顯示邊框 -->
<shape android:shape="rectangle" >
<solid android:color="@color/mainColor" />
</shape>
</item>
</layer-list>
2: 列表中的下劃線實(shí)現(xiàn)
a: 實(shí)現(xiàn)類DividerItemDecoration.class, 見項(xiàng)目代碼
RecyclerView.ItemDecoration,該類為抽象類车酣,官方目前并沒(méi)有提供默認(rèn)的實(shí)現(xiàn)類曲稼。而DividerItemDecoration.class該類很好的實(shí)現(xiàn)了RecyclerView添加分割線。
b: recyclerview 添加item的下劃線湖员,和方向
mRecyclerView.addItemDecoration(new DividerItemDecoration(
getActivity(), DividerItemDecoration.VERTICAL_LIST));
在該demo的表格中下劃線的方向是垂直方向贫悄,不要弄錯(cuò),已經(jīng)犯過(guò)了娘摔!
c: AppTheme中進(jìn)行下劃線的顏色修改
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
//下劃線的顏色修改
<item name="android:listDivider">@drawable/item_bottom_line</item>
</style>
3: 添加header
思路:adapter提供的getItemViewType()方法窄坦,來(lái)區(qū)分不同的view,加載不同的布局實(shí)現(xiàn)凳寺。
a: getItemViewType()中根據(jù)位置position==0來(lái)判斷是header布局
@Override
public int getItemViewType(int position) {
if(position == 0){
return TYPE_HEADER;
}
if (position == getItemCount()-1){
//最后一個(gè),應(yīng)該加載Footer
return TYPE_FOOTER;
}
return TYPE_NORMAL;
}
b: 通過(guò)判斷headerView和類型是不是正確鸭津,布局header到recyclerView中
@Override
public NormalViewholder onCreateViewHolder(ViewGroup parent, int viewType) {
if(mHeaderView != null && viewType == TYPE_HEADER){
//需要傳入parent,不然item不能居中
// return new NormalViewholder(mHeaderView);
return new NormalViewholder(LayoutInflater.from(mContext).inflate(R.layout.item_first_header, parent, false));
}
//需要傳入parent肠缨,不然item不能居中
View viewNormal = LayoutInflater.from(mContext).inflate(R.layout.item_recycler_grid, parent, false);
return new NormalViewholder(viewNormal);
}
c: 設(shè)置header
private void setAdaperHeader(){
View view = LayoutInflater.from(mActivity).inflate(R.layout.item_first_header,null);
mAdapter.setHeader(view);
}
遇到的坑:
坑1:布局中的文字不能居中
解決方法:布局文件逆趋,需要進(jìn)過(guò)layoutinflater加入到parent才行!!!!!
if(mHeaderView != null && viewType == TYPE_HEADER){
//需要傳入parent,不然item不能居中
// return new NormalViewholder(mHeaderView);
return new NormalViewholder(LayoutInflater.from(mContext).inflate(R.layout.item_first_header, parent, false));
}
坑2:給header設(shè)置畢竟顏色時(shí)晒奕,黑色的邊框給覆蓋了
解決方法:使用layer-list實(shí)現(xiàn)一個(gè)背景父泳,這個(gè)背景是將left般哼,top,right3面的內(nèi)邊距減掉2dp的惠窄,這樣和原來(lái)的布局重疊一下蒸眠,黑色的邊框就出來(lái)了!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape>
<solid android:color="@color/colorAccent"></solid>
</shape>
</item>
</layer-list>
好了杆融,到這里基本弄完了楞卡,有問(wèn)題的歡迎留言,謝謝脾歇!
github地址:https://github.com/George-Soros/RecyclerViewTest