Question

我的全屏活动应如下所示：

enter image description here

大白圈会有一些文字，我已经做过，但问题是我不知道如何在图标之间做虚线，他们也想在图标中加一点动画，所以我假设每个人都应该是一个单独的视图，到目前为止我已经完成了这个（它不需要看起来完全一样）：

enter image description here

那么，我怎么画这些线？此外，如果我可以使破折号“运行”，那么线条就会很棒。

这是我的xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rlt_welcome"
    android:layout_weight="9"
    android:background="@drawable/bg"
    >

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="2"
        android:orientation="vertical"
        android:padding="10dp"
        android:layout_height="match_parent">
        <ImageView
            android:layout_width="wrap_content"
            android:id="@+id/img_youtube"
            android:src="@drawable/youtube_circle"
            android:layout_marginTop="60dp"
            android:layout_marginRight="60dp"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:src="@drawable/tablet_circle"
            android:layout_height="wrap_content"
            android:layout_above="@+id/img_stats"
            android:layout_marginRight="30dp"
            android:layout_below="@+id/img_youtube"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:id="@+id/img_stats"
            android:src="@drawable/stats_circle"
            android:layout_height="wrap_content"
            android:layout_marginRight="70dp"
            android:layout_marginBottom="20dp"
            android:layout_alignParentBottom="true"/>

        <ImageView
            android:id="@+id/img_iphone"
            android:layout_width="wrap_content"
            android:src="@drawable/iphone_circle"
            android:layout_height="wrap_content"
            android:layout_marginLeft="60dp"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:src="@drawable/imac_circle"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img_iphone"
            android:layout_marginLeft="70dp"
            android:layout_marginTop="-30dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:src="@drawable/webcam_circle"
            android:layout_height="wrap_content"
            android:layout_marginLeft="60dp"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="5"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:padding="40dp"
            android:textSize="25sp"
            android:textColor="@color/text1"
            android:layout_margin="20dp"
            android:text="Bienvenido"
            android:background="@drawable/flat_circle"
            android:id="@+id/txt_welcome"
            android:layout_centerInParent="true" />

    </RelativeLayout>
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="match_parent"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/arrow_circle"
            android:id="@+id/img_arrow"
            android:layout_alignParentTop="true"
            android:layout_marginRight="60dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/news_circle"
            android:layout_below="@+id/img_arrow"
            android:layout_marginTop="-90dp"
            android:layout_marginRight="2dp"
            android:layout_marginLeft="70dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/line_circle"
            android:id="@+id/img_line"
            android:layout_below="@+id/img_arrow"
            android:layout_marginTop="-10dp"
            android:layout_marginRight="70dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/money_circle"
            android:layout_below="@+id/img_line"
            android:layout_marginRight="6dp"
            android:layout_marginTop="-70dp"
            android:layout_marginLeft="70dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/mouse_circle"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginRight="80dp"
            />
    </RelativeLayout>
</LinearLayout>

Answer 1

请检查一下，这可能对您有所帮助

http://www.rengelbert.com/tutorial.php?id=182

Answer 2

我如何完成这项工作，我创建了一个包含Canvas控制器的新活动，并将位图放在画布上并用它绘制它们之间的线，我没有使用任何外部库：希望有人可以重用一些代码，而不仅仅是被告知google它。

<强> MainActivty.java

$(document).ready(function ($) {

        var myLatLng = new google.maps.LatLng(document.getElementById('Latitude').value, document.getElementById('Longitude').value);
        var marker = new google.maps.Marker({ position: myLatLng, visible: true });

        function init_map() {

            var myOptions = {
                zoom: 14,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
            marker.setMap(map);

            $(window).resize(function () {
                google.maps.event.trigger(map, 'resize');
            });

            $('#accordion > .panel').on('show.bs.collapse', function (e) {
                google.maps.event.trigger(map, 'resize');
                google.maps.event.addListener(marker, "click", function () { infowindow.open(map, marker); });
                var heading = $(this).find('.panel-heading');
                heading.addClass("active-panel");
            });

            $('#accordion > .panel').on('hidden.bs.collapse', function (e) {
                var heading = $(this).find('.panel-heading');
                heading.removeClass("active-panel");
                google.maps.event.trigger(map, 'resize');
                google.maps.event.addListener(marker, "click", function () { infowindow.open(map, marker); });

            })
        }


        google.maps.event.addDomListener(window, 'load', init_map);


    });

<强> Panel.java

@Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        relativeMainActivity = (RelativeLayout) findViewById(R.id.rlt_main);
        DisplayMetrics dm = new DisplayMetrics();
        this.getWindowManager().getDefaultDisplay().getMetrics(dm);

        final int heightS = dm.heightPixels;
        final int widthS = dm.widthPixels;

        Log.d("MainActvitiy", "widht:" + widthS);
        myPanel = new Panel(getApplicationContext(),this,widthS, heightS);
        relativeMainActivity.addView(myPanel);

        RelativeLayout RR = new RelativeLayout(this);
        RR.setGravity(Gravity.CENTER);
        relativeMainActivity.addView(RR,400,150);
        RR.setX(0);           
        LayoutInflater myInflater = (LayoutInflater) getApplicationContext().getSystemService(getApplicationContext().LAYOUT_INFLATER_SERVICE);
    }

}

