新年兔兔送祝福——SearchRabbit(安卓app)

·  阅读 1921
新年兔兔送祝福——SearchRabbit(安卓app)

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

前言

2023年到来,今年过年格外早,没几天就要迎新年了,因为是兔年,所以我创建了一个Rabbit为主题的App,里面以兔子为主题而添加各种相关内容,目前仅有十条2023兔年祝福语,后面会增加其他功能,下面,我们看看这个App的样子。

正篇

UI设计

首先,这个App因为这两天才创建的,所以只是UI上看起来和兔子相关,内容并不是很充实。主要是找了一张兔子的图片做App的logo,以及找了几张动态图作为app内部的装饰UI,如下:

Snipaste_2023-01-15_21-52-02.png

untitled.gif

勉强符合此次“兔了个兔”的主题。

内容设计

内部我是利用LottieAnimation去展示动图(让UI忙碌的安卓Lottie动画渲染库(一) - 掘金 (juejin.cn) & 让UI忙碌的安卓Lottie动画渲染库(二) - 掘金 (juejin.cn)),然后使用之前掘友推荐的刘强东写的列表神器BRV(liangjingkanji/BRV: [文档详细] Android上最好的RecyclerView框架, 比 BRVAH 更简单强大 (github.com)),琢磨了半天最后还是没有成功使用库作者推荐的DataBinding方式,我使用RecyclerView中使用BRV去加载10条祝福语。

这是使用作者推荐方式后运行不起来的截图: b836e43f4f40f6754d0fef16e041dd0.png 看文档上的解决方法依次尝试还是没成功,所以还是采用ViewBinding的方式了。

代码与效果展示

部分XML布局如下,我虽然启用了DataBinding但目前还不会用,所以我也同时启用了ViewBinding:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
       ...
       ...

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/rabbit_easter_egg_slider"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="center"
            app:lottie_autoPlay="true"
            app:lottie_fileName="lottie/rabbit_easter_egg_slider.json"
            app:lottie_loop="true"
            app:lottie_repeatMode="restart" />

        <androidx.core.widget.NestedScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            tools:ignore="SpeakableTextPresentCheck">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

            ...
            ...

                <com.airbnb.lottie.LottieAnimationView
                    android:id="@+id/rabbit_2023"
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:layout_gravity="center"
                    app:lottie_autoPlay="true"
                    app:lottie_fileName="lottie/rabbit_2023.json"
                    app:lottie_loop="true"
                    app:lottie_repeatMode="restart" />
            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/vMainList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </androidx.recyclerview.widget.RecyclerView>

    </LinearLayout>
</layout>
复制代码

我的activity中部分代码如下,很笨拙地使用列表的方式存了10条祝福语,后面还会优化一下并加上复制按钮:

...
...

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var text = arrayOf("兔年!...",
    ...
    ....,
    ....,
    ....")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        window.attributes.softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN

        binding.vMainList.linear().setup {
            addType<SimpleModel>(R.layout.item_simple)
            setAnimation(AnimationType.SLIDE_BOTTOM)

            onBind {
                val binding = getBinding<ItemSimpleBinding>() // 使用ViewBinding/DataBinding都可以使用本方法
                binding.tvName.text = getModel<SimpleModel>().name
            }
        }.models = getData()

    }

    private fun getData(): MutableList<Any> {
        // 在Model中也可以绑定数据
        return mutableListOf<Any>().apply {
            for (i in 1..10) {
                val simpleModel = SimpleModel(
                    "$i、${text[i-1]}"
                    , i)
                add(simpleModel)
//            add(SimpleModel())
            }


        }
    }
}
复制代码

运行后目前只可以滑动查看列表:

1111.gif

项目代码

总之就是这个App目前还非常简陋,但是已经放到了GitHub上了,后续会逐渐添加优化一些功能和代码。

项目地址:ObliviateOnline/RabbitApp: 2023 rabbit app (github.com)

总结

本来是想做一个搜索类的App,结果发现做着做着就偏离了方向,但是本来就是为了新年添个彩头,又是自己弄着玩的,加之看起来还是像那么回事,所以就这么直接发出来献丑了,希望大家喜欢!

分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改