安卓仿陌陌用户详情页轮播图联动效果

代码是写在fragment中所以需要创建fragmet 也可以复制到activity中使用

public class SquareFragment extends Fragment{//加载viewprivate View view;private SquareFragmentPersenter squareFragmentPersenter;@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {view = LayoutInflater.from(getContext()).inflate(R.layout.square_fragment,null);squareFragmentPersenter = new SquareFragmentPersenter(view,getContext(),getActivity());return view;}}

实体bean类

public class TestDetailBean {/*** int : imageId* boolean : isSelect*/private List<DataBean> data;public List<DataBean> getData() {return data;}public void setData(List<DataBean> data) {this.data = data;}public static class DataBean {private Integer imageId;private boolean isSelect;public Integer getImageId() {return imageId;}public void setImageId(Integer imageId) {this.imageId = imageId;}public boolean isSelect() {return isSelect;}public void setSelect(boolean select) {isSelect = select;}}
}

对应于fragment中创建的persenter类

public class SquareFragmentPersenter implements UserDetailRecAdapter.OnItemClickListener{private View view;private Context context;private Activity activity;//recyclerviewprivate RecyclerView detailRec;private ViewPager detailViewPager;private List<Integer> list = new ArrayList<>();private UserDetailBannerAdapter detailBannerAdapter;private UserDetailRecAdapter detailRecAdapter;private TestDetailBean.DataBean testDetailBean;private List<TestDetailBean.DataBean> recList = new ArrayList<>();public SquareFragmentPersenter(View sview, Context scontext, Activity sactivity) {this.view = sview;this.context = scontext;this.activity = sactivity;initLayoutId();}//初始化idpublic void initLayoutId() {detailViewPager = view.findViewById(R.id.user_detail_viewpager);detailRec = view.findViewById(R.id.user_detail_rec);initData();}//初始化数据public void initData() {for (int i = 0; i < 10; i++) {list.add(R.drawable.test);}detailBannerAdapter = new UserDetailBannerAdapter(context, list);detailViewPager.setAdapter(detailBannerAdapter);detailViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {
//                MageLog.e("chrn", "当前 position = " + position);for (int i = 0; i < recList.size(); i++) {if (i == position) {recList.get(i).setSelect(true);//设置位置detailRec.smoothScrollToPosition(i);} else {recList.get(i).setSelect(false);}}detailRecAdapter.notifyDataSetChanged();}@Overridepublic void onPageScrollStateChanged(int state) {}});for (int i = 0; i < 10; i++) {testDetailBean = new TestDetailBean.DataBean();testDetailBean.setImageId(R.drawable.test);if (i == 0) {testDetailBean.setSelect(true);} else {testDetailBean.setSelect(false);}recList.add(testDetailBean);}CenterLayoutManager manager = new CenterLayoutManager(context);manager.setOrientation(RecyclerView.HORIZONTAL);detailRecAdapter = new UserDetailRecAdapter(context, recList,this);detailRec.setLayoutManager(manager);detailRec.setAdapter(detailRecAdapter);//        MageLog.e("chrn", recList.size() + "-----");for (int i = 0; i < recList.size(); i++) {MageLog.e("chrn", recList.get(i).isSelect() + "---" + i);}}@Overridepublic void onClick(int i) {detailViewPager.setCurrentItem(i);detailRec.smoothScrollToPosition(i);}}

下面这段代码是解决根本问题的也就是recyclerview设置位置会出现闪动的问题值得参考

/** Author : Chen* Date : 2021-03-02* Time : 17:27* Email : Libertyed@163.com* smoothScrollToPosition* 自定义 layoutmanger 解决 recycler 默认 layoutmanger 方法 smoothScrollToPosition 调用时闪动的问题*/import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.LinearSmoothScroller;
import androidx.recyclerview.widget.RecyclerView;public class CenterLayoutManager extends LinearLayoutManager {public CenterLayoutManager(Context context) {super(context);}public CenterLayoutManager(Context context, int orientation, boolean reverseLayout) {super(context, orientation, reverseLayout);}public CenterLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);}@Overridepublic void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {RecyclerView.SmoothScroller smoothScroller = new CenterSmoothScroller(recyclerView.getContext());smoothScroller.setTargetPosition(position);startSmoothScroll(smoothScroller);}private static class CenterSmoothScroller extends LinearSmoothScroller {public CenterSmoothScroller(Context context) {super(context);}@Overridepublic int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd, int snapPreference) {return (boxStart + (boxEnd - boxStart) / 2) - (viewStart + (viewEnd - viewStart) / 2);}@Overrideprotected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {//这里默认layoutmanger是20f 会出现闪动问题return 100f / displayMetrics.densityDpi;}}}

适配器 adapter 里面

public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position, @NonNull List payloads)

这个方法可以自己去查然后了解下

public class UserDetailRecAdapter extends RecyclerView.Adapter {private Context context;private List<TestDetailBean.DataBean> list;private static final int TRUE_TYPE = 1;private static final int FALSE_TYPE = 2;private OnItemClickListener listener;public UserDetailRecAdapter(Context context, List<TestDetailBean.DataBean> list, OnItemClickListener listener) {this.context = context;this.list = list;this.listener = listener;}@Overridepublic int getItemViewType(int position) {if (list.get(position).isSelect()) {MageLog.e("chrn", "当前 select 状态" + list.get(position).isSelect() + "---positon" + position);return TRUE_TYPE;} else {MageLog.e("chrn", "当前 select 状态" + list.get(position).isSelect() + "---positon" + position);return FALSE_TYPE;}}@NonNull@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = null;RecyclerView.ViewHolder holder = null;
//        MageLogswitch (viewType) {case TRUE_TYPE:view = LayoutInflater.from(context).inflate(R.layout.user_detail_rec_adapter_true_image, null);holder = new ViewHolderTrue(view);break;case FALSE_TYPE:view = LayoutInflater.from(context).inflate(R.layout.user_detail_rec_adapter_false_image, null);holder = new ViewHolderFalse(view);break;}return holder;}@Overridepublic void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position, @NonNull List payloads) {if (payloads.isEmpty()) {onBindViewHolder(holder, position);} else {if (holder instanceof ViewHolderTrue) {Glide.with(context).load(list.get(position).getImageId()).apply(RequestOptions.bitmapTransform(new CircleCrop())).into(((ViewHolderTrue) holder).imageTrue);((ViewHolderTrue) holder).imageTrue.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {listener.onClick(position);}});} else {Glide.with(context).load(list.get(position).getImageId()).into(((ViewHolderFalse) holder).imageFalse);((ViewHolderFalse) holder).imageFalse.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {listener.onClick(position);}});}}}@Overridepublic void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {if (holder instanceof ViewHolderTrue) {Glide.with(context).load(list.get(position).getImageId()).apply(RequestOptions.bitmapTransform(new CircleCrop())).into(((ViewHolderTrue) holder).imageTrue);((ViewHolderTrue) holder).imageTrue.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {listener.onClick(position);}});} else {Glide.with(context).load(list.get(position).getImageId()).into(((ViewHolderFalse) holder).imageFalse);((ViewHolderFalse) holder).imageFalse.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {listener.onClick(position);}});}}@Overridepublic int getItemCount() {return list.size();}public class ViewHolderFalse extends RecyclerView.ViewHolder {private final ImageView imageFalse;public ViewHolderFalse(@NonNull View itemView) {super(itemView);imageFalse = itemView.findViewById(R.id.user_detail_rec_image_false);}}public class ViewHolderTrue extends RecyclerView.ViewHolder {private final ImageView imageTrue;public ViewHolderTrue(@NonNull View itemView) {super(itemView);imageTrue = itemView.findViewById(R.id.user_detail_rec_image_true);}}public interface OnItemClickListener {void onClick(int i);}}

接下来就是布局文件 square_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="300dp"><androidx.viewpager.widget.ViewPagerandroid:background="@color/color_99CFFF"android:id="@+id/user_detail_viewpager"android:layout_width="match_parent"android:layout_height="300dp"></androidx.viewpager.widget.ViewPager><LinearLayoutandroid:layout_alignParentBottom="true"android:background="@color/f_FF0D0D_translucent_49"android:layout_width="match_parent"android:layout_height="120dp"android:gravity="center_vertical"><androidx.recyclerview.widget.RecyclerViewandroid:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:id="@+id/user_detail_rec"android:background="@color/primary"android:layout_width="match_parent"android:layout_height="80dp"></androidx.recyclerview.widget.RecyclerView></LinearLayout></RelativeLayout></LinearLayout>

user_detail_rec_adapter_false_image.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><ImageViewandroid:layout_marginLeft="10dp"android:id="@+id/user_detail_rec_image_false"android:layout_width="80dp"android:layout_height="80dp"></ImageView></LinearLayout>

user_detail_rec_adapter_true_image.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"><ImageViewandroid:layout_marginLeft="10dp"android:id="@+id/user_detail_rec_image_true"android:layout_width="80dp"android:layout_height="80dp"></ImageView></LinearLayout>

到这基本就是完成了因为项目不需要类似于陌陌的放大动画效果所以没有写这里只是提供分享使用没有问题

安卓仿陌陌用户详情页轮播图联动效果相关推荐

仿淘宝详情页轮播图效果实现
仿淘宝详情页轮播图效果实现图片路径记得修改.js源文件记得导入! <!doctype html> <head> <meta charset="UTF-8 ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”七、redis数据库缓存页面数据、使用NUXT框架搭建前台系统环境、前台系统页面、首页轮播图（banner数据显示）、首页热门课程，名师推荐
文章目录一.NUXT前台环境搭建 1.如何学习NUXT 2.下载安装使用NUXT入门模板starter-template 3.机制二.编写静态页面 1.设置布局(首尾固定,中间用nuxt引用组件) ...
路飞学城项目之首页轮播图定时更新、课程页面前端及课程表分析
文章目录 1.首页轮播图定时更新(使用celery) 2.课程页面前端 3.课程表分析 3.1.课程表相关模型(实战课为例) 3.2.课程表数据录入 3.3.课程分类接口 3.3.课程分类前端展示(对 ...
六十六、实现Vue项目首页轮播图（vue-awesome-swiper）
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/22 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
基于Redis优化首页轮播图查询
@ApiOperation(value = "获取首页轮播图列表", notes = "获取首页轮播图列表", httpMethod = "GET&q ...
（转）淘淘商城系列——首页轮播图展示
http://blog.csdn.net/yerenyuan_pku/article/details/72848306 上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉 ...
UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息
UI交互设计一."新建" 常见的颜色模式: 颜色模式,是将某种颜色表现为数字形式的模型,或者说是一种记录图像颜色的方式.分为:RGB模式.CMYK模式.HSB模式.Lab颜色模式 ...
[原型设计]Axure制作首页轮播图片切换效果
1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...

安卓仿陌陌用户详情页轮播图联动效果

安卓仿陌陌用户详情页轮播图联动效果相关推荐

最新文章

热门文章