Android模仿美團頂部的滑動選單例項程式碼

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>

程式碼整體來說都挺簡單的,這裡也提供原始碼下載:仿美團頂部滑動選單

總結

以上就是這篇文章的全部內容了,希望本文的內容對各位Android開發者們的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援。

您可能感興趣的文章:

Android中實現水平滑動(橫向滑動)ListView示例Android中RecyclerView實現橫向滑動程式碼Android開發基於ViewPager GridView實現仿大眾點評橫向滑動功能Android ScrollView巢狀橫向滑動控制元件時衝突問題Android程式開發之使用Design包實現QQ動畫側滑效果和滑動選單導航Android 3D滑動選單完全解析 Android實現推拉門式的立體特效Android實現3D推拉門式滑動選單原始碼解析Android利用滑動選單框架實現滑動選單效果Android仿人人客戶端滑動選單的側滑選單效果Android自定義橫向滑動選單的實現