Android实现九宫格横向左右滑动
作者:zuo_er_lyf 时间:2022-03-06 13:09:47
项目中大多都会有很多的分类,且左右滑动,如美团首页(下图):
不难发现包含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>
属性说明:
三、关键代码:
@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>
来源:https://blog.csdn.net/zuo_er_lyf/article/details/81740630
标签:Android,九宫格,滑动
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SpringAop实现原理及代理模式详解
2023-04-23 21:28:41
Android TextView显示Html类解析的网页和图片及自定义标签用法示例
2023-06-12 04:39:41
Spring Boot Thymeleaf实现国际化的方法详解
2023-11-24 06:01:01
![](https://img.aspxhome.com/file/2023/8/59008_0s.png)
java实现马踏棋盘算法(骑士周游问题)
2022-03-17 20:29:46
![](https://img.aspxhome.com/file/2023/1/94361_0s.jpg)
eclipse下配置Spring环境的方法步骤
2023-02-27 20:39:26
![](https://img.aspxhome.com/file/2023/5/78355_0s.png)
浅谈JAVA并发之ReentrantLock
2022-10-22 10:03:33
![](https://img.aspxhome.com/file/2023/7/87367_0s.jpg)
java锁synchronized面试常问总结
2023-08-01 05:11:37
![](https://img.aspxhome.com/file/2023/7/57917_0s.png)
详解jeefast和Mybatis实现二级联动的问题
2022-11-10 05:10:15
![](https://img.aspxhome.com/file/2023/3/116823_0s.png)
OpenCV实现直线拟合
2023-06-22 15:22:37
![](https://img.aspxhome.com/file/2023/4/92494_0s.jpg)
Android自定义实现可滑动按钮
2021-10-21 08:24:11
C语言进制转换代码分享
2021-10-16 15:39:23
Kotlin协程flowOn与线程切换超详细示例介绍
2022-11-06 08:31:51
![](https://img.aspxhome.com/file/2023/0/138000_0s.png)
Spring JDK动态 代理实现过程详解
2023-11-16 19:42:15
![](https://img.aspxhome.com/file/2023/2/59392_0s.png)
Android仿支付宝上芝麻信用分雷达图
2023-04-21 18:44:30
![](https://img.aspxhome.com/file/2023/7/137137_0s.jpg)
Android开发签名知识梳理总结
2023-03-15 03:52:02
![](https://img.aspxhome.com/file/2023/9/116049_0s.png)
java小数位的例子
2023-11-30 02:37:12
如何使用C# Stopwatch 测量微秒级精确度
2021-09-14 04:31:04
Mybatis-Plus查询中如何排除标识字段
2023-11-23 20:38:46
![](https://img.aspxhome.com/file/2023/5/64555_0s.png)
C#生成word记录实例解析
2023-09-10 00:17:33
使用Springboot 打jar包实现分离依赖lib和配置
2023-01-29 18:35:29
![](https://img.aspxhome.com/file/2023/7/76537_0s.png)