在设计布局中创建多个圆圈并以编程方式在其上添加小圆圈？

Question

您好，我正在尝试创建一个在屏幕中心有多个圆圈的布局。然后以编程方式在其上添加小圆圈。

创建这样的布局

下面是我尝试实现这些但没有成功的代码。

循环 XML 代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="8px">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#c2c2c2" />
                    <padding
                        android:bottom="6px"
                        android:left="6px"
                        android:right="6px"
                        android:top="6px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#e3e3e3" />
                    <padding
                        android:bottom="4px"
                        android:left="4px"
                        android:right="4px"
                        android:top="4px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#d1d1d1" />
                    <padding
                        android:bottom="3px"
                        android:left="3px"
                        android:right="3px"
                        android:top="3px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#e2e2e2" />
                    <padding
                        android:bottom="2px"
                        android:left="2px"
                        android:right="2px"
                        android:top="2px" />
                </shape>
            </item>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#a2a2a2" />
                    <padding
                        android:bottom="1px"
                        android:left="1px"
                        android:right="1px"
                        android:top="1px" />
                </shape>
            </item>
        </layer-list>
    </item>
</layer-list>

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:background="@drawable/circle"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Circle1"/>

</LinearLayout>

我的布局图像像这样

如何创建这样的布局。给我一些提示来实现这样的布局。

在此致谢

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_centerInParent="true"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="@drawable/circle"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

    <TextView
        android:id="@+id/large_volume"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/yellow_circle"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF"
        android:textSize="10dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/medium_volume"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@drawable/green_circle"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF"
            android:textSize="10dp" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/small_volume"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/circle"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF"
            android:textSize="10dp" />
        <RelativeLayout
            android:id="@+id/small_circle"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        </RelativeLayout>
    </RelativeLayout>

    </RelativeLayout>
    </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Answer 2

我创建了一个自定义视图。你可以从中得到帮助

attrs.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomLineDotsView">
    <attr name="viewColor" format="color" />
    <attr name="paddingPercentage" format="float"/>
    <attr name="circleRadius" format="integer"></attr>
</declare-styleable>

自定义视图类

   public class CustomLineDotsView extends View {

private int viewColor,circleRadius;
float paddingPercentage;
Paint viewPaint;

public CustomLineDotsView(Context context,AttributeSet attrs) {
    super(context);

    viewPaint = new Paint();
    //get the attributes specified in attrs.xml using the name we included
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
            R.styleable.CustomLineDotsView, 0, 0);
    try {
        //get the text and colors specified using the names in attrs.xml
        viewColor = a.getInteger(R.styleable.CustomLineDotsView_viewColor, 0);
           paddingPercentage =       a.getFloat(R.styleable.CustomLineDotsView_paddingPercentage, 0);//0 is default
        circleRadius = a.getInteger(R.styleable.CustomLineDotsView_circleRadius, 0);

    } finally {
        a.recycle();
    }


}


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int measuredWidth = getMeasuredWidth();
    int measuredHeight = getMeasuredHeight();

    viewPaint.setColor(viewColor);
    viewPaint.setStyle(Paint.Style.FILL);


    canvas.drawCircle(((measuredWidth * paddingPercentage) / 100), measuredHeight / 2, circleRadius, viewPaint);
    canvas.drawCircle((measuredWidth - ((measuredWidth * paddingPercentage) / 100)), measuredHeight / 2, circleRadius,viewPaint);

    canvas.drawLine(
            ((measuredWidth * paddingPercentage) / 100),
            (measuredHeight / 2),
            (measuredWidth - ((measuredWidth * paddingPercentage) / 100)), (measuredHeight/2),viewPaint);

}


}

如何在你的布局中使用这个视图

                <yourpackagename.CustomLineDotsView
                android:layout_width="match_parent"
                android:layout_height="24dp"
                card_view:circleRadius="8"
                card_view:paddingPercentage="20"
                card_view:viewColor="@color/login_background" />

点击此链接供您参考

http://developer.android.com/guide/topics/ui/custom-components.html http://www.vogella.com/tutorials/AndroidCustomViews/article.html http://code.tutsplus.com/tutorials/android-sdk-creating-custom-views--mobile-14548