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

前 言

前段时间看到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.TagCloudView
        android: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
     */
    @Override
    public int getCount() {
        return mList.size();
    }

    /**
     * 返回每个Tag实例
     *
     * @param context
     * @param position
     * @param parent
     * @return
     */
    @Override
    public 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();
            //初始化View
            mView = 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
     */
    @Override
    public Object getItem(int position) {
        return mList.get(position);
    }

    /**
     * 针对每个Tag返回一个权重值，该值与ThemeColor和Tag初始大小有关；
     * 一个简单的权重值生成方式是对一个数N取余或使用随机数
     *
     * @param position
     * @return
     */
    @Override
    public int getPopularity(int position) {
        return 7;
    }

    /**
     * Tag主题色发生变化时会回调该方法
     *
     * @param view
     * @param themeColor
     */
    @Override
    public 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() {
     @Override
     public 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<>();

    @Override
    protected 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() {
            @Override
            public 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);
        }

    }

}

界面运行效果图如下：

apk安装包下载体验地址：

可以扫描以下二维码进行下载安装，或者点击以下链接 http://app.fukaimei.top/3dTagView 进行下载安装体验。

———————— The end ————————

码字不易，如果您觉得这篇博客写的比较好的话，可以赞赏一杯咖啡吧~~

---

Demo程序源码下载地址一（GitHub）
Demo程序源码下载地址二（码云）