At first I thought it was a complex layout for tablets, but if it is only 1 list, it can be implemented by using a custom list adapter.
Imagine this layout as a single list with different views. So the post title is a list item of type 1, the photo view is of type 3, the button is of type 4. Here is your layout with item positions marked by red numbers and view types marked by blue text.
You should create model classes for each item with a viewType property, so for 11 view types there will be 11 classes (or a base class and few derived classes).
Then add these models in a proper order to your adapter like this:
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
Then you can update/add/remove list items by changing models. For example, if you click "See more text" button, call the following function:
private void onSeeMoreTextButtonClicked(ListItemModelBase item){
item.setViewType(ListItemViewTypes.POST_TITLE_EXPANDED);
this.notifyDataSetChanged();
}
If you click "See more photos" button, call this function:
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);
}
I think the idea is clear.
Here is a full example for 4 view types:
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);
}
}
