Recycler View 和 view Holder Pattern 改变布局的行为

Question

我正在使用 RecyclerView 和 ViewHolder 模式在屏幕上显示数据，这在我的 nexus 5(MarshMallow) 上都很好，但是当我在 中呈现该代码时nexus 4(Lollipop) 它改变了项目的布局并扭曲了它。

这是我对活动的布局和 java 代码的实现

回收查看项目

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
    android:id="@+id/whats_on_item_event_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/whats_on_item_event_header_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/events_icon_black" />

    <TextView
        android:id="@+id/whats_on_item_event_header_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="Sample Event Name Wrapping 2 lines but it might be not"
        android:textColor="@android:color/black"
        android:textSize="18sp" />
</LinearLayout>

<TextView
    android:id="@+id/whats_on_item_event_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_header"
    android:layout_marginTop="10dp"
    android:text="Scottish Pewter 1600-1850"
    android:textColor="@color/Nav_Bar_Blue_Primary_Blue"
    android:textSize="15sp" />

<TextView
    android:id="@+id/whats_on_item_event_desc"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_title"
    android:layout_marginTop="10dp"
    android:text="We will celebrate our 60th anniversary by holding an exhibition of work,"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_start_date_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_desc"
    android:layout_marginTop="10dp"
    android:ems="3"
    android:text="Starts:"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_start_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/whats_on_item_event_start_date_text"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@+id/whats_on_item_event_start_date_text"
    android:text="01/02/2016 19:30:00"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_end_date_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_start_date"
    android:layout_marginTop="10dp"
    android:ems="3"
    android:text="Ends:"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_end_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/whats_on_item_event_end_date_text"
    android:layout_marginTop="10dp"
    android:layout_toRightOf="@+id/whats_on_item_event_end_date_text"
    android:text="01/02/2016 19:30:00"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_address1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_end_date_text"
    android:layout_marginTop="10dp"
    android:text="Milngavie and Bearsden Historical Society"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_address2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_address1"
    android:layout_marginTop="10dp"
    android:text="Milngavie and Bearsden Historical Society"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<TextView
    android:id="@+id/whats_on_item_event_address3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_address2"
    android:layout_marginTop="10dp"
    android:text="Milngavie and Bearsden Historical Society"
    android:textColor="@android:color/black"
    android:textSize="12sp" />

<LinearLayout
    android:id="@+id/whats_on_item_event_icon_wrapper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/whats_on_item_event_address3"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/whats_on_item_event_share_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:src="@drawable/share_icon_blue" />

    <ImageView
        android:id="@+id/whats_on_item_event_add_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:src="@drawable/add_icon_blue" />

    <ImageView
        android:id="@+id/whats_on_item_event_other_business_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:src="@drawable/other_businesses_icon_blue" />

    <ImageView
        android:id="@+id/whats_on_item_event_map_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:src="@drawable/map_icon_blue" />

    <ImageView
        android:id="@+id/whats_on_item_event_fav_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:src="@drawable/favourites_blue_outline" />


   </LinearLayout>
</RelativeLayout>

回收视图

<android.support.v7.widget.RecyclerView
    android:id="@+id/whats_on_activity_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/lister_activity_toolbar"
    android:background="@android:color/transparent"
    android:cacheColorHint="@android:color/transparent"
    android:dividerHeight="2dp" />

RecycleView 适配器

public class WhatsOnRecyclerViewAdapter extends RecyclerView.Adapter<WhatsOnRecyclerViewAdapter.WhatsOnHolder> {
private List<EventModel> eventModels;

public WhatsOnRecyclerViewAdapter(List<EventModel> eventModels) {
    this.eventModels = eventModels;
}


@Override
public int getItemCount() {
    return eventModels.size();
}

@Override
public void onBindViewHolder(WhatsOnHolder whatsOnHolder, int i) {
    EventModel eventModel = eventModels.get(i);
    whatsOnHolder.setData(eventModel);

}

@Override
public WhatsOnHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View itemView = LayoutInflater.
            from(viewGroup.getContext()).
            inflate(R.layout.whats_on_recycler_view_item, viewGroup, false);

    return new WhatsOnHolder(itemView);
}