<强> Background.java

public class Panel extends SurfaceView implements SurfaceHolder.Callback {

public MainThread thread;
private Background background;
private CircleManager CM;    
public int ScreenWidth;
public int Screenheigt;
private CircleIcon icon1;
private CircleIcon icon2;
private CircleIcon icon3;
//and so on
public MainActivity myMain;


public Panel(Context context, MainActivity _main,  int width , int height) {
    super(context);
    getHolder().addCallback(this);
    this.myMain = _main;
    this.ScreenWidth=width;
    this.Screenheigt=height;
    thread = new MainThread(getHolder(),this);
    background = new Background(BitmapFactory.decodeResource(getResources(), R.drawable.bg), Screenheigt, this);
    CM = new CircleManager( this,context,ScreenWidth);
    CM.setScreen(ScreenWidth, Screenheigt);
    SetIcons();
    CM.setManager();
    setFocusable(true);                     
}

void SetIcons()
{
    icon1 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_iphone),39,40);
    icon2 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_chat),280,40);
    icon3 = new CircleIcon(BitmapFactory.decodeResource(getResources(),R.drawable.circle_youtube),60,200);
    //and so on

    icon1.myConnections.add(2);
    icon1.myConnections.add(3);
    icon2.myConnections.add(15);
    icon3.myConnections.add(4);
    icon3.myConnections.add(5);
    //and so on



    CM.iconsList.add(icon1);
    CM.iconsList.add(icon2);
    CM.iconsList.add(icon3);
    //and so on
}

void Draw(Canvas canvas){
    if (canvas!=null)
    {
        background.draw(canvas);
        CM.draw(canvas);
        iconEvent.draw(canvas);
    }
}

void Update(float dt)
{
CM.Update(dt);
}


@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {      

}

@Override
public void surfaceCreated(SurfaceHolder holder) {
    // TODO Auto-generated method stub
    thread.setRunning(true);
    thread.start();
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
    // TODO Auto-generated method stub
    boolean retry = true;
    while (retry) 
    {
        try
        {
            thread.join();
            retry=false;
        } 
        catch (InterruptedException e)
        {
        }
    }
}

<强> CircleIcon.java

public class Background {
    Bitmap BackBitmap;
    int x,y;
    int ScreenHeight;    
    Panel root_panel;

    public Background(Bitmap bitmap , int Screen_h, Panel _panel) {
        this.BackBitmap = bitmap;
        this.x=0;
        this.y=0;
        this.ScreenHeight=Screen_h;        
        root_panel =_panel;
    }

    public void draw(Canvas canvas)
    {        
      canvas.drawBitmap(BackBitmap,x,y, null);       
    }    
}

<强> CircleManager.java

public class CircleIcon {

private Bitmap bitmap;
private int x;
private int y;
CircleManager circManager;
ArrayList<Integer> myConnections;

public int getX() {
    return x;
}

public void setX(int x) {
    this.x = x;
}

public int getY() {
    return y;
}
public void setY(int y) {
    this.y=y;

}


 public CircleIcon(Bitmap icon, int x, int y) {
    bitmap=icon;
    this.x=x;
    this.y=y;
    myConnections = new ArrayList<>();
}

public ArrayList<Integer> getMyConnections() {
    return myConnections;
}

public void setMyConnections(ArrayList<Integer> myConnections) {
    this.myConnections = myConnections;
}

public void setManager(CircleManager icManager) {
    circManager = icManager;

}

public Bitmap getBitmap() 
{
    return bitmap;
}

public void setBitmap(Bitmap bitmap) {
    this.bitmap = bitmap;
}

public void draw(Canvas canvas) {

    canvas.drawBitmap(bitmap, x, y, null);      
}

public void update()
{
        // x=+1; example
}                   
}

绘制虚线并制作动画

2 个答案: