Add alternative wikivoyage article card design

This commit is contained in:
Alex Sytnyk 2018-04-11 18:24:43 +03:00
parent 66f4c0601e
commit 9f9c1d5762
5 changed files with 198 additions and 2 deletions

View file

@ -0,0 +1,159 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/wikivoyage_card_bg_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:orientation="vertical"
android:paddingBottom="@dimen/bottom_sheet_content_padding_small"
android:paddingTop="@dimen/content_padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/content_padding"
android:layout_marginRight="@dimen/content_padding">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/context_menu_padding_margin_medium"
android:ellipsize="end"
android:maxLines="1"
android:textAppearance="@style/TextAppearance.ListItemTitle"
tools:text="London"/>
<TextView
android:id="@+id/part_of"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha=".5"
android:ellipsize="end"
android:maxLines="1"
android:textAppearance="@style/TextAppearance.ContextMenuSubtitle"
tools:text="England • United Kingdom"/>
</LinearLayout>
<ImageView
android:id="@+id/icon"
android:layout_width="@dimen/wikivoyage_article_card_icon_size"
android:layout_height="@dimen/wikivoyage_article_card_alternative_icon_height"
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/content_padding"
android:layout_marginStart="@dimen/content_padding"
android:visibility="gone"
tools:ignore="ContentDescription"
tools:src="@drawable/ic_empty_state_marker_history_night"
tools:visibility="visible"/>
</LinearLayout>
<TextView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/context_menu_padding_margin_tiny"
android:layout_marginLeft="@dimen/content_padding"
android:layout_marginRight="@dimen/content_padding"
android:layout_marginTop="@dimen/bottom_sheet_content_padding_small"
android:ellipsize="end"
android:maxLines="3"
android:textAppearance="@style/TextAppearance.ContextMenuSubtitle"
tools:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/bottom_sheet_content_padding_small"
android:layout_marginStart="@dimen/bottom_sheet_content_padding_small"
android:background="?attr/selectableItemBackgroundBorderless"
android:drawablePadding="@dimen/bottom_sheet_content_padding_small"
android:ellipsize="end"
android:gravity="center_vertical"
android:letterSpacing="@dimen/text_button_letter_spacing"
android:maxLines="1"
android:paddingBottom="@dimen/context_menu_padding_margin_tiny"
android:paddingLeft="@dimen/bottom_sheet_content_padding_small"
android:paddingRight="@dimen/bottom_sheet_content_padding_small"
android:paddingTop="@dimen/context_menu_padding_margin_tiny"
android:textColor="?attr/wikivoyage_active_color"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
tools:drawableLeft="@drawable/ic_action_read_article"
tools:drawableTint="?attr/wikivoyage_active_color"
tools:ignore="UnusedAttribute"
tools:text="Read"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/bottom_sheet_content_padding_small"
android:layout_marginRight="@dimen/bottom_sheet_content_padding_small"
android:background="?attr/selectableItemBackgroundBorderless"
android:drawablePadding="@dimen/bottom_sheet_content_padding_small"
android:ellipsize="end"
android:gravity="center_vertical"
android:letterSpacing="@dimen/text_button_letter_spacing"
android:maxLines="1"
android:paddingBottom="@dimen/context_menu_padding_margin_tiny"
android:paddingLeft="@dimen/bottom_sheet_content_padding_small"
android:paddingRight="@dimen/bottom_sheet_content_padding_small"
android:paddingTop="@dimen/context_menu_padding_margin_tiny"
android:textColor="?attr/wikivoyage_active_color"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
tools:drawableRight="@drawable/ic_action_read_later_fill"
tools:drawableTint="?attr/wikivoyage_active_color"
tools:ignore="UnusedAttribute"
tools:text="Delete"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<View
android:id="@+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?attr/wikivoyage_card_divider_color"/>
<include
android:id="@+id/shadow"
layout="@layout/card_bottom_divider"
android:visibility="gone"
tools:visibility="visible"/>
</LinearLayout>

View file

