如何做出这样的看法?其实我尝试了可绘制的视图，但无法获得它 [英] How to make a view like this ? Actually I tried with drawable views but can't get it

问题描述

我想使设计像图像一样，并且还要在手机和7英寸标签上显示相同的设计. 我使用线性布局，是通过使用Framlayout在屏幕的5个部分中划分视图来画一条线，但是无法实现像这样的图像.

I want to make the design like image and also display same in phone and 7 inch tab. I am using Linear layout by dividing the view in 5 part of the screen with using Framlayout draw a line but not possible to achieve like this image.

还有什么其他选择，例如使用画布或其他更好的选择.

What's the other option like using canvas or any other better option.

第一张图片正在显示预期结果. 另外两个正在取得结果.

First Image is displing expected result. and other two are getting result.

     <?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>

推荐答案

这在画布中更容易，更清洁.这是第一个方法..您可以对其他两个方法稍加修改来复制它.

This is easier and cleaner in canvas. Here is how you would do the first one.. You can replicate this with slight modifications for the other two.

创建画布视图:

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);
    }
 }

}

创建一个布局以保留该视图并在您的活动中调用该视图:

Create a layout to hold the view and call this view in your activity:

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

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

哎呀，我忘了. :-)请在CanvasView类中添加此方法以声明边界框并设置布局:

oops, I forgot . :-) Please add this method in CanvasView class to declare the bounding box and set the layout:

@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:

Change onDraw as follows:

@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);


    }
}

这篇关于如何做出这样的看法?其实我尝试了可绘制的视图，但无法获得它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！