Android模仿美团顶部的滑动菜单实例代码

作者:叶应是叶 时间:2023-04-24 08:10:23 

前言

本文主要给大家介绍了关于Android模仿美团顶部滑动菜单的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

先来看下效果图:

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>

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

来源:http://www.jianshu.com/p/885a6922cdb0

标签:android,美团,滑动菜单
0
投稿

猜你喜欢

  • springcloud LogBack日志使用详解

    2021-12-23 15:17:05
  • flutter 路由机制的实现

    2021-11-18 08:28:46
  • 详谈Java中的Object、T(泛型)、?区别

    2022-06-11 21:13:11
  • Android LuBan与Compressor图片压缩方式

    2022-11-29 01:18:41
  • 详解SpringBoot配置连接池

    2022-03-28 13:29:42
  • Android 中 SwipeLayout一个展示条目底层菜单的侧滑控件源码解析

    2022-03-10 14:25:33
  • c#中DataTable转List的2种方法示例

    2022-05-10 20:51:09
  • Java基于链表实现栈的方法详解

    2022-07-02 11:39:20
  • Android实现简单手电筒功能

    2023-09-17 19:50:27
  • Android TextView中文字通过SpannableString设置属性用法示例

    2023-07-26 07:11:51
  • C++ 二维(多维)vector添加一个空项问题

    2022-10-10 14:44:23
  • Java语言求解完美数代码分析

    2023-01-28 10:17:58
  • java算法实现预测双色球中奖号码

    2022-06-19 17:01:22
  • C# 实现dataGridView选中一行右键出现菜单的示例代码

    2022-05-12 05:15:55
  • SpringCloud Zuul过滤器实现登陆鉴权代码实例

    2022-06-21 21:47:51
  • Spring占位符Placeholder的实现原理解析

    2023-03-14 18:14:00
  • java实现双色球机选号码生成器

    2022-10-05 07:41:33
  • 如何使用C#操作幻灯片

    2023-08-27 01:06:01
  • c#中CAD文件读取实例

    2023-07-23 19:37:59
  • Android RecyclerView上拉加载和下拉刷新

    2023-05-09 14:30:26
  • asp之家 软件编程 m.aspxhome.com