快捷導航

Android模仿美團頂部的滑動菜單實例代碼

更新時間：2017年08月24日 09:32:12 作者：葉應是葉

最近在工作遇到一個需要，要做一個滑動菜單，實現(xiàn)的效果類似美團頂部的滑動菜單，所以下面這篇文章主要給大家介紹了關(guān)于Android如何模仿美團頂部滑動菜單的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。

前言

本文主要給大家介紹了關(guān)于Android模仿美團頂部滑動菜單的相關(guān)內(nèi)容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

先來看下效果圖：

實現(xiàn)方法

這是通過 ViewPager 和 GridView 相結(jié)合做出來的效果，每一個 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 > 來承載需要顯示的所有主題內(nèi)容，將這些數(shù)據(jù)傳給 GridViewAdapter 。因為 ViewPager 有幾個頁面就有幾個GridView ，每個GridView對應的是哪些數(shù)據(jù)都需要在其內(nèi)部根據(jù)頁面索引進行計算

/**
 * Created by CZY on 2017/6/23.
 */
public class GridViewAdapter extends BaseAdapter {

 private List<Subject> subjectList;

 private LayoutInflater layoutInflater;

 //當前頁索引
 private int currentIndex;

 //占滿屏幕時每頁展示的主題個數(shù)
 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;
 }

 /**
  * 如果剩余數(shù)據(jù)能夠完全占滿當前頁，則返回 pageSize
  * 如果不能，則返回剩余的數(shù)據(jù)個數(shù)
  */
 @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 中進行數(shù)據(jù)填充

public class MainActivity extends AppCompatActivity {

 private String[] titles = {"美食", "電影", "酒店住宿", "休閑娛樂", "甜品飲品",
   "水上樂園", "汽車服務(wù)", "美發(fā)", "麗人", "景點",
   "足療按摩", "運動健身", "健身", "超市", "買菜",
   "今日新單", "外賣", "自助餐", "KTV", "機票/火車票",
   "周邊游", "小吃快餐", "面膜", "美甲美睫", "火鍋",
   "生日蛋糕", "母嬰親子", "生活服務(wù)", "婚紗攝影", "學習培訓",
   "家裝", "結(jié)婚"};

 private List<Subject> subjectList;

 private LinearLayout ll_dot;

 //每頁展示的主題個數(shù)
 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));
  }
  //需要的頁面數(shù)
  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));
  }
  //使第一個小圓點呈選中狀態(tài)
  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，重點是設(shè)置是設(shè)備其 background 屬性，使其呈現(xiàn)圓形

<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>

代碼整體來說都挺簡單的，這里也提供源代碼下載：仿美團頂部滑動菜單

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對各位Android開發(fā)者們的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: