Android 仿美团顶部滑动菜单

先来看下效果图：

这是通过 ViewPager 和 GridView 相结合做出来的效果，每一个 ViewPager 页面都是一个 GridView，底部的每个滑动指示圆点都是从布局文件中 inflate 出来的

首先需要一个代表每个活动主题的 JavaBean

/** * Created by CZY on 2017/6/23. */public class Subject {    //主题名    private String name;    //主题图标资源ID    private int icon;    public Subject(String name, int icon) {        this.name = name;        this.icon = icon;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public int getIcon() {        return icon;    }    public void setIcon(int icon) {        this.icon = icon;    }}

然后用一个 List< Subject > 来承载需要显示的所有主题内容，将这些数据传给 GridViewAdapter 。因为 ViewPager 有几个页面就有几个GridView ，每个GridView对应的是哪些数据都需要在其内部根据页面索引进行计算

/** * Created by CZY on 2017/6/23. */public class GridViewAdapter extends BaseAdapter {    private List<Subject> subjectList;    private LayoutInflater layoutInflater;    //当前页索引    private int currentIndex;    //占满屏幕时每页展示的主题个数    private int pageSize;    public GridViewAdapter(Context context, List<Subject> subjectList, int currentIndex, int pageSize) {        this.layoutInflater = LayoutInflater.from(context);        this.subjectList = subjectList;        this.currentIndex = currentIndex;        this.pageSize = pageSize;    }    /**     * 如果剩余数据能够完全占满当前页，则返回 pageSize     * 如果不能，则返回剩余的数据个数     */    @Override    public int getCount() {        return subjectList.size() > (currentIndex + 1) * pageSize ? pageSize : (subjectList.size() - currentIndex * pageSize);    }    /**     * 计算出正确的索引     */    @Override    public Object getItem(int position) {        return subjectList.get(position + currentIndex * pageSize);    }    @Override    public long getItemId(int position) {        return position + currentIndex * pageSize;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ViewHolder viewHolder;        if (convertView == null) {            convertView = layoutInflater.inflate(R.layout.item_grid_view, parent, false);            viewHolder = new ViewHolder();            viewHolder.tv_subject = (TextView) convertView.findViewById(R.id.tv_subject);            viewHolder.iv_subject = (ImageView) convertView.findViewById(R.id.iv_subject);            convertView.setTag(viewHolder);        } else {            viewHolder = (ViewHolder) convertView.getTag();        }        int pos = position + currentIndex * pageSize;        viewHolder.tv_subject.setText(subjectList.get(pos).getName());        viewHolder.iv_subject.setImageResource(subjectList.get(pos).getIcon());        return convertView;    }    private class ViewHolder {        private TextView tv_subject;        private ImageView iv_subject;    }}

需要使用到的布局文件 item_grid_view 如下所示

<?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"    android:paddingBottom="10dp"    android:paddingTop="10dp">    <ImageView        android:id="@+id/iv_subject"        android:layout_width="40dp"        android:layout_height="40dp"        android:layout_centerHorizontal="true" />    <TextView        android:id="@+id/tv_subject"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/iv_subject"        android:layout_centerHorizontal="true"        android:layout_marginTop="3dp"        android:textSize="12sp" /></RelativeLayout>

使用到了 ViewPager，自然也需要一个 ViewPagerAdapter

/** * Created by CZY on 2017/6/23. */public class ViewPagerAdapter extends PagerAdapter {    private List<View> viewList;    public ViewPagerAdapter(List<View> viewList) {        this.viewList = viewList;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(viewList.get(position));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(viewList.get(position));        return (viewList.get(position));    }    @Override    public int getCount() {        return viewList == null ? 0 : viewList.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }}

在 MainActivity 中进行数据填充

public class MainActivity extends AppCompatActivity {    private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "甜品饮品",            "水上乐园", "汽车服务", "美发", "丽人", "景点",            "足疗按摩", "运动健身", "健身", "超市", "买菜",            "今日新单", "外卖", "自助餐", "KTV", "机票/火车票",            "周边游", "小吃快餐", "面膜", "美甲美睫", "火锅",            "生日蛋糕", "母婴亲子", "生活服务", "婚纱摄影", "学习培训",            "家装", "结婚"};    private List<Subject> subjectList;    private LinearLayout ll_dot;    //每页展示的主题个数    private final int pageSize = 10;    //当前页索引    private int currentIndex;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);        ll_dot = (LinearLayout) findViewById(R.id.ll_dot);        subjectList = new ArrayList<>();        for (String title : titles) {            subjectList.add(new Subject(title, R.drawable.icon));        }        //需要的页面数        int pageCount = (int) Math.ceil(subjectList.size() * 1.0 / pageSize);        List<View> viewList = new ArrayList<>();        for (int i = 0; i < pageCount; i++) {            GridView gridView = (GridView) getLayoutInflater().inflate(R.layout.layout_grid_view, viewPager, false);            gridView.setAdapter(new GridViewAdapter(this, subjectList, i, pageSize));            viewList.add(gridView);            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {                @Override                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                    int pos = position + currentIndex * pageSize;                    Toast.makeText(MainActivity.this, subjectList.get(pos).getName(), Toast.LENGTH_SHORT).show();                }            });        }        viewPager.setAdapter(new ViewPagerAdapter(viewList));        for (int i = 0; i < pageCount; i++) {            ll_dot.addView(getLayoutInflater().inflate(R.layout.view_dot, null));        }        //使第一个小圆点呈选中状态        ll_dot.getChildAt(0).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_selected);        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            public void onPageSelected(int position) {                ll_dot.getChildAt(currentIndex).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_normal);                ll_dot.getChildAt(position).findViewById(R.id.v_dot).setBackgroundResource(R.drawable.dot_selected);                currentIndex = position;            }            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            public void onPageScrollStateChanged(int arg0) {            }        });    }}

每一个小圆点都对应一个布局文件，其中只包含一个View，重点是设置是设备其 background 属性，使其呈现圆形

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <View        android:id="@+id/v_dot"        android:layout_width="8dp"        android:layout_height="8dp"        android:layout_marginLeft="2dp"        android:layout_marginRight="2dp"        android:background="@drawable/dot_normal" /></RelativeLayout>

代码整体来说都挺简单的，这里也提供源代码下载：仿美团顶部滑动菜单