Android开发-仿Soul社交应用首页3D星球视图旋转样式

https://blog.csdn.net/fukaimei/article/details/107938681

前言

前段时间看到Soul社交应用首页的3D星球视图旋转样式（如下图），所以就想自己能不能实现一个类似的功能。本着不要重复造轮子的原则，所以在网上找有没有开源的轮子，果然真找到有大神开源的依赖库，大神开源的依赖库如下：https://github.com/misakuo/3dTagCloudAndroid，那么下面看看如何实现仿Soul社交应用首页3D星球视图旋转样式的功能。

编码实现

首先在AS的内层build.gradle里添加3d星球视图旋转样式的依赖

dependencies {........// 3d星球视图旋转样式implementation 'com.moxun:tagcloudlib:1.2.0'
}

添加 Layout 布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#12121F"tools:context=".MainActivity"><com.moxun.tagcloudlib.view.TagCloudViewandroid:id="@+id/mTagCloudView"android:layout_width="match_parent"android:layout_height="match_parent"app:autoScrollMode="uniform"app:radiusPercent="0.8"app:scrollSpeed="1" /></androidx.constraintlayout.widget.ConstraintLayout>

xml布局文件中的<com.moxun.tagcloudlib.view.TagCloudView />就是用来加载3D星球视图旋转的视图的。

设置3d星球视图Adapter

自定义的适配器Adapter要继承TagsAdapter，代码如下：/**
* 3d星球View适配器
*/

