序文

Compose ライブラリには、ViewPager や Banner に似たネイティブコントロールはありません。Google は「ViewPager」を公式にリリースしましたが、まだテストバージョンです。

implementation "com.google.accompanist:accompanist-pager:0.24.2-alpha"

では、「ViewPager」(ComposePager) と Banner を自分で実装してみましょう。

文章

ComposePager

まず、ComposePager の効果を見てください。

コードも非常に単純です。

APIを見てください：

/**
 * 类似于xml中的ViewPager
 * @param pageCount 一共有多少页
 * @param modifier 修饰
 * @param composePagerState ComposePager的状态
 * @param orientation 滑动的方向
 * @param userEnable 用户是否可以滑动,等于false时用户滑动无反应,但代码可以执行翻页
 * @param pageCache 左右两边的页面缓存,默认左右各缓存1页,但不能少于1页(不宜过大)
 * @param content compose内容区域
 */
@Composable
fun ComposePager(
    pageCount: Int,
    modifier: Modifier = Modifier,
    composePagerState: ComposePagerState = rememberComposePagerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    pageCache: Int = 1,
    content: @Composable ComposePagerScope.() -> Unit
)

このうち、composePagerState は ComposePager の状態で、内部状態を監視または変更する必要がない場合は、デフォルトのものを使用できます。

原理：

RecyclerView と ViewPager を参照すると、常に 3 つの View を持つことに相当し、最初の View が上 (左側) 側に配置され、2 つ目の View が中央に表示され、3 つ目の View が下 (右) 側に配置されます。 . 2枚のスライドが出てきて、手を離した後、動くアニメーションが実行され、3つのビューの状態がリセットされます

バナー

サンプルコード:

API:

/**
 * 可以自动循环轮播的ComposePager
 * [pageCount]一共有多少页
 * [modifier]修饰
 * [bannerState]Banner的状态
 * [orientation]滑动的方向
 * [userEnable]用户是否可以滑动,等于false时用户滑动无反应,但代码可以执行翻页
 * [autoScroll]是否自动滚动
 * [autoScrollTime]自动滚动间隔时间
 * [content]compose内容区域
 */
@Composable
fun Banner(
    pageCount: Int,
    modifier: Modifier = Modifier,
    bannerState: BannerState = rememberBannerState(),
    orientation: Orientation = Orientation.Horizontal,
    userEnable: Boolean = true,
    autoScroll: Boolean = true,
    autoScrollTime: Long = 3000,
    content: @Composable BannerScope.() -> Unit
)

原理：

このうち、ComposePager は内部で使用されており、受信した pageCount*n を無限ループに変更してから、内部でコルーチンを開き、ComposePager の State を呼び出し続けて次のページの API に切り替え、Banner を実現します。

PagerIndicator

/**
 * 适用于Pager的指示器
 * @param size 指示器数量
 * @param offsetPercentWithSelect 选中的指示器的偏移百分比
 * @param selectIndex 选中的索引
 * @param indicatorItem 未被选中的指示器
 * @param selectIndicatorItem 被选中的指示器
 * @param modifier 修饰
 * @param margin 指示器之间的间距
 * @param orientation 指示器排列方向
 */
@Composable
fun PagerIndicator()

画像バナー

/**
 * 展示图片的Banner
 * @param imageSize 图片数量
 * @param imageContent 放置图片的content
 * @param indicatorItem 未被选中的指示器,如果为null则不展示指示器
 * @param selectIndicatorItem 被选中的指示器,如果为null则不展示指示器
 * @param modifier 修饰
 * @param bannerState Banner的状态
 * @param orientation 滑动的方向
 * @param autoScroll 是否自动滚动
 * @param autoScrollTime 自动滚动间隔时间
 */
@Composable
fun ImageBanner()

プロジェクトのインポート

ルートプロジェクトの build.gradle ファイルに追加します。

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        ...
    }
}

これをアプリの build.gradle に追加します。最新バージョンの参照: JitPack | Publish JVM and Android libraries

dependencies{
    ...
    implementation 'com.github.ltttttttttttt:ComposeViews:1.1.4'
}

その後、ComposePager と Banner を快適に使用できます

このプロジェクトはオープンソースです。スターへようこそ: GitHub - ltttttttttttt/ComposeViews

また、プロジェクトには ComposePager だけでなく、次のようなより便利な Compose コンポーネントもあります。

フローレイアウト

GoodTextField と PasswordTextField

より多くの Compose コンポーネントが後で追加されます

終わり

Compose の「ViewPager」とバナー

序文

文章

ComposePager

バナー

PagerIndicator

画像バナー

プロジェクトのインポート

おすすめ