Android 9宮格橫向左右滑動
阿新 • • 發佈:2019-01-01
專案中大多都會有很多的分類,且左右滑動,如美團首頁(下圖):
不難發現包含2部分內容: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>
屬性說明:
屬性名 | 預設值 | 屬性說明 |
---|---|---|
page_size | 4 | 每頁顯示數量 |
num_columns | 4 | 每頁顯示列 |
三,關鍵程式碼:
@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);//頁面內容介面卡 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);//指示器引入外部佈局,可知指示器內容可根據需求設定,多樣化 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);//頁面內容與指示器關聯
四,左右滑動頁面內容介面卡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 為資料內容實體類,不做介紹
五,內容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>