Android拖拽回弹布局，玩转交互效果

Android

2023-11-28 02:33:07

在移动端APP开发中，交互效果往往是决定用户体验好坏的关键因素之一。一个良好的交互效果可以吸引用户，提升用户的使用体验，从而增加用户粘性。

而Android拖拽回弹布局是一种非常常见的交互效果，它广泛应用于各种APP中，比如今日头条、网易新闻、新浪微博等。今天，我们就以今日头条的关注页面为例，来深入剖析一下如何实现Android拖拽回弹布局。

今日头条关注页面交互效果分析

今日头条的关注页面主要由三个部分组成：关注列表、文章列表和关闭提示。

关注列表：位于页面顶部，展示用户关注的所有账号。
文章列表：位于页面中间，展示关注账号发布的文章。
关闭提示：位于页面底部，当用户拖拽文章列表到顶部或底部时出现，提示用户松手即可关闭文章列表。

实现思路

要实现Android拖拽回弹布局，首先需要创建一个ViewPager，然后在ViewPager中添加多个Fragment，每个Fragment对应一个文章列表。当用户点击关注头像时，弹出ViewPager，并显示第一个Fragment中的文章列表。当用户拖拽文章列表时，ViewPager会根据拖拽方向和距离来决定是否显示关闭提示。当用户松手时，如果关闭提示可见，则关闭ViewPager，否则切换到下一个Fragment中的文章列表。

具体步骤

在布局文件中创建ViewPager。

<ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在代码中创建ViewPagerAdapter，并设置ViewPager的Adapter。

ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);

在ViewPagerAdapter中创建Fragment，并添加Fragment到ViewPager中。

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new ArticleListFragment();
    }

    @Override
    public int getCount() {
        return 3;
    }
}

在ArticleListFragment中创建RecyclerView，并设置RecyclerView的Adapter。

public class ArticleListFragment extends Fragment {

    private RecyclerView recyclerView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_article_list, container, false);
        recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        recyclerView.setAdapter(new ArticleAdapter());
        return view;
    }
}

在ArticleAdapter中创建ViewHolder，并设置ViewHolder的View。

public class ArticleAdapter extends RecyclerView.Adapter<ArticleAdapter.ViewHolder> {

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_article, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText("文章" + position);
    }

    @Override
    public int getItemCount() {
        return 10;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        private TextView textView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }
    }
}

在ViewPager中添加OnPageChangeListener，并监听ViewPager的页面滑动事件。

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_DRAGGING) {
            // 开始拖拽
        } else if (state == ViewPager.SCROLL_STATE_SETTLING) {
            // 拖拽结束
        } else if (state == ViewPager.SCROLL_STATE_IDLE) {
            // 闲置状态
        }
    }
});

在ViewPager中添加OnTouchListener，并监听ViewPager的触摸事件。

viewPager.setOnTouchListener(new View.OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 按下
                break;
            case MotionEvent.ACTION_MOVE:
                // 移动
                break;
            case MotionEvent.ACTION_UP:
                // 抬起
                break;
        }
        return false;
    }
});

在代码中创建关闭提示，并设置关闭提示的View。

private TextView closeHint;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewPager = (ViewPager) findViewById(R.id.viewPager);
    closeHint = (TextView) findViewById(R.id.closeHint);
}

在代码中监听ViewPager的触摸事件，并根据触摸事件来显示或隐藏关闭提示。

viewPager.setOnTouchListener(new View.OnTouchListener() {

    private float downX;
    private float downY;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 按下
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                // 移动
                float moveX = event.getX();
                float moveY = event.getY();
                if (Math.abs(moveY - downY) > Math.abs(moveX - downX)) {
                    // 垂直方向移动
                    if (moveY - downY > 0) {
                        // 向下移动
                        if (closeHint.getVisibility() == View.GONE) {
                            closeHint.setVisibility(View.VISIBLE);
                        }
                    } else {
                        // 向上移动
                        if (closeHint.getVisibility() == View.VISIBLE) {
                            closeHint.setVisibility(View.GONE);
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                // 抬起
                if (closeHint.getVisibility() == View.VISIBLE) {
                    // 关闭ViewPager
                    viewPager.setCurrentItem(0);
                    closeHint.setVisibility(View.GONE);
                }
                break;
        }
        return false;
    }
});