一开始以为是平板的复杂布局，但如果只有1个列表，可以使用自定义列表适配器来实现。
将此布局想象为具有不同视图的单个列表。所以帖子标题是类型 1 的列表项，照片视图是类型 3，按钮是类型 4。这是您的布局，项目位置用红色数字标记，视图类型用蓝色文本标记。
您应该使用viewType 属性为每个项目创建模型类，因此对于 11 种视图类型，将有 11 个类（或一个基类和几个派生类）。
然后以正确的顺序将这些模型添加到您的适配器，如下所示：
this.add(new ListItemModelBase(ListItemViewTypes.POST_TITLE));
this.add(new PhotoViewItemModel("image1.jpg", "Image 1"));
this.add(new PhotoViewItemModel("image2.jpg", "Image 2"));
this.add(new PhotoViewItemModel("image3.jpg", "Image 3"));
this.add(new ListItemModelBase(ListItemViewTypes.SEE_MORE_PHOTOS_BUTTON));
// other models
然后您可以通过更改模型来更新/添加/删除列表项。例如，如果您单击“查看更多文本”按钮，则调用以下函数：
private void onSeeMoreTextButtonClicked(ListItemModelBase item){
item.setViewType(ListItemViewTypes.POST_TITLE_EXPANDED);
this.notifyDataSetChanged();
}
如果你点击“查看更多照片”按钮，调用这个函数：
private void onSeeMorePhotosButtonClicked(ListItemModelBase item){
int index = this.getPosition(item);
this.remove(item);
this.insert(new PhotoViewItemModel("image4.jpg", "Image 4"), index);
this.insert(new PhotoViewItemModel("image5.jpg", "Image 5"), index + 1);
this.insert(new PhotoViewItemModel("image6.jpg", "Image 6"), index + 2);
}
我认为这个想法很明确。
以下是 4 种视图类型的完整示例：
public class ListItemViewTypes {
public static final int VIEW_TYPES_COUNT = 4;
// Must start from 0
public static final int POST_TITLE = 0;
public static final int POST_TITLE_EXPANDED = 1;
public static final int PHOTO_VIEW = 2;
public static final int SEE_MORE_PHOTOS_BUTTON = 3;
}
public class ListItemModelBase {
private int mViewType;
public ListItemModelBase(int viewType){
mViewType = viewType;
}
public int getViewType() {
return mViewType;
}
public void setViewType(int viewType) {
mViewType = viewType;
}
}
public class PhotoViewItemModel extends ListItemModelBase {
private final String mUrl;
private final String mDescription;
public PhotoViewItemModel(String url, String description) {
super(ListItemViewTypes.PHOTO_VIEW);
mUrl = url;
mDescription = description;
}
public String getUrl() {
return mUrl;
}
public String getDescription() {
return mDescription;
}
}
public class TestListAdapter extends ArrayAdapter<ListItemModelBase> {
private final LayoutInflater mInflater;
public TestListAdapter(Context context) {
super(context, -1);
mInflater = LayoutInflater.from(context);
this.add(new ListItemModelBase(ListItemViewTypes.POST_TITLE));
this.add(new PhotoViewItemModel("image1.jpg", "Image 1"));
this.add(new PhotoViewItemModel("image2.jpg", "Image 2"));
this.add(new PhotoViewItemModel("image3.jpg", "Image 3"));
this.add(new ListItemModelBase(ListItemViewTypes.SEE_MORE_PHOTOS_BUTTON));
}
@Override
public int getViewTypeCount() {
return ListItemViewTypes.VIEW_TYPES_COUNT;
}
@Override
public int getItemViewType(int position) {
// important method so that convertView has a correct type
return this.getItem(position).getViewType();
}
@Override
public boolean isEnabled(int position) {
// enable context menu for photo views, comments and related posts
// or always return false if context menu is not needed at all
if (this.getItem(position).getViewType() == ListItemViewTypes.PHOTO_VIEW) {
return true;
}
return false;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
final ListItemModelBase item = this.getItem(position);
int viewType = item.getViewType();
if (convertView == null) {
// different layouts for different `viewType`
int layoutId = -1;
if (viewType == ListItemViewTypes.POST_TITLE) {
layoutId = R.layout.post_title;
} else if (viewType == ListItemViewTypes.POST_TITLE_EXPANDED) {
layoutId = R.layout.post_title_expanded;
} else if (viewType == ListItemViewTypes.PHOTO_VIEW) {
layoutId = R.layout.photo_view;
} else if (viewType == ListItemViewTypes.SEE_MORE_PHOTOS_BUTTON) {
layoutId = R.layout.more_photos_button;
}
convertView = this.mInflater.inflate(layoutId, null);
}
// update the current view based on data from the current model
if (viewType == ListItemViewTypes.POST_TITLE) {
Button seeMoreTextButton = (Button)convertView.findViewById(R.id.button_see_more_text);
seeMoreTextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onSeeMoreTextButtonClicked(item);
}
});
} else if (viewType == ListItemViewTypes.SEE_MORE_PHOTOS_BUTTON) {
Button seeMorePhotosButton = (Button)convertView.findViewById(R.id.button_see_more_photos);
seeMorePhotosButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onSeeMorePhotosButtonClicked(item);
}
});
} else if (viewType == ListItemViewTypes.PHOTO_VIEW){
PhotoViewItemModel photoViewItem = (PhotoViewItemModel)item;
TextView photoDescriptionText = (TextView)convertView.findViewById(R.id.photo_view_text);
photoDescriptionText.setText(photoViewItem.getDescription());
}
return convertView;
}
private void onSeeMoreTextButtonClicked(ListItemModelBase item){
item.setViewType(ListItemViewTypes.POST_TITLE_EXPANDED);
this.notifyDataSetChanged();
}
private void onSeeMorePhotosButtonClicked(ListItemModelBase item){
int index = this.getPosition(item);
this.remove(item);
this.insert(new PhotoViewItemModel("image4.jpg", "Image 4"), index);
this.insert(new PhotoViewItemModel("image5.jpg", "Image 5"), index + 1);
this.insert(new PhotoViewItemModel("image6.jpg", "Image 6"), index + 2);
}
}
public class MainActivity extends ListActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_main);
this.getListView().setChoiceMode(ListView.CHOICE_MODE_NONE);
this.getListView().setDivider(null);
TestListAdapter adapter = new TestListAdapter(this.getApplicationContext());
this.getListView().setAdapter(adapter);
}
}