リスト表示の操作では当たり前になったリストの行に対してスワイプするとボタンが表示される実装について書いていきます。
iPhoneアプリでは比較的簡単に実装が出来るのですが、Androidアプリではそれなりに実装が必要でした。
画面イメージは以下です。左にスワイプするとメニューが表示されます。
→ 
独自で用意する実装の前に、通常、RecyclerViewにアタッチするItemTouchHelperは以下のように実装します。
RecyclerView.ItemDecoration itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST);
recyclerView.addItemDecoration(itemDecoration);
ItemTouchHelper itemDecor = new ItemTouchHelper(
new ItemTouchHelper.SimpleCallback(ItemTouchHelper.UP | ItemTouchHelper.DOWN,
ItemTouchHelper.LEFT) {
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
// 上下方向への移動処理をここに実装
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
// 左方向へのスワイプ時の処理を実装
}
itemDecor.attachToRecyclerView(recyclerView);
上記のようにSimpleCallbackをnewする際に、onMoveとonSwipedをOverrideします。
ですが、この実装の状態で左方向へスワイプを行うと、行ごと無くなってしまう動作になります
※おそらくデフォルトの動作はスワイプで行を削除するような動作です。
１．ItemTouchHelper.SimpleCallbackを継承したクラスを実装する
なので、SimpleCallbackクラスを継承して独自クラスを定義します。
public abstract class SimpleCallbackHelper extends ItemTouchHelper.SimpleCallback {
private static final int BUTTON_WIDTH = 60;
private static final int FONT_SIZE = 12;
private static int BUTTON_WIDTH_DP;
private static int FONT_SIZE_DP;
private RecyclerView recyclerView;
private List<UnderlayButton> buttons;
private GestureDetector gestureDetector;
private int swipedPos = -1;
private float swipeThreshold = 0.5f;
private Map<Integer, List<UnderlayButton>> buttonsBuffer;
private Queue<Integer> recoverQueue;
private SimpleCallbackListener simpleCallbackListener;
private GestureDetector.SimpleOnGestureListener gestureListener = new GestureDetector.SimpleOnGestureListener(){
@Override
public boolean onSingleTapConfirmed(MotionEvent e) {
for (UnderlayButton button : buttons){
if(button.onClick(e.getX(), e.getY()))
break;
}
return true;
}
};
private View.OnTouchListener onTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent e) {
if (swipedPos < 0) return false;
Point point = new Point((int) e.getRawX(), (int) e.getRawY());
RecyclerView.ViewHolder swipedViewHolder = recyclerView.findViewHolderForAdapterPosition(swipedPos);
if (swipedViewHolder == null) return false;
View swipedItem = swipedViewHolder.itemView;
Rect rect = new Rect();
swipedItem.getGlobalVisibleRect(rect);
if (e.getAction() == MotionEvent.ACTION_DOWN || e.getAction() == MotionEvent.ACTION_UP ||e.getAction() == MotionEvent.ACTION_MOVE) {
if (rect.top < point.y && rect.bottom > point.y)
gestureDetector.onTouchEvent(e);
else {
recoverQueue.add(swipedPos);
swipedPos = -1;
recoverSwipedItem();
}
}
return false;
}
};
public SimpleCallbackHelper(Context context, RecyclerView recyclerView, final float scale, SimpleCallbackListener listener) {
super(ItemTouchHelper.UP | ItemTouchHelper.DOWN, ItemTouchHelper.LEFT);
BUTTON_WIDTH_DP = (int) (BUTTON_WIDTH * scale);
FONT_SIZE_DP = (int) (FONT_SIZE * scale);
this.recyclerView = recyclerView;
this.simpleCallbackListener = listener;
this.buttons = new ArrayList<>();
this.gestureDetector = new GestureDetector(context, gestureListener);
this.recyclerView.setOnTouchListener(onTouchListener);
this.isMoved = false;
buttonsBuffer = new HashMap<>();
recoverQueue = new LinkedList<Integer>(){
@Override
public boolean add(Integer o) {
if (contains(o))
return false;
else
return super.add(o);
}
};
attachSwipe();
}
@Override
public void onMoved(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, int fromPos, @NonNull RecyclerView.ViewHolder target, int toPos, int x, int y) {
super.onMoved(recyclerView, viewHolder, fromPos, target, toPos, x, y);
}
@SuppressLint("ResourceType")
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
if (viewHolder.itemView.getId() == R.id.row_footer) return;
int pos = viewHolder.getAdapterPosition();
if (swipedPos != pos)
recoverQueue.add(swipedPos);
swipedPos = pos;
if (buttonsBuffer.containsKey(swipedPos))
buttons = buttonsBuffer.get(swipedPos);
else
buttons.clear();
buttonsBuffer.clear();
swipeThreshold = 0.5f * buttons.size() * BUTTON_WIDTH_DP;
recoverSwipedItem();
}
@Override
public float getSwipeThreshold(RecyclerView.ViewHolder viewHolder) {
return swipeThreshold;
}
@Override
public float getSwipeEscapeVelocity(float defaultValue) {
return 0.1f * defaultValue;
}
@Override
public float getSwipeVelocityThreshold(float defaultValue) {
return 5.0f * defaultValue;
}
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
int pos = viewHolder.getAdapterPosition();
float translationX = dX;
View itemView = viewHolder.itemView;
if (pos < 0){
swipedPos = pos;
return;
}
if(actionState == ItemTouchHelper.ACTION_STATE_SWIPE){
if(dX < 0) {
List<UnderlayButton> buffer = new ArrayList<>();
if (!buttonsBuffer.containsKey(pos)){
instantiateUnderlayButton(viewHolder, buffer);
buttonsBuffer.put(pos, buffer);
}
else {
buffer = buttonsBuffer.get(pos);
}
translationX = dX * buffer.size() * BUTTON_WIDTH_DP / itemView.getWidth();
drawButtons(c, itemView, buffer, pos, translationX);
}
}
super.onChildDraw(c, recyclerView, viewHolder, translationX, dY, actionState, isCurrentlyActive);
}
private synchronized void recoverSwipedItem(){
while (!recoverQueue.isEmpty()){
int pos = recoverQueue.poll();
if (pos > -1) {
recyclerView.getAdapter().notifyItemChanged(pos);
}
}
}
private void drawButtons(Canvas c, View itemView, List<UnderlayButton> buffer, int pos, float dX){
float right = itemView.getRight();
float dButtonWidth = (-1) * dX / buffer.size();
for (UnderlayButton button : buffer) {
float left = right - dButtonWidth;
button.onDraw(
c,
new RectF(
left,
itemView.getTop(),
right,
itemView.getBottom()
),
pos
);
right = left;
}
}
public void attachSwipe(){
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(this);
itemTouchHelper.attachToRecyclerView(recyclerView);
}
public abstract void instantiateUnderlayButton(RecyclerView.ViewHolder viewHolder, List<UnderlayButton> underlayButtons);
public static class UnderlayButton {
private String text;
private int imageResId;
private int color;
private int pos;
private RectF clickRegion;
private ListViewAdapter.ViewHolder viewHolder;
private UnderlayButtonClickListener clickListener;
public UnderlayButton(String text, int imageResId, int color, ListViewAdapter.ViewHolder holder, UnderlayButtonClickListener clickListener) {
this.text = text;
this.imageResId = imageResId;
this.color = color;
this.viewHolder = holder;
this.clickListener = clickListener;
}
public boolean onClick(float x, float y){
if (clickRegion != null && clickRegion.contains(x, y)){
clickListener.onClick(viewHolder, pos);
return true;
}
return false;
}
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);
clickRegion = rect;
this.pos = pos;
}
}
public interface UnderlayButtonClickListener {
void onClick(ListViewAdapter.ViewHolder holder, int pos);
}
}
２．UnderlayButtonを追加してSimpleCallbackを継承したクラスの生成
SimpleCallbackを継承したSimpleCallbackHelperクラスをインスタンス化する際に、必要な数分だけUnderlayButtonをaddします。今回の例では編集ボタンと削除ボタンの2つなので以下のようになります。
final float scale = getResources().getDisplayMetrics().density;
// ドラックアンドドロップの操作を実装する
SimpleCallbackHelper simpleCallbackHelper = new SimpleCallbackHelper(getApplicationContext(), recyclerView, scale, this) {
@SuppressLint("ResourceType")
@Override
public void instantiateUnderlayButton(RecyclerView.ViewHolder viewHolder, List<UnderlayButton> underlayButtons) {
if (viewHolder.itemView.getId() == R.id.row_footer) return;
underlayButtons.add(new SimpleCallbackHelper.UnderlayButton(
getString(R.string.delete),
0,
Color.parseColor(getString(R.color.underlay_red)),
(ListViewAdapter.ViewHolder) viewHolder,
new SimpleCallbackHelper.UnderlayButtonClickListener() {
@Override
public void onClick(ListViewAdapter.ViewHolder holder, int pos) {
// 削除処理の実装
}
}
));
underlayButtons.add(new SimpleCallbackHelper.UnderlayButton(
getString(R.string.edit),
0,
Color.parseColor(getString(R.color.underlay_gray)),
(ListViewAdapter.ViewHolder) viewHolder,
new SimpleCallbackHelper.UnderlayButtonClickListener() {
@Override
public void onClick(ListViewAdapter.ViewHolder holder, int pos) {
// 編集処理の実装
}
}
));
}
};
SimpleCallbackHelperをインスタンス化する際にscaleを渡しているのは、画面サイズに合わせてボタンの幅を同じにするためです。
実装のポイントは以上となります。
冒頭で示した画面イメージは、githubでソースコードを公開している「ComicMemo」アプリです。
GitHubへのリンクはhighcom/ComicMemoですので、コード全体を参照できます。
また、以下のアプリでも同様の実装をしていますので、ぜひ動作の確認にも利用してみてください。
