Android實現(xiàn)九宮格橫向左右滑動

更新時間：2018年08月17日 09:34:07 作者：zuo_er_lyf

這篇文章主要為大家詳細介紹了Android實現(xiàn)九宮格橫向左右滑動，具有一定的參考價值，感興趣的小伙伴們可以參考一下

項目中大多都會有很多的分類，且左右滑動，如美團首頁（下圖）：

不難發(fā)現(xiàn)包含2部分內(nèi)容：1.左右滑動的頁面，2.指示器。

大度一般都會想到，viewPager+GridView，這里介紹另外的的一種方法，也做下記錄；

GridViewPager+MagicIndicator(萬能指示器)

一、引入build.gradle

compile 'com.yhy:gvp:1.1.0'  
compile 'com.github.hackware1993:MagicIndicator:1.5.0'

如果報錯,在項目build.gradle中加入：

repositories {
  ...
  maven {
    url "https://jitpack.io"
  }
}

二、布局代碼

<LinearLayout
   android:gravity="center_horizontal"
   android:layout_gravity="center_horizontal"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical">
 
 
   <com.yhy.gvp.widget.GridViewPager
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:id="@+id/grid_viewpager"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    app:num_columns="5"
    app:page_size="10"></com.yhy.gvp.widget.GridViewPager>
 
   <net.lucode.hackware.magicindicator.MagicIndicator
    android:id="@+id/indicator_container"
    android:layout_width="wrap_content"
    android:layout_height="30dp">  
   </net.lucode.hackware.magicindicator.MagicIndicator>
</LinearLayout>

屬性說明：

三、關鍵代碼：

@InjectView(R.id.grid_viewpager)
  GridViewPager gridViewpager;
  @InjectView(R.id.indicator_container)
  MagicIndicator indicatorContainer; 使用ButterKnife這里不多介紹
 
indexTypeAdapter=new IndexTypeAdapter(getActivity(),R.layout.item_index_type,typeDatas);//頁面內(nèi)容適配器
    gridViewpager.setGVPAdapter(indexTypeAdapter);
 
    Log.i("datas",(int) Math.ceil(typeDatas.size() / 10)+"");
    CommonNavigator commonNavigator = new CommonNavigator(context);//指示器
    commonNavigator.setAdapter(new CommonNavigatorAdapter() {
      @Override
      public int getCount() {
        int num=typeDatas.size()/10;
        if(typeDatas.size() % 10>0){
          num++;
        }
        return typeDatas==null?0:num;
      }
 
      @Override
      public IPagerTitleView getTitleView(Context mContext, final int i) {
        CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView(context);
        View view=View.inflate(context,R.layout.single_image_layout,null);
        final ImageView iv_image=view.findViewById(R.id.iv_image);
        iv_image.setImageResource(R.drawable.point_unfocused);
 
        commonPagerTitleView.setContentView(view);//指示器引入外部布局，可知指示器內(nèi)容可根據(jù)需求設置，多樣化
        commonPagerTitleView.setOnPagerTitleChangeListener(new CommonPagerTitleView.OnPagerTitleChangeListener() {
          @Override
          public void onSelected(int i, int i1) {
            iv_image.setImageResource(R.drawable.point_focused);
          }
 
          @Override
          public void onDeselected(int i, int i1) {
            iv_image.setImageResource(R.drawable.point_unfocused);
          }
 
          @Override
          public void onLeave(int i, int i1, float v, boolean b) {
 
          }
 
          @Override
          public void onEnter(int i, int i1, float v, boolean b) {
 
          }
        });
        return commonPagerTitleView;
      }
 
      @Override
      public IPagerIndicator getIndicator(Context context) {
        return null;
      }
    });
    indicatorContainer.setNavigator(commonNavigator);
    ViewPagerHelper.bind(indicatorContainer, gridViewpager);//頁面內(nèi)容與指示器關聯(lián)

四、左右滑動頁面內(nèi)容適配器adapter

