Android模仿美團(tuán)頂部的滑動(dòng)菜單實(shí)例代碼
前言
本文主要給大家介紹了關(guān)于Android模仿美團(tuán)頂部滑動(dòng)菜單的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧。
先來(lái)看下效果圖:

實(shí)現(xiàn)方法
這是通過(guò) ViewPager 和 GridView 相結(jié)合做出來(lái)的效果,每一個(gè) ViewPager 頁(yè)面都是一個(gè) GridView,底部的每個(gè)滑動(dòng)指示圓點(diǎn)都是從布局文件中 inflate 出來(lái)的
首先需要一個(gè)代表每個(gè)活動(dòng)主題的 JavaBean
/**
* Created by CZY on 2017/6/23.
*/
public class Subject {
//主題名
private String name;
//主題圖標(biāo)資源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;
}
}
然后用一個(gè) List< Subject > 來(lái)承載需要顯示的所有主題內(nèi)容,將這些數(shù)據(jù)傳給 GridViewAdapter 。因?yàn)?ViewPager 有幾個(gè)頁(yè)面就有幾個(gè)GridView ,每個(gè)GridView對(duì)應(yīng)的是哪些數(shù)據(jù)都需要在其內(nèi)部根據(jù)頁(yè)面索引進(jìn)行計(jì)算
/**
* Created by CZY on 2017/6/23.
*/
public class GridViewAdapter extends BaseAdapter {
private List<Subject> subjectList;
private LayoutInflater layoutInflater;
//當(dāng)前頁(yè)索引
private int currentIndex;
//占滿屏幕時(shí)每頁(yè)展示的主題個(gè)數(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ù)能夠完全占滿當(dāng)前頁(yè),則返回 pageSize
* 如果不能,則返回剩余的數(shù)據(jù)個(gè)數(shù)
*/
@Override
public int getCount() {
return subjectList.size() > (currentIndex + 1) * pageSize ? pageSize : (subjectList.size() - currentIndex * pageSize);
}
/**
* 計(jì)算出正確的索引
*/
@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,自然也需要一個(gè) 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 中進(jìn)行數(shù)據(jù)填充
public class MainActivity extends AppCompatActivity {
private String[] titles = {"美食", "電影", "酒店住宿", "休閑娛樂(lè)", "甜品飲品",
"水上樂(lè)園", "汽車服務(wù)", "美發(fā)", "麗人", "景點(diǎn)",
"足療按摩", "運(yùn)動(dòng)健身", "健身", "超市", "買菜",
"今日新單", "外賣", "自助餐", "KTV", "機(jī)票/火車票",
"周邊游", "小吃快餐", "面膜", "美甲美睫", "火鍋",
"生日蛋糕", "母嬰親子", "生活服務(wù)", "婚紗攝影", "學(xué)習(xí)培訓(xùn)",
"家裝", "結(jié)婚"};
private List<Subject> subjectList;
private LinearLayout ll_dot;
//每頁(yè)展示的主題個(gè)數(shù)
private final int pageSize = 10;
//當(dāng)前頁(yè)索引
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));
}
//需要的頁(yè)面數(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));
}
//使第一個(gè)小圓點(diǎn)呈選中狀態(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) {
}
});
}
}
每一個(gè)小圓點(diǎn)都對(duì)應(yīng)一個(gè)布局文件,其中只包含一個(gè)View,重點(diǎn)是設(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>
代碼整體來(lái)說(shuō)都挺簡(jiǎn)單的,這里也提供源代碼下載:仿美團(tuán)頂部滑動(dòng)菜單
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)各位Android開發(fā)者們的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Android實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動(dòng)效果
- Android實(shí)現(xiàn)自定義滑動(dòng)式抽屜菜單效果
- android RecyclerView側(cè)滑菜單,滑動(dòng)刪除,長(zhǎng)按拖拽,下拉刷新上拉加載
- Android滑動(dòng)優(yōu)化高仿QQ6.0側(cè)滑菜單(滑動(dòng)優(yōu)化)
- Android仿微信滑動(dòng)彈出編輯、刪除菜單效果、增加下拉刷新功能
- Android利用滑動(dòng)菜單框架實(shí)現(xiàn)滑動(dòng)菜單效果
- Android Studio使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)菜單Tab效果
- Android自定義橫向滑動(dòng)菜單的實(shí)現(xiàn)
- Android仿人人客戶端滑動(dòng)菜單的側(cè)滑菜單效果
- Android實(shí)現(xiàn)左側(cè)滑動(dòng)菜單
相關(guān)文章
Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單
這篇文章主要為大家詳細(xì)介紹了Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Android利用ContentProvider讀取短信內(nèi)容
這篇文章主要為大家詳細(xì)介紹了Android利用ContentProvider讀取短信內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
Android簡(jiǎn)單修改原有應(yīng)用和添加應(yīng)用的方法
這篇文章主要介紹了Android簡(jiǎn)單修改原有應(yīng)用和添加應(yīng)用的方法,涉及Android工程項(xiàng)目中針對(duì)源碼的修改及資源文件的編譯等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
Android webview手動(dòng)校驗(yàn)https證書(by 星空武哥)
有些時(shí)候由于Android系統(tǒng)的bug或者其他的原因,導(dǎo)致我們的webview不能驗(yàn)證通過(guò)我們的https證書,最明顯的例子就是華為手機(jī)mate7升級(jí)到Android7.0后,手機(jī)有些網(wǎng)站打不開了,而更新了webview的補(bǔ)丁后就沒(méi)問(wèn)題了2017-09-09
Android?Jetpack組件中LifeCycle作用詳細(xì)介紹
Jetpack是谷歌在Google?I/O?2017大會(huì)上發(fā)布一套幫助開發(fā)者解決Android架構(gòu)設(shè)計(jì)的方案,而Lifecycle是Jetpack?architecture下的一部分,一起來(lái)看一下Lifecycle的使用及原理分析2022-09-09
Android動(dòng)態(tài)修改應(yīng)用圖標(biāo)與名稱的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Android動(dòng)態(tài)修改應(yīng)用圖標(biāo)與名稱的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Android開發(fā)中怎樣調(diào)用系統(tǒng)Email發(fā)送郵件(多種調(diào)用方式)
在Android中調(diào)用其他程序進(jìn)行相關(guān)處理,幾乎都是使用的Intent,所以,Email也不例外,所謂的調(diào)用Email,只是說(shuō)Email可以接收Intent并做這些事情2013-06-06

