Android 利用ViewPager+GridView實(shí)現(xiàn)首頁(yè)導(dǎo)航欄布局分頁(yè)效果
最近我嘗試使用ViewPager+GridView實(shí)現(xiàn)的,看起來(lái)一切正常,廢話不多說(shuō),具體代碼如下:
如圖是效果圖
首先分析下思路
1.首先是怎么布局:整體是一個(gè)ViewPager將GridView作為一個(gè)View添加到ViewPager的adapter中,下方是圓點(diǎn)
<?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="match_parent" android:background="#CDCDCD" > <RelativeLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#fff" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:id="@+id/points" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:gravity="center" android:orientation="horizontal" /> </RelativeLayout> </RelativeLayout>
2.接下來(lái)時(shí)作為ViewPager的item布局文件GridView,(如果最外層是RelativeLayout或線型布局等,會(huì)轉(zhuǎn)換異常)
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="wrap_content" android:numColumns="4"> </GridView>
3.是GridView適配器的編寫(xiě),主要是注意數(shù)量如果一共有all=10條數(shù)據(jù),每頁(yè)最多max=8條的話,第一個(gè)頁(yè)面就是個(gè)數(shù)是max=8,第二個(gè)就2個(gè)all-max
package com.item.jiejie.adapter; import java.util.List; import com.item.jiejie.ProdctBean; import com.item.jiejie.R; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; /** * GridView加載數(shù)據(jù)的適配器 * @author Administrator * */ public class MyGridViewAdpter extends BaseAdapter{ private Context context; private List<ProdctBean> lists;//數(shù)據(jù)源 private int mIndex; // 頁(yè)數(shù)下標(biāo),標(biāo)示第幾頁(yè),從0開(kāi)始 private int mPargerSize;// 每頁(yè)顯示的最大的數(shù)量 public MyGridViewAdpter(Context context, List<ProdctBean> lists, int mIndex, int mPargerSize) { this.context = context; this.lists = lists; this.mIndex = mIndex; this.mPargerSize = mPargerSize; } /** * 先判斷數(shù)據(jù)及的大小是否顯示滿本頁(yè)lists.size() > (mIndex + 1)*mPagerSize * 如果滿足,則此頁(yè)就顯示最大數(shù)量lists的個(gè)數(shù) * 如果不夠顯示每頁(yè)的最大數(shù)量,那么剩下幾個(gè)就顯示幾個(gè) */ @Override public int getCount() { // TODO Auto-generated method stub return lists.size() > (mIndex + 1) * mPargerSize ? mPargerSize : (lists.size() - mIndex*mPargerSize); } @Override public ProdctBean getItem(int arg0) { // TODO Auto-generated method stub return lists.get(arg0 + mIndex * mPargerSize); } @Override public long getItemId(int arg0) { // TODO Auto-generated method stub return arg0 + mIndex * mPargerSize; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ViewHolder holder = null; if(convertView == null){ holder = new ViewHolder(); convertView = View.inflate(context, R.layout.item_view, null); holder.tv_name = (TextView)convertView.findViewById(R.id.item_name); holder.iv_nul = (ImageView)convertView.findViewById(R.id.item_image); convertView.setTag(holder); }else { holder = (ViewHolder)convertView.getTag(); } //重新確定position因?yàn)槟玫降目偸菙?shù)據(jù)源,數(shù)據(jù)源是分頁(yè)加載到每頁(yè)的GridView上的 final int pos = position + mIndex * mPargerSize;//假設(shè)mPageSiez //假設(shè)mPagerSize=8,假如點(diǎn)擊的是第二頁(yè)(即mIndex=1)上的第二個(gè)位置item(position=1),那么這個(gè)item的實(shí)際位置就是pos=9 holder.tv_name.setText(lists.get(pos).getName() + ""); holder.iv_nul.setImageResource(lists.get(pos).getUrl()); //添加item監(jiān)聽(tīng) // convertView.setOnClickListener(new View.OnClickListener() { // // @Override // public void onClick(View arg0) { // // TODO Auto-generated method stub // Toast.makeText(context, "您點(diǎn)擊了" + lists.get(pos).getName(), Toast.LENGTH_SHORT).show(); // } // }); return convertView; } static class ViewHolder{ private TextView tv_name; private ImageView iv_nul; } }
4.GridView的點(diǎn)擊事件這里提供2種方法一種是在適配器用布局的點(diǎn)擊事件來(lái)處理;第二種是Object obj = gridView.getItemAtPosition(position);來(lái)處理。
5.主程序?qū)ridView作為View添加到ViewPager中 代碼如下
package com.item.jiejie; import java.util.ArrayList; import java.util.List; import com.item.jiejie.adapter.MyGridViewAdpter; import com.item.jiejie.adapter.MyViewPagerAdapter; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.GridView; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.Toast; /** * 實(shí)現(xiàn)仿美團(tuán)首頁(yè)導(dǎo)航欄布局分頁(yè)效果 * @author Administrator * */ public class MyActivity extends Activity { private ViewPager viewPager; private LinearLayout group;//圓點(diǎn)指示器 private ImageView[] ivPoints;//小圓點(diǎn)圖片的集合 private int totalPage; //總的頁(yè)數(shù) private int mPageSize = 8; //每頁(yè)顯示的最大的數(shù)量 private List<ProdctBean> listDatas;//總的數(shù)據(jù)源 private List<View> viewPagerList;//GridView作為一個(gè)View對(duì)象添加到ViewPager集合中 //private int currentPage;//當(dāng)前頁(yè) private String[] proName = {"名稱0","名稱1","名稱2","名稱3","名稱4","名稱5", "名稱6","名稱7","名稱8","名稱9","名稱10","名稱11","名稱12","名稱13", "名稱14","名稱15","名稱16","名稱17","名稱18","名稱19"}; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); //初始化控件 initView(); //添加業(yè)務(wù)邏輯 initData(); } private void initView() { // TODO Auto-generated method stub viewPager = (ViewPager)findViewById(R.id.viewpager); group = (LinearLayout)findViewById(R.id.points); listDatas = new ArrayList<ProdctBean>(); for(int i =0 ; i < proName.length; i++){ listDatas.add(new ProdctBean(proName[i], R.drawable.iv_driving)); } } private void initData() { // TODO Auto-generated method stub //總的頁(yè)數(shù)向上取整 totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize); viewPagerList = new ArrayList<View>(); for(int i = 0; i < totalPage; i++){ //每個(gè)頁(yè)面都是inflate出一個(gè)新實(shí)例 final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null); gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize)); //添加item點(diǎn)擊監(jiān)聽(tīng) gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) { // TODO Auto-generated method stub Object obj = gridView.getItemAtPosition(position); if(obj != null && obj instanceof ProdctBean){ System.out.println(obj); Toast.makeText(MyActivity.this, ((ProdctBean)obj).getName(), Toast.LENGTH_SHORT).show(); } } }); //每一個(gè)GridView作為一個(gè)View對(duì)象添加到ViewPager集合中 viewPagerList.add(gridView); } //設(shè)置ViewPager適配器 viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList)); //添加小圓點(diǎn) ivPoints = new ImageView[totalPage]; for(int i = 0; i < totalPage; i++){ //循壞加入點(diǎn)點(diǎn)圖片組 ivPoints[i] = new ImageView(this); if(i==0){ ivPoints[i].setImageResource(R.drawable.page_focuese); }else { ivPoints[i].setImageResource(R.drawable.page_unfocused); } ivPoints[i].setPadding(8, 8, 8, 8); group.addView(ivPoints[i]); } //設(shè)置ViewPager的滑動(dòng)監(jiān)聽(tīng),主要是設(shè)置點(diǎn)點(diǎn)的背景顏色的改變 viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ @Override public void onPageSelected(int position) { // TODO Auto-generated method stub //currentPage = position; for(int i=0 ; i < totalPage; i++){ if(i == position){ ivPoints[i].setImageResource(R.drawable.page_focuese); }else { ivPoints[i].setImageResource(R.drawable.page_unfocused); } } } }); } }
6.ViewPage的適配器代碼
package com.item.jiejie.adapter; import java.util.List; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; /** * ViewPage的適配器 * @author Administrator * */ public class MyViewPagerAdapter extends PagerAdapter{ private List<View> viewList;//View就二十GridView public MyViewPagerAdapter(List<View> viewList) { this.viewList = viewList; } @Override public int getCount() { // TODO Auto-generated method stub return viewList!=null ? viewList.size() : 0; } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } /** * 將當(dāng)前的View添加到ViewGroup容器中 * 這個(gè)方法,return一個(gè)對(duì)象,這個(gè)對(duì)象表明了PagerAdapter適配器選擇哪個(gè)對(duì)象放在當(dāng)前的ViewPage上 */ @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub container.addView(viewList.get(position)); return viewList.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView((View) object); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android BottomNavigationView與Fragment重建與重疊問(wèn)題解決方法探索
- Android關(guān)于BottomNavigationView使用指南
- Android BottomNavigationView底部導(dǎo)航效果
- Android中TabLayout+ViewPager 簡(jiǎn)單實(shí)現(xiàn)app底部Tab導(dǎo)航欄
- Android自定義ViewPagerIndicator實(shí)現(xiàn)炫酷導(dǎo)航欄指示器(ViewPager+Fragment)
- Android BottomNavigationView結(jié)合ViewPager實(shí)現(xiàn)底部導(dǎo)航欄步驟詳解
相關(guān)文章
Android中Activity過(guò)渡動(dòng)畫(huà)的實(shí)例講解
在android5.0 以上版本中,google為我們提供了幾種activity切換的過(guò)渡動(dòng)畫(huà),目的是為了讓 activity 切換轉(zhuǎn)場(chǎng)更加美觀,下面這篇文章主要給大家介紹了關(guān)于Android中Activity過(guò)渡動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2021-11-11Android如何獲取子View的位置及坐標(biāo)詳解
這篇文章主要給大家介紹了關(guān)于Android如何獲取子View的位置及坐標(biāo)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Android 實(shí)現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程
這篇文章主要介紹了Android 實(shí)現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03Android FrameWork之Zygote啟動(dòng)示例詳解
這篇文章主要為大家介紹了Android FrameWork之Zygote啟動(dòng)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07基于Android實(shí)現(xiàn)的文件同步設(shè)計(jì)方案
隨著用戶對(duì)自身數(shù)據(jù)保護(hù)意識(shí)的加強(qiáng),讓用戶自己維護(hù)自己的數(shù)據(jù)也成了獨(dú)立開(kāi)發(fā)產(chǎn)品時(shí)的一個(gè)賣(mài)點(diǎn),若只針對(duì)少量的文件進(jìn)行同步,則實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單,當(dāng)針對(duì)一個(gè)多層級(jí)目錄同步時(shí),情況就復(fù)雜多了,本文我分享下我的設(shè)計(jì)思路2023-10-10Android Studio使用ButterKnife和Zelezny的方法
這篇文章主要為大家詳細(xì)介紹了Android Studio使用ButterKnife和Zelezny的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Android消息機(jī)制Handler的工作過(guò)程詳解
這篇文章主要為大家詳細(xì)介紹了Android消息機(jī)制Handler的工作過(guò)程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Android setTag方法的key問(wèn)題解決辦法
這篇文章主要介紹了Android setTag方法的key問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2016-09-09