public class IndexTypeAdapter extends GVPAdapter<IndexAllTypeBean.TypeListBean> {
  private Context context;
  public IndexTypeAdapter(Context context,int layoutResId, @Nullable List<IndexAllTypeBean.TypeListBean> data) {
    super(layoutResId, data);
    this.context=context;
  }
 
  @Override
  public void bind(View item, int position, IndexAllTypeBean.TypeListBean data) {
    CircleImageView iv_image=item.findViewById(R.id.iv_image);
    TextView tv_type_name=item.findViewById(R.id.tv_type_name);
    Picasso.with(context).load(data.getImageUrl()).into(iv_image);
    
      tv_type_name.setText(data.getName());
    
  }
}
//IndexAllTypeBean.TypeListBean 為數(shù)據(jù)內(nèi)容實體類，不做介紹

五、內(nèi)容item布局

<LinearLayout
  android:orientation="vertical"
  android:paddingBottom="5dp"
  android:layout_marginLeft="5dp"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
//自定義圓形圖片，可用ImageView 替代
  <com.example.administrator.takeout.ui.widght.CircleImageView
   android:id="@+id/iv_image"
   android:gravity="center_horizontal"
   android:layout_gravity="center_horizontal"
   android:layout_width="40dp"
   android:layout_height="40dp" />
  <TextView
   android:layout_marginTop="5dp"
   android:gravity="center_horizontal"
   android:layout_gravity="center_horizontal"
   android:id="@+id/tv_type_name"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
</LinearLayout>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android寫一個實時輸入框功能
這篇文章主要介紹了Android寫一個實時輸入框功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
Android使用百度語音識別的示例代碼
本篇文章主要介紹了Android使用百度語音識別的示例代碼，詳細介紹了使用百度語音識別，完成語音識別的功能，有興趣的可以了解一下。
2017-02-02
Android性能優(yōu)化方案詳情
這篇文章主要給大家分享的是Android項目工程內(nèi)的一些性能優(yōu)化方式，文章圍繞Android項目工程優(yōu)化方式展開內(nèi)容,需要的朋友可以參考一下文章的具體詳情，希望對你有所幫助
2021-11-11
Android開發(fā)常用標簽小結
這篇文章主要介紹了Android開發(fā)常用標簽,分析總結了Android開發(fā)中常見標簽的使用技巧,需要的朋友可以參考下
2015-05-05
Android中自定義對話框(Dialog)的實例代碼
這篇文章介紹了Android中自定義對話框(Dialog)的實例代碼，有需要的朋友可以參考一下
2013-08-08
實戰(zhàn)android打包和簽名
本篇文章給大家通過實例講解了如何對android項目打包和簽名，并把用到的文件和流程做了注視，需要的朋友參考一下吧。
2017-12-12
Android 網(wǎng)絡請求框架解析之okhttp與okio
HTTP是現(xiàn)代應用常用的一種交換數(shù)據(jù)和媒體的網(wǎng)絡方式,高效地使用HTTP能讓資源加載更快,節(jié)省帶寬,OkHttp是一個高效的HTTP客戶端,下面這篇文章主要給大家介紹了關于OkHttp如何用于安卓網(wǎng)絡請求,需要的朋友可以參考下
2021-10-10
android新建草稿刪除后下次開機還會顯示保存的草稿
android 新建一個草稿，保存，然后全部刪除會話，關機再開機后還會顯示保存的草稿，下面與大家分享下具體的解決方法
2013-06-06
SpringBoot實現(xiàn)短信驗證碼登錄功能(案例)
這篇文章主要介紹了SpringBoot實現(xiàn)短信驗證碼登錄功能,本文通過實例代碼給大家介紹的非常詳細,對大家大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-08-08
AndroidStudio Gradle基于友盟的多渠道打包方法
這篇文章主要介紹了AndroidStudio Gradle基于友盟的多渠道打包方法,需要的朋友可以參考下
2017-09-09