先说下效果,整个首页是一个RecyclerView实现的,我把它分为头部分,和title部分,和内容部分,都是通过getItemViewType这个方法来实现,至于脚布局相信添加完头布局之后都非常简单了
上代码:activity_main的xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
LinearLayout>
adapter 数据自己传吧,但是注意头布局和title都是占着索引的
package thinklock.stringtech.cn.thinklock.adapter;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import thinklock.stringtech.cn.thinklock.R;
import static android.view.View.inflate;
/**
* Created by chen on 2017 首页 多条目
*/
public class HomeRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements View.OnClickListener {
private String[] contents;//标题数据加内容数据的数组
private Integer[] imgs;//内容数据的图片
public HomeRecyclerViewAdapter(String[] contents, Integer[] imgs) {
this.contents = contents;
this.imgs = imgs;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == 1) {//title
View title = inflate(parent.getContext(), R.layout.home_item_title, null);
return new VH1(title);
} else if (viewType == 0) {//头布局
View head = inflate(parent.getContext(), R.layout.activity_home_head, null);
return new VH3(head);
} else {//内容布局
View content = LayoutInflater.from(parent.getContext()).inflate(R.layout.home_item_content, null, false);
return new VH2(content);
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder myHolder, final int position) {
int itemViewType = getItemViewType(position);
if (itemViewType == 1) {
//標題佈局
((VH1) myHolder).mTvTitle.setText(" " + contents[position]);
} else if (itemViewType == 0) {
//头布局
((VH3) myHolder).ivUserInfo.setOnClickListener(this);
((VH3) myHolder).ivBack.setOnClickListener(this);
} else {
//内容布局
((VH2) myHolder).mTvContent.setText(contents[position]);
((VH2) myHolder).mIvImg.setImageResource(imgs[position]);//这里的数据自己传吧,但是注意头布局和title都是占着索引的
((VH2) myHolder).layoutContent.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnItemClick != null) {
mOnItemClick.onClick(position);
}
}
});
}
}
@Override
public int getItemViewType(int position) {
if (position == 0) {
return 0;//头布局
} else if (position == 1 || position == 5) {
return 1;//标题布局
} else {
return 2;//内容布局
}
}
@Override
public int getItemCount() {
return contents.length;
}
/**
* 头布局点击事件接口回调出去 让外部处理
* @param v
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ivBack:
if (mOnItemClick != null) {
mOnItemClick.headOnClick(R.id.ivBack);
}
break;
case R.id.ivUserInfo:
if (mOnItemClick != null) {
mOnItemClick.headOnClick(R.id.ivUserInfo);
}
break;
}
}
class VH1 extends RecyclerView.ViewHolder {
private TextView mTvTitle;
public VH1(View itemView) {
super(itemView);
mTvTitle = (TextView) itemView.findViewById(R.id.tvTitle);
}
}
class VH2 extends RecyclerView.ViewHolder {
private TextView mTvContent;
private ImageView mIvImg;
private LinearLayout layoutContent;
public VH2(View itemView) {
super(itemView);
mTvContent = (TextView) itemView.findViewById(R.id.tvContent);
mIvImg = (ImageView) itemView.findViewById(R.id.ivImg);
layoutContent = (LinearLayout) itemView.findViewById(R.id.layoutContent);
}
}
class VH3 extends RecyclerView.ViewHolder {
private ImageView ivBack;
private ImageView ivUserInfo;
public VH3(View itemView) {
super(itemView);
ivBack = (ImageView) itemView.findViewById(R.id.ivBack);
ivUserInfo = (ImageView) itemView.findViewById(R.id.ivUserInfo);
}
}
/**
* 接口回调
*/
public interface OnItemClick {
//内容的点击事件回调方法
void onClick(int position);
//头布局的点击事件回调方法
void headOnClick(int id);
}
private OnItemClick mOnItemClick;
public void onItemClick(OnItemClick onItemClick) {
mOnItemClick = onItemClick;
}
}
head的xml activity_home_head
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@mipmap/main_bg"
android:orientation="vertical"
android:layout_height="200dp">
LinearLayout>
title的xml home_item_title
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:singleLine="true"
android:padding="10dp"
android:id="@+id/tvTitle"
android:textColor="#000000"
android:layout_width="match_parent"
android:background="#FFF2F1F0"
android:text="---"
android:textSize="17sp"
android:layout_height="wrap_content"/>
LinearLayout>
内容的xml home_item_content
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/layoutContent"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:background="@mipmap/login_user_icon"
android:id="@+id/ivImg"
android:layout_width="45dp"
android:layout_height="45dp"/>
<TextView
android:singleLine="true"
android:id="@+id/tvContent"
android:layout_margin="5dp"
android:textColor="#000000"
android:layout_width="wrap_content"
android:text="测试"
android:layout_height="wrap_content"/>
LinearLayout>
最后设置一下adapter即可
private void initRecyclerView() {
/**
* 使用RecyclerView的网格布局加多条目展示
*/
final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3);//显示几列自己修改即可
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
//获取我们在adapter中复写的type
int type = mRecyclerView.getAdapter().getItemViewType(position);
if (type == 1) {//是title 需要占用全部
return gridLayoutManager.getSpanCount();//也就是上面的3 占用全部
} else if (type == 0) {//是头布局 需要占用全部
return gridLayoutManager.getSpanCount();//也就是上面的3 占用全部
} else {//内容布局
return 1;//占用3/1
}
}
});
mRecyclerView.setLayoutManager(gridLayoutManager);
if (mAdapter == null) {
//数据自己传吧
mAdapter = new HomeRecyclerViewAdapter(Contants.mStateContent, Contants.mStateImages);
mRecyclerView.setAdapter(mAdapter);
}
//通过接口回调处理recycleview的item点击事件
mAdapter.onItemClick(new HomeRecyclerViewAdapter.OnItemClick() {
//内容的点击事件
@Override
public void onClick(int position) {
//注意title和头布局也是占着position的。。。
initClick(position);
}
/**
* 头部布局的点击事件
* @param id
*/
@Override
public void headOnClick(int id) {
//如果你的头布局上面有点击事件,比如用户的头像或者设置什么的,可以在这里处理,没有则不处理
}
});
}