前回の記事「[Java]RecyclerViewのAdapterをSwipeしてスライドボタンを表示」でRecyclerViewにスライドボタンを表示する実装について投稿しましたが、今回はこの記事内容に＋αとして、ボタンをテキスト表示からイメージアイコンを表示したボタンに変更する実装について記載したいと思います。
完成イメージは以下です。
１つのセルの高さが変わっても一定の大きさでクリップされるような実装にしています。
１．SimpleCallbackHelper.UnderlayButtonをイメージ表示する実装に修正
前回の記事では、UnderlayButtonのコンストラクタに表示文字列を渡していましたが、表示イメージを渡すIFを追加します。
そして、onDrawメソッド内でBitmapで渡された表示イメージを描画する実装をします。
public static class UnderlayButton {
private String text;
private Bitmap imageRes;
private int color;
private int pos;
private RectF clickRegion;
private RecyclerView.ViewHolder viewHolder;
private UnderlayButtonClickListener clickListener;
public UnderlayButton(String text, Bitmap imageRes, int color, RecyclerView.ViewHolder holder, UnderlayButtonClickListener clickListener) {
this.text = text;
this.imageRes = imageRes;
this.color = color;
this.viewHolder = holder;
this.clickListener = clickListener;
}
public void onDraw(Canvas c, RectF rect, int pos){
Paint p = new Paint();
// Draw background
p.setColor(color);
c.drawRect(rect, p);
// Draw Text
p.setColor(Color.WHITE);
p.setTextSize(FONT_SIZE_DP);
Rect r = new Rect();
float cHeight = rect.height();
float cWidth = rect.width();
p.setTextAlign(Paint.Align.LEFT);
p.getTextBounds(text, 0, text.length(), r);
// テキストを表示する場合はここを有効にする
// float x = cWidth / 2f - r.width() / 2f - r.left;
// float y = cHeight / 2f + r.height() / 2f - r.bottom;
// c.drawText(text, rect.left + x, rect.top + y, p);
// 画像を表示する
RectF imgRect;
if (rect.bottom - rect.top > 100) {
float vcenter = rect.top + (rect.bottom - rect.top) / 2;
rect.top = vcenter - 50;
rect.bottom = vcenter + 50;
}
if ((rect.right - rect.left) > (rect.bottom - rect.top)) {
// 横が長くなった場合には高さに合わせてクリップする
float hcenter = rect.left + (rect.right - rect.left) / 2;
float span = (rect.bottom - rect.top) / 2;
imgRect = new RectF(hcenter - span, rect.top, hcenter + span, rect.bottom);
} else {
imgRect = new RectF(rect.left, rect.top, rect.right, rect.bottom);
}
c.drawBitmap(imageRes, null, imgRect, p);
clickRegion = rect;
this.pos = pos;
}
}
２．UnderlayButtonを生成する際にBitmapイメージを渡す
前回の記事では、UnderrayButtonに表示する文字列を渡していましたが、drawableに配置にしたイメージ画像でBitmapイメージを生成して渡すように変更します。
final float scale = getResources().getDisplayMetrics().density;
// スワイプしたチキのボタンの定義
SimpleCallbackHelper mSimpleCallbackHelper = new SimpleCallbackHelper(getContext(), recyclerView, scale, this) {
@SuppressLint("ResourceType")
@Override
public void instantiateUnderlayButton(RecyclerView.ViewHolder viewHolder, List underlayButtons) {
if (viewHolder.itemView.getId() == R.id.row_footer) return;
underlayButtons.add(new SimpleCallbackHelper.UnderlayButton(
getString(R.string.swipe_button_delete),
BitmapFactory.decodeResource(getResources(), R.drawable.ic_delete),
Color.parseColor(getString(R.color.red)),
(RecyclerView.ViewHolder) viewHolder,
(holder, pos) -> {
mToDoViewModel.deleteToDoByTodoId(((ToDoViewHolder)holder).getTodoId());
}
));
underlayButtons.add(new SimpleCallbackHelper.UnderlayButton(
getString(R.string.swipe_button_detail),
BitmapFactory.decodeResource(getResources(), R.drawable.ic_detail),
Color.parseColor(getString(R.color.lightgray)),
(RecyclerView.ViewHolder) viewHolder,
(holder, pos) -> {
Intent intent = new Intent(getContext(), ToDoDetailActivity.class);
intent.putExtra("TODO_ID", ((ToDoViewHolder)holder).getTodoId());
startActivity(intent);
}
));
}
};
以上で冒頭で紹介したようにスライドボタンが画像で表示されるようになると思います。
最後にアプリの紹介となりますが
シンプル操作でやることの管理ができる「記録が残るToDoリスト」
Todoを登録したり、完了した日時を自動で記録して履歴として表示することができる便利な機能が特徴です。
１つのToDoに対して何行でも書けるようなUIとなっていますので、ぜひ利用してみてください。