androidplot 的边框问题

本文详细介绍了如何使用AndroidPlot库调整边框大小、类型及颜色,通过修改代码和XML布局实现美观的图表展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

androidplot 的边框问题

1. 首先来张效果图,有那个朋友知道设置顶点的大小和顶点的类型吗?




2.下面是自己的代码:

 void creat_curve_line()
    {
   
//getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE,WindowManager.LayoutParams.FLAG_SECURE);

// initialize our XYPlot reference:
plot = (XYPlot) getView().findViewById(R.id.mySimpleXYPlot);

// Create a couple arrays of y-values to plot:
Number[] series1Numbers = {5,4,3,5,7,8, 5, 6, 7, 4,9,7,5,8};

// Turn the above arrays into XYSeries':
XYSeries series1 = new SimpleXYSeries(
Arrays.asList(series1Numbers),          // SimpleXYSeries takes a List so turn our array into a List
SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, // Y_VALS_ONLY means use the element index as the x value
null);                             // Set the display title of the series

// Create a formatter to use for drawing a series using LineAndPointRenderer
LineAndPointFormatter series1Format = new LineAndPointFormatter(Color.argb(0xff,0x22,0xaa,0xff), 

Color.GREEN, null ,null);

Paint lineFill = new Paint();
        lineFill.setAlpha(200);
        lineFill.setShader(new LinearGradient(0, 0, 0, 500 , Color.argb(0xff,0xff,0xff,0xff), 
        Color.argb(0xff,0xaa,0xcc,0xff), Shader.TileMode.MIRROR));
        
        series1Format.setFillPaint(lineFill);


        plot.addSeries(series1, series1Format);

//plot.setBorderStyle(Plot.BorderStyle.NONE, null, null); 
plot.setRangeLowerBoundary(0, BoundaryMode.FIXED);
plot.setTicksPerRangeLabel(1);

plot.setPadding(0, 0, 0, 0);
plot.setPlotMargins(0, 0, 0, 0);
plot.setBorderStyle(Plot.BorderStyle.SQUARE, null, null);






    }

3.xml文件


<com.androidplot.xy.XYPlot
            android:id="@+id/mySimpleXYPlot"
            android:layout_width="fill_parent"          
            android:layout_height="fill_parent"
       
            android:layout_marginTop="0px"
    android:layout_marginLeft="0px"
    android:layout_marginRight="0px"


       androidPlot.backgroundPaint.color="#FFFFFF"
       androidPlot.borderPaint.color="#FFFFFF"
       androidPlot.graphWidget.backgroundPaint.color="#FFFFFF"
       androidPlot.graphWidget.domainGridLinePaint.color="#FFFFFF"
       androidPlot.graphWidget.domainLabelPaint.color="#646383"
  
  androidPlot.graphWidget.gridBackgroundPaint.color="#FFFFFF"


       androidPlot.graphWidget.rangeLabelPaint.color="#646383"


   
            androidPlot.graphWidget.marginTop="10dp"
            androidPlot.graphWidget.marginLeft="5dp"
            androidPlot.graphWidget.marginBottom="10dp"
            androidPlot.graphWidget.marginRight="0dp"
                  
            androidPlot.titleWidget.labelPaint.textSize="@dimen/title_font_size"
            androidPlot.domainLabelWidget.labelPaint.textSize="@dimen/domain_label_font_size"
            androidPlot.rangeLabelWidget.labelPaint.textSize="@dimen/range_label_font_size"


            androidPlot.graphWidget.rangeLabelPaint.textSize="@dimen/range_tick_label_font_size"
            androidPlot.graphWidget.rangeOriginLabelPaint.textSize="@dimen/range_tick_label_font_size"
            androidPlot.graphWidget.domainLabelPaint.textSize="@dimen/domain_tick_label_font_size"
            androidPlot.graphWidget.domainOriginLabelPaint.textSize="@dimen/domain_tick_label_font_size"
            androidPlot.legendWidget.textPaint.textSize="@dimen/legend_text_font_size"


            
            />

4.Androidplot官方边框设置文档

Borders, Margins and Padding


Borders, Margins and Padding

We try to keep these pages as up to date as possible, but typos are inevitable, especially immediately following new releases. If you spot an error, please let us know either in the forums or shoot an email to oops@androidplot.com. Thanks!

Last Updated For: Androidplot 0.3c

Overview

The Box Model

Figure 1: The box model

AndroidPlot’s Interpretation of the Box Model

AndroidPlot diverges from the classic box model in one key area; borders don’t live in their own layer as shown above. Instead, they overlap the margin and padding sections evenly; if you had a border of 3 pixels, 1.5 pixels of the border would be drawn on the inner border of the margin layer and 1.5 pixels of the border would also be drawn on the outer border of the padding layer.

To further illustrate this let’s start with a basic XYPlot. Working with the SimpleXYPlotExample, lets modify res/layout/main.xml to make our plot fill the screen and have no external borders:

<com.androidplot.xy.XYPlot
    android:id="@+id/mySimpleXYPlot"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="0px"
    android:layout_marginLeft="0px"
    android:layout_marginRight="0px"
    title="A Simple XYPlot Example"
/>

Figure 2: An XYPlot with markup disabled.

Enabling Markup

Now let’s take a look at what’s going on with the margins and padding within AndroidPlot. The easiest way to do this is to let AndroidPlot draw some markup guides for us. Drawing markup is actually enabled by default in AndroidPlot and is disabled programatically – you’ll probably even recognize this line from all the sample applications so far:

plot.disableAllMarkup();

In the case of the plot above, if we comment this line out we will see this:

Figure 3: An XYPlot with markup enabled.

You will notice that there are now some green lines and squares as well as some blue and yellow borders. The green lines represent widgets positioned within the plot, the tiny green squares represent their points of origin, the yellow fill represents a margin and the blue fill represents padding. You can just barely see the margin and padding along the outer edge of the plot; by default both are set to 3px on all four sides. You will also notice a fairly thick margin on the top, left and bottom of the graph section of the plot. This is the padding applied to the graph “widget”. Widgets are sub-components positioned inside of the plot area. Each has it’s own box model associated with it which is visible in markup mode. Most widgets have a margin and padding of 0.

Modifying Margins and Padding

To make the padding and margins around the edge of the plot a little easier to see, let’s increase both to 10 pixels. Padding and margin values can be set for each edge independently or in a single method call as shown here:

plot.setPlotMargins(10, 10, 10, 10);
plot.setPlotPadding(10, 10, 10, 10);

Which gives us this:

Figure 4: An XYPlot with markup enabled and 10px padding/border.

Now it’s a little easier to see our plot’s margins and padding. Notice how the border overlaps the inner edge of the margin layer and the outer edge of the padding layer. As mentioned above, this is the major divergence from the classic box model. This will probably change some time in the future but for now that’s how it is.

Next, let’s try to get rid of as much of the margins and padding as possible to maximize our graph area.

First, we set our plot’s margins and padding to 0:

plot.setPlotMargins(0, 0, 0, 0);
plot.setPlotPadding(0, 0, 0, 0);

Looking at figure 4, we notice that there’s quite a bit of unnecessary margin space on the top and right of the graph. Let’s remove that space and while we are at it lets switch to a square border for our plot and disable markup again:

plot.getGraphWidget().setMarginTop(2);
plot.getGraphWidget().setMarginRight(2);
plot.setBorderStyle(Plot.BorderStyle.SQUARE, null, null);
plot.disableAllMarkup();

Which gives us this:

Figure 5: A more space efficient XYPlot.



                          


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值