左右滑动卡片布局（ViewPager+RadioGroup）

最新推荐文章于 2024-05-12 09:38:39 发布

芒果蜜桃π

最新推荐文章于 2024-05-12 09:38:39 发布

阅读量1.8k

点赞数 3

分类专栏： Android之路文章标签： android viewpager 卡片滑动 radiogroup

本文链接：https://blog.csdn.net/An_nAl/article/details/77005596

版权

本文介绍了如何在Android中使用ViewPager和RadioGroup创建一个可以左右滑动的卡片布局。详细步骤包括：设置圆点指示器的选中状态，构建主界面布局，设计卡片视图，定义卡片切换效果，配置卡片视图的宽高比例，以及编写相关Activity代码。

摘要由CSDN通过智能技术生成

效果如图所示：

1.选择某个界面时，对应的第几个小圆点亮：

通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="@color/app_green_area" />
            <corners android:radius="5dp" />

        </shape>
    </item>
    <item android:state_checked="false">
        <shape>
            <solid android:color="#fff" />
            <corners android:radius="5dp" />
            <stroke android:width="0.2dp"
                android:color="@color/app_line"/>
        </shape>
    </item>
</selector>

2.主界面布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@color/app_gray_bg">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="25sp"
            android:textColor="@color/colorPrimary"
            android:text="health页面"/>
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_gravity="center"
            android:overScrollMode="never"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <RadioGroup
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:id="@+id/group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="horizontal">

        <RadioButton
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/selector_point"
            android:button="@null" />

        <RadioButton
            android:layout_width="10dp"
            android:layout_height="10dp"