如何制作这样的视图？其实我试过可绘制的视图但无法得到它

Question

我想让设计像图像一样，并且在 phone 和 7 英寸选项卡中也显示相同。我通过使用 Framlayout 画一条线将视图分成屏幕的 5 个部分来使用线性布局，但不可能像这张图片那样实现。

其他选择是什么，比如使用 canvas 或任何其他更好的选择。

第一张图片显示了预期结果。其他两个正在取得结果。

     <?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
    android:angle="360.0"
    android:endColor="#A29AA4"
    android:startColor="#A29AA4" />
  </shape>

布局下方

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:weightSum="5">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle1"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle2"
                        android:layout_width="20dp"
                        android:layout_height="20dp"

                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle3"
                        android:layout_width="20dp"
                        android:layout_height="20dp"

                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle4"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center">

                    <View
                        android:id="@+id/mView_circle5"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:background="@drawable/circleshape" />
                </LinearLayout>
            </LinearLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="center_vertical"
                android:background="#A29AA4">

            </RelativeLayout>

        </FrameLayout>

Answer 1

这在 canvas 中更简单、更清晰。这是第一个的操作方法。您可以对其他两个稍作修改来复制它。

创建一个 Canvas 视图：

public class CanvasView  extends View {

Paint bPaint;
RectF coordbounds;

public CanvasView(Context context) {
    super(context);
}

private void init()
{
    bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    bPaint.setColor(Color.BLACK);
}

@Override
public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

     canvas.drawLine(coordbounds.left,coordbounds.centerY(),
     coordbounds.right,coordbounds.centerY(),bPaint);

    int circledia=20;

    //Divide the line into four segments and subtract 2 * half the      radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 *   circledia/2);
    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);
    for(int i=0; i<4;i++)
    {
        canvas.drawCircle(coordbounds.left + circledia/2 +
         (i*interlinesegments),
         coordbounds.centerY(),10,bPaint);
    }
 }

}

创建一个布局来保存视图并在您的 activity:

中调用此视图

LinearLayout layout = (LinearLayout) findViewById(R.id.root);

    CanvasView view = new CanvasView(this);
    layout.addView(view);

糟糕，我忘了。 :-) 请在 CanvasView class 中添加此方法以声明边界框并设置布局：

@Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {

    float xpad = (float) (getPaddingLeft() + getPaddingRight());
    float ypad = (float) (getPaddingTop() + getPaddingBottom());
    float coww = 0.0f, cohh = 0.0f, coll = 0.0f;
    init();
    coww = (float) w - xpad;
    cohh = (float) h - ypad;

    // Create a bounding box

    coordbounds = new RectF(0.0f,0.0f,
            coww,cohh);
}

编辑：更改位图的上述方法

private void init()
{
    bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    bPaint.setColor(Color.BLACK);

    bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.button);
}

改变onDraw如下：

@Override
public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

    canvas.drawLine(coordbounds.left,coordbounds.centerY(),
    coordbounds.right,coordbounds.centerY(),bPaint);

    int rectwidth=bitmap.getWidth();
    int rectheight=bitmap.getHeight();


    //Divide the line into four segments and subtract 2 * half the radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 * rectwidth/2);

    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);


    for(int i=0; i<4;i++)
    {


        float left= coordbounds.left + (i * interlinesegments);
        float top= coordbounds.centerY()-rectheight/2;
        float right = coordbounds.left+(i *    interlinesegments)+rectwidth;
        float bottom= coordbounds.centerY()+ rectheight/2;

       canvas.drawBitmap(bitmap,null,new RectF(left,top,right,bottom),null);


    }
}

Answer 2

在上面的代码和之前的代码的帮助下，我做了这个圆形和位图的组合。

   @Override
    public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

    canvas.drawLine(coordbounds.left, coordbounds.centerY(),
            coordbounds.right, coordbounds.centerY(), bPaint);

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_myprofile);

    int rectwidth=bitmap.getWidth();
    int rectheight=bitmap.getHeight();


    //Divide the line into four segments and subtract 2 * half the radii
    float actualspan_image = (coordbounds.right - coordbounds.left) - (2 * rectwidth/2);

    //Segment the line into 3 parts
    float interlinesegments_bitmap = actualspan_image / (4 - 1);


    int circledia = 20;

    //Divide the line into four segments and subtract 2 * half the      radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 *   circledia/2);
    //Segment the line into 3 parts
    float interlinesegments = actualspan/(4-1);

    for(int i=0; i<4;i++)
    {
        float left= coordbounds.left + (i * interlinesegments_bitmap);
        float top= coordbounds.centerY()-rectheight/2;
        float right = coordbounds.left+(i *    interlinesegments_bitmap)+rectwidth;
        float bottom= coordbounds.centerY()+ rectheight/2;

        if(i==1){
            canvas.drawBitmap(bitmap,null,new RectF(left,top,right,bottom),null);
        }else{
            canvas.drawCircle(coordbounds.left + circledia / 2 +
                            (i * interlinesegments),
                    coordbounds.centerY(), 10, bPaint);
        }


    }
}

如何制作这样的视图？其实我试过可绘制的视图但无法得到它

How to make a view like this ? Actually I tried with drawable views but can't get it

layout

android

view