public static class WhatsOnHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    EventModel eventModel;
    LinearLayout whats_on_item_event_header;
    ImageView whats_on_item_event_header_icon;
    TextView whats_on_item_event_header_title;
    TextView whats_on_item_event_title;
    TextView whats_on_item_event_desc;
    TextView whats_on_item_event_start_date;
    TextView whats_on_item_event_end_date;
    TextView whats_on_item_event_address1;
    TextView whats_on_item_event_address2;
    TextView whats_on_item_event_address3;
    LinearLayout whats_on_item_event_icon_wrapper;
    ImageView whats_on_item_event_share_icon;
    ImageView whats_on_item_event_add_icon;
    ImageView whats_on_item_event_other_business_icon;
    ImageView whats_on_item_event_map_icon;
    ImageView whats_on_item_event_fav_icon;

    public WhatsOnHolder(View v) {
        super(v);
        whats_on_item_event_header = (LinearLayout) v.findViewById(R.id.whats_on_item_event_header);
        whats_on_item_event_header_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_header_icon);
        whats_on_item_event_header_title = (TextView) v.findViewById(R.id.whats_on_item_event_header_title);
        whats_on_item_event_title = (TextView) v.findViewById(R.id.whats_on_item_event_title);
        whats_on_item_event_desc = (TextView) v.findViewById(R.id.whats_on_item_event_desc);
        whats_on_item_event_start_date = (TextView) v.findViewById(R.id.whats_on_item_event_start_date);
        whats_on_item_event_end_date = (TextView) v.findViewById(R.id.whats_on_item_event_end_date);
        whats_on_item_event_address1 = (TextView) v.findViewById(R.id.whats_on_item_event_address1);
        whats_on_item_event_address2 = (TextView) v.findViewById(R.id.whats_on_item_event_address2);
        whats_on_item_event_address3 = (TextView) v.findViewById(R.id.whats_on_item_event_address3);
        whats_on_item_event_icon_wrapper = (LinearLayout) v.findViewById(R.id.whats_on_item_event_icon_wrapper);
        whats_on_item_event_share_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_share_icon);
        whats_on_item_event_add_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_add_icon);
        whats_on_item_event_other_business_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_other_business_icon);
        whats_on_item_event_map_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_map_icon);
        whats_on_item_event_fav_icon = (ImageView) v.findViewById(R.id.whats_on_item_event_fav_icon);

    }

    public void setData(EventModel eventModel) {
        this.eventModel = eventModel;
        whats_on_item_event_header_title.setText(eventModel.getAltListerTitle());
        whats_on_item_event_title.setText(eventModel.getEventTitle());
        whats_on_item_event_desc.setText(eventModel.getDescription());
        whats_on_item_event_start_date.setText(formatDate(eventModel.getStartDate()));
        whats_on_item_event_end_date.setText(formatDate(eventModel.getEndDate()));
        whats_on_item_event_address1.setText(eventModel.getAltAddress1());
        whats_on_item_event_address2.setText(eventModel.getAltAddress2());
        whats_on_item_event_address3.setText("");
        whats_on_item_event_share_icon.setOnClickListener(this);
        whats_on_item_event_add_icon.setOnClickListener(this);
        whats_on_item_event_other_business_icon.setOnClickListener(this);
        whats_on_item_event_map_icon.setOnClickListener(this);
        whats_on_item_event_fav_icon.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.whats_on_item_event_share_icon:
                break;
            case R.id.whats_on_item_event_add_icon:
                break;
            case R.id.whats_on_item_event_other_business_icon:
                break;
            case R.id.whats_on_item_event_map_icon:
                break;
            case R.id.whats_on_item_event_fav_icon:
                break;


        }
    }

    public String formatDate(String date) {
        String returner = date;
        SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
        try {
            Date strDate = sdf.parse(date);
            Calendar calendar = Calendar.getInstance();
            calendar.setTime(strDate);
            Date newDate = calendar.getTime();
            SimpleDateFormat newSimpleDateFormat = new SimpleDateFormat("HH:mm EEE, d MMMM yyyy");

            returner = newSimpleDateFormat.format(newDate);
        } catch (ParseException e) {
                e.printStackTrace();
            }
            return returner;
        }
    }
}

将适配器设置为回收视图

public void setListData(List<EventModel> eventModels) {

/*    ListerListViewAdapter listerListViewAdapter = new ListerListViewAdapter(context, listerModels);
    listView_activity_listview.setAdapter(listerListViewAdapter);*/

    whats_on_activity_recycler_view.setHasFixedSize(true);
    LinearLayoutManager llm = new LinearLayoutManager(context);
    llm.setOrientation(LinearLayoutManager.VERTICAL);
    whats_on_activity_recycler_view.setLayoutManager(llm);
    whats_on_activity_recycler_view.addItemDecoration(new SimpleDividerItemDecoration(context));
    WhatsOnRecyclerViewAdapter ca = new WhatsOnRecyclerViewAdapter(eventModels);
    whats_on_activity_recycler_view.setAdapter(ca);
}

Answer 1

我建议用LinearLayout 和android:orientation="vertical" 代替ImageView 和TextView 更改你最外面的RelativeLayout 你可以使用android:drawableStart="@drawable/events_icon_black"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

<!-- Header -->
<TextView
    android:id="@+id/whats_on_item_event_header_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:drawableLeft="@drawable/events_icon_black"
    android:drawableStart="@drawable/events_icon_black"
    android:text="Sample Event Name Wrapping 2 lines but it might be not"
    android:textColor="@android:color/black"
    android:textSize="18sp" />

<!-- Your other views -->
</LinearLayout>