@ -196,4 +196,5 @@
<dimen name="wikivoyage_search_list_header_height">54dp</dimen> <dimen name="wikivoyage_search_list_header_height">54dp</dimen>
<dimen name="wikivoyage_article_card_icon_size">120dp</dimen> <dimen name="wikivoyage_article_card_icon_size">120dp</dimen>
<dimen name="wikivoyage_article_card_alternative_icon_height">60dp</dimen>
</resources> </resources>

View file

@ -270,6 +270,7 @@
<dimen name="wikivoyage_search_list_header_height">36dp</dimen> <dimen name="wikivoyage_search_list_header_height">36dp</dimen>
<dimen name="wikivoyage_article_card_icon_size">80dp</dimen> <dimen name="wikivoyage_article_card_icon_size">80dp</dimen>
<dimen name="wikivoyage_article_card_alternative_icon_height">40dp</dimen>
<dimen name="text_button_letter_spacing" format="float">0.01</dimen> <dimen name="text_button_letter_spacing" format="float">0.01</dimen>
</resources> </resources>

View file

@ -0,0 +1,30 @@
package net.osmand.plus.widgets.tools;
import android.graphics.Bitmap;
import com.squareup.picasso.Transformation;
public class CropRectTransformation implements Transformation {
private static final String KEY = "CropRectTransformation";
@Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size * 2) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap bitmap = Bitmap.createBitmap(source, x, y, size * 2, size);
if (bitmap != source) {
source.recycle();
}
return bitmap;
}
@Override
public String key() {
return KEY;
}
}

View file

@ -19,6 +19,7 @@ import net.osmand.plus.IconsCache;
import net.osmand.plus.OsmandApplication; import net.osmand.plus.OsmandApplication;
import net.osmand.plus.R; import net.osmand.plus.R;
import net.osmand.plus.widgets.tools.CropCircleTransformation; import net.osmand.plus.widgets.tools.CropCircleTransformation;
import net.osmand.plus.widgets.tools.CropRectTransformation;
import net.osmand.plus.wikivoyage.data.WikivoyageArticle; import net.osmand.plus.wikivoyage.data.WikivoyageArticle;
import net.osmand.plus.wikivoyage.data.WikivoyageLocalDataHelper; import net.osmand.plus.wikivoyage.data.WikivoyageLocalDataHelper;
@ -30,6 +31,8 @@ public class SavedArticlesRvAdapter extends RecyclerView.Adapter<RecyclerView.Vi
private static final int HEADER_TYPE = 0; private static final int HEADER_TYPE = 0;
private static final int ITEM_TYPE = 1; private static final int ITEM_TYPE = 1;
private static final boolean USE_ALTERNATIVE_CARD = true;
private final OsmandApplication app; private final OsmandApplication app;
private final List<Object> items = new ArrayList<>(); private final List<Object> items = new ArrayList<>();
@ -56,7 +59,9 @@ public class SavedArticlesRvAdapter extends RecyclerView.Adapter<RecyclerView.Vi
@Override @Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
boolean header = viewType == HEADER_TYPE; boolean header = viewType == HEADER_TYPE;
int layoutId = header ? R.layout.wikivoyage_list_header : R.layout.wikivoyage_article_card; int layoutId = header
? R.layout.wikivoyage_list_header
: USE_ALTERNATIVE_CARD ? R.layout.wikivoyage_article_card_alternative : R.layout.wikivoyage_article_card;
View itemView = LayoutInflater.from(parent.getContext()).inflate(layoutId, parent, false); View itemView = LayoutInflater.from(parent.getContext()).inflate(layoutId, parent, false);
return header ? new HeaderVH(itemView) : new ItemVH(itemView); return header ? new HeaderVH(itemView) : new ItemVH(itemView);
} }
@ -74,7 +79,7 @@ public class SavedArticlesRvAdapter extends RecyclerView.Adapter<RecyclerView.Vi
Picasso.get() Picasso.get()
.load(WikivoyageArticle.getImageUrl(article.getImageTitle(), false)) .load(WikivoyageArticle.getImageUrl(article.getImageTitle(), false))
.transform(new CropCircleTransformation()) .transform(USE_ALTERNATIVE_CARD ? new CropRectTransformation() : new CropCircleTransformation())
.into(holder.icon, new Callback() { .into(holder.icon, new Callback() {
@Override @Override
public void onSuccess() { public void onSuccess() {