public class TagCloudViewAdapter extends TagsAdapter {private Context mContext;private List<StarModel> mList;private LayoutInflater inflater;public TagCloudViewAdapter(Context mContext, List<StarModel> mList) {this.mContext = mContext;this.mList = mList;inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);}/*** 返回Tag数量** @return*/@Overridepublic int getCount() {return mList.size();}/*** 返回每个Tag实例** @param context* @param position* @param parent* @return*/@Overridepublic View getView(Context context, int position, ViewGroup parent) {StarModel model = mList.get(position);View mView = null;ViewHolder viewHolder = null;if (mView == null) {viewHolder = new ViewHolder();//初始化ViewmView = inflater.inflate(R.layout.layout_3d_item, null);//初始化控件viewHolder.iv_star_icon = mView.findViewById(R.id.iv_star_icon);viewHolder.tv_star_name = mView.findViewById(R.id.tv_star_name);mView.setTag(viewHolder);} else {viewHolder = (ViewHolder) mView.getTag();}if (!TextUtils.isEmpty(model.getPhotoUrl())) {RequestOptions options = new RequestOptions().placeholder(R.drawable.ic_user).error(R.drawable.ic_user);Glide.with(mContext).load(model.getPhotoUrl()).apply(options).into(viewHolder.iv_star_icon);} else {viewHolder.iv_star_icon.setImageResource(R.drawable.ic_user);}viewHolder.tv_star_name.setText(model.getNickName());return mView;}/*** 返回Tag数据** @param position* @return*/@Overridepublic Object getItem(int position) {return mList.get(position);}/*** 针对每个Tag返回一个权重值，该值与ThemeColor和Tag初始大小有关；* 一个简单的权重值生成方式是对一个数N取余或使用随机数** @param position* @return*/@Overridepublic int getPopularity(int position) {return 7;}/*** Tag主题色发生变化时会回调该方法** @param view* @param themeColor*/@Overridepublic void onThemeColorChanged(View view, int themeColor) {}class ViewHolder {private ImageView iv_star_icon;private TextView tv_star_name;}}

其中继承后回调以下几个方法和作用如下：
public int getCount() —> 返回Tag数量；
public View getView(Context context, int position, ViewGroup parent) —> 返回每个Tag实例；
public Object getItem(int position) —> 返回Tag数据；
public int getPopularity(int position) —> 针对每个Tag返回一个权重值，该值与ThemeColor和Tag初始大小有关；一个简单的权重值生成方式是对一个数N取余或使用随机数；
public void onThemeColorChanged(View view,int themeColor) —> Tag主题色发生变化时会回调该方法。

加载视图

在Activity或者Fragment设置视图的适配器数据以及加载视图，代码以下：

// 设置适配器数据

mTagCloudViewAdapter = new TagCloudViewAdapter(this, mStarModelList);
mTagCloudView.setAdapter(mTagCloudViewAdapter);

设置 3d Tag View 条目点击事件

// 设置 3d Tag View 条目点击事件

mTagCloudView.setOnTagClickListener(new TagCloudView.OnTagClickListener() {@Overridepublic void onItemClick(ViewGroup parent, View view, int position) {String userId = mStarModelList.get(position).getUserId();String nickName = mStarModelList.get(position).getNickName();Toast.makeText(MainActivity.this, String.format("用户id：%s；用户昵称：%s", userId, nickName), Toast.LENGTH_LONG).show();}
});

相关的定制属性如下：
属性   xml   代码   值类型
自动滚动   app:autoScrollMode   setAutoScrollMode(int mode)   enum [disable,uniform,decelerate]
半径百分比   app:radiusPercent   setRadiusPercent(float percent)   float [0,1]
滚动速度   app:scrollSpeed   setScrollSpeed(float scrollSpeed)   float [0,+]
起始颜色   app:lightColor   setLightColor(int color)   int
终止颜色   app:darkColor   setDarkColor(int color)   int

完整的代码以下：

public class MainActivity extends AppCompatActivity {@BindView(R.id.mTagCloudView)TagCloudView mTagCloudView;private TagCloudViewAdapter mTagCloudViewAdapter;private List<StarModel> mStarModelList = new ArrayList<>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ButterKnife.bind(this);// 获取用户数据getData();// 设置适配器数据mTagCloudViewAdapter = new TagCloudViewAdapter(this, mStarModelList);mTagCloudView.setAdapter(mTagCloudViewAdapter);// 设置 3d Tag View 条目点击事件mTagCloudView.setOnTagClickListener(new TagCloudView.OnTagClickListener() {@Overridepublic void onItemClick(ViewGroup parent, View view, int position) {String userId = mStarModelList.get(position).getUserId();String nickName = mStarModelList.get(position).getNickName();Toast.makeText(MainActivity.this, String.format("用户id：%s；用户昵称：%s", userId, nickName), Toast.LENGTH_LONG).show();}});}/*** 模拟从网络获取100条用户数据*/private void getData() {if (mStarModelList != null) mStarModelList.clear();for (int i = 0; i < 100; i++) {StarModel data = new StarModel();data.setUserId("" + i);data.setNickName("彼岸雨敲窗" + i);data.setPhotoUrl("https://fukaimei.oss-cn-beijing.aliyuncs.com/images/ic_user.png?x-oss-process=style/thumb");mStarModelList.add(data);}}}

界面运行效果图如下：

Android开发-仿Soul社交应用首页3D星球视图旋转样式相关推荐

android动画送礼物,Android开发仿映客送礼物效果
这里写链接内容仿映客送小礼物的特效,顺便复习一下属性动画,话不多说先看效果图. 需求分析可以看到整个动画有几部分组成,那我们就把每个部分拆分出来各个击破. 1.要显示那些内容以及内容间的位置关系? ...
android 仿简书评论,Android 开发仿简书登录框可删除内容或显示密码框的内容
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
Android点击按钮显示密码,Android 开发仿简书登录框可删除内容或显示密码框的内容...
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
Android OpenGL 仿自如 APP 裸眼 3D 效果
概述之前看到自如团队发布的自如客APP裸眼3D效果的实现 ,非常有趣,不久后,社区内 Android 的开发者们陆续提供了 Flutter. Android 原生 .Android Jetpa ...
卷起来了！Android OpenGL仿自如APP裸眼3D效果
/ 今日科技快讯 / 近日,"乘联会"微信公众号发布消息,2021年12月新能源乘用车市场多元化发力,厂商批发销量突破万辆的企业有14家,较前期大幅增多,其中:比亚迪933 ...
Android开发笔记（一百三十三）导航视图NavigationView
导航视图NavigationView 很多App都有个人中心的侧滑菜单,通常在页面左侧边缘右拉时,即可弹出个人中心的菜单页面.对于Android来说,侧滑功能用到了抽屉布局DrawerLayout,我 ...
android录音声波动画,Android开发:仿微信录音声波
最近在仿微信开发聊天界面:开发到一个有意思的小东西,简单写一写.就是录音声波这块. 首先先添加几个图片添加如上三个声波图表之后建立一个数组 private int[] images = {R.mi ...
云炬Android开发笔记 10主界面-首页UI与数据解析器开发（RecyclerView）
阅读目录 1.创建首页UI 1.1 检查依赖是否存在 1.2 布局 1.3 控件查找 2.首页下拉刷新实现 2.1[初始化] 2.2 封装刷新功能 2.3 加载数据的处理 3. 首页数据结构分析 3. ...
3.Android高仿网易云音乐-首页复杂发现界面布局和功能
0.效果图效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 1.整 ...

Android开发-仿Soul社交应用首页3D星球视图旋转样式

Android开发-仿Soul社交应用首页3D星球视图旋转样式相关推荐

最新文章

热门文章