页面指​​示器上的图像大小不同

Question

我正在努力实现看起来像这样的轮播页面指示符：

我试图实现这一点，例如将selector xml绘制到ImageView中，如下所示：

selector_carousel_page_indicator.xml dwalable：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" >
    <shape android:shape="oval">
        <solid android:color="@color/lightBlue" />
        <size android:width="5dp" android:height="5dp" />
    </shape>
</item>
<item android:state_selected="false">
        <shape android:shape="oval" >
            <solid android:color="@color/gray" />
            <size android:width="8dp" android:height="8dp" />
        </shape>
</item>

为每个页面添加drawable

for (int i = 0; i < adapter.getCount(); i++) {
    ImageView obj = new ImageView(getContext());
    obj.setImageResource(R.drawable.selector_carousel_page_indicator);
    obj.setPadding(0, 0, 5, 0); // left, top, right, bottom
    llPageIndicatorContainer.addView(obj);
    carouselPageIndicators.add(obj);
}

llPageIndicatorContainer只是LinearLayout

<LinearLayout
     android:id="@+id/PageIndicatorLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center"
     android:layout_below="@+id/ViewPagerCarousel"
     android:layout_margin="@dimen/pageIndicatorMargin"
     android:orientation="horizontal"/>

但是这些点的大小与以下相同。

任何想法可能出错或如何实现理想的观点？

Answer 1

我不会使用<size>标记来定义两种不同的尺寸，而是使用<inset>标记：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <shape android:shape="oval">
            <solid android:color="@color/lightBlue"/>
        </shape>
    </item>

    <item>
        <inset
            android:insetRight="1.5dp"
            android:insetLeft="1.5dp"
            android:insetTop="1.5dp"
            android:insetBottom="1.5dp">
            <shape android:shape="oval">
                <solid android:color="@color/gray"/>
            </shape>
        </inset>
    </item>

</selector>

然后我将为您的图像创建一个布局资源，而不是在Java中构建它，这允许您在布局中定义大小：

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="8dp"
    android:layout_height="8dp"
    android:layout_marginRight="5dp"
    android:src="@drawable/circle_selector"/>

然后你可以像以前一样完成通货膨胀：

LayoutInflater inflater = LayoutInflater.from(getContext());

for (int i = 0; i < adapter.getCount(); i++) {
    View obj = inflater.inflate(R.layout.pager_indicator, llPageIndicatorContainer, false);
    llPageIndicatorContainer.addView(obj);
    carouselPageIndicators.add(obj);
}