2016-05-04 18 views
1

これは、このスレッドを読んでいる人にとっては非常に便利な例です。私はImageView内の写真を保持しているいくつかの既存の場所を取って、まったく同じサイズ、しかし異なる絵でそれらを置き換える非同期タスクを作成しようとしています。複数の画像/円グラフの更新

具体的には、いくつかの静的ピクチャを表示してから、リモートサーバーからのライブデータでそれらを更新するだけでなく、現在のサイズが表示されているものにスケーリングする必要があります。

主な活動から、我々は単に私たちが更新したいImageViewののでそれを呼び出します。

public class MainActivity extends Activity { 

    @Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    drawPieCharts((ImageView) findViewById(R.id.chart1),(ImageView) findViewById(R.id.chart2),(ImageView) findViewById(R.id.chart3)); 
} 

次は、サーバーに連絡し、私たちのチャートでJSONオブジェクトをつかむと、イメージを更新する必要があります。私は、JavaとAndroidについて十分に知りません。

public class drawPieCharts(ImageView... imageViews){ 

int[] COLORS={0xff00ff00,0xff00ee00,0xff00dd00,0xff00cc00,0xff000000};//alpha r g b 
int[] slices={300,400,100,200,500}; 


@Override 
    protected void onPreExecute(){ 
    //String charts="{\"charts\":[{\"chart\":1, \"colors\":[0,1,2,3,4], \"slices\":[300,400,100,200,500]},{\"chart\":2, \"colors\":[0,1,2,3,4], \"slices\":[200,100,400,200,500]},{\"chart\": 3, \"colors\":[0,1,2,3,4], \"slices\":[200,100,400,200,200]}]}"; 
    try{ 
     JSONObject obj = new JSONObject(charts); 
     JSONArray jsonArray = obj.optJSONArray("charts"); 

     for(int i=0; i < jsonArray.length(); i++){ 
      JSONObject chartData = jsonArray.getJSONObject(i); 
      JSONObject chart = chartData.optJSONObject("chart"); 
      JSONArray colors = chartData.optJSONArray("colors"); 
      JSONArray slices = chartData.optJSONArray("slices"); 
      new DrawPieChart(chartViews[chart]); 
     } 
     }catch(JSONException e){e.printStackTrace();} 

    String jsonReply = ""; 
     try { 
      URL url = new URL(url_to_server); 
      HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection(); 

      InputStream stream = new BufferedInputStream(urlConnection.getInputStream()); 
      BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(stream)); 
      StringBuilder builder = new StringBuilder(); 

      String inputString; 
      while ((inputString = bufferedReader.readLine()) != null) { 
       builder.append(jsonReply); 
      } 

      JSONObject charts = new JSONObject(builder.toString()); 
      JSONObject chart = charts.getJSONObject("chart"); 

      urlConnection.disconnect(); 

     } catch (IOException | JSONException e) { 
      e.printStackTrace(); 
     } 

ImageView imageView = null; 

    @Override 
    protected doInBackground() { 
     this.imageView = imageViews[0]; 
     return updateChart(); 
    } 

    @Override 
    protected void onPostExecute(Bitmap result) { 
     for(
     imageView.setImageBitmap(result); 
    } 

private Bitmap updateChart() { 
    Bitmap bmp = Bitmap.createBitmap(imageView.getDrawable().getIntrinsicHeight(),imageView.getDrawable().getIntrinsicHeight(), Bitmap.Config.ARGB_8888);//w h config 

    Canvas canvas = new Canvas(bmp); 
    RectF box = new RectF(2, 2,bmp.getWidth()-2 , bmp.getHeight()-2); 

    //get value for 100% 
    int sum = 0; 
    for (int slice : slices) { 
     sum += slice; 
    } 
    //initalize painter 
    Paint paint = new Paint(); 
    paint.setAntiAlias(true); 

    paint.setStyle(Paint.Style.STROKE); 
    paint.setStrokeWidth(1f); 
    paint.setStyle(Paint.Style.FILL_AND_STROKE); 
    float start = 0; 
    //draw slices 
    for(int i =0; i < slices.length; i++){ 
     paint.setColor(COLORS[i]); 
     float angle; 
     angle = ((360.0f/sum) * slices[i]); 
     canvas.drawArc(box, start, angle, true, paint); 
     start += angle; 
    } 
    return bmp; 
} 
} 

をまたここでは、レイアウトを含む:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    > 

<ImageView 
    android:id="@+id/chart1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:scaleType="centerInside" 
    android:adjustViewBounds="true" 
    android:layout_weight="1" 
    android:src="@drawable/chart_place_holder" 
    /> 
<ImageView 
android:id="@+id/chart2" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
    android:scaleType="centerInside" 
    android:adjustViewBounds="true" 
    android:layout_weight="1" 
    android:src="@drawable/chart_place_holder" 
    /> 
<ImageView 
android:id="@+id/chart3" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
    android:scaleType="centerInside" 
    android:adjustViewBounds="true" 
    android:layout_weight="1" 
    android:src="@drawable/chart_place_holder" 
    /> 

</LinearLayout> 
<TextView 
android:id="@+id/textView" 
android:text="data" android:layout_width="wrap_content" 
android:layout_height="wrap_content" android:layout_centerInParent="true" 
android:textSize="28sp"/> 

</LinearLayout> 

チャートは作業確認されているこれは、私が今起こっている現在のホット混乱です。プレースホルダの現在のサイズを取得して一致するように円グラフを作成するので、コードの一部がうまくいきます。私はちょうどこの混乱の残りを整理するのに少し助けを必要とし、それは単に私のスキルセットを超えています。

答えて

0

まあ、誰も救助に来なかったが、私は自分でそれを理解することができた。ここに完成した、テスト済みのコードです。

public class DrawPieCharts{ 
private final int[] COLORS = {0xff000000, 0xaa000000, 0xffff0000, 0xffff8800, 0xffffff00, 0xff00ff00, 0xff00dd00, 0xff00bb00, 0xff009900};//alpha r g b 

ImageView[]chart_image=new ImageView[3]; 
TextView[]chart_text=new TextView[3]; 
String chart_data; 
int[]chart_labels=new int[3]; 


public DrawPieCharts(ImageView[] chart_image, TextView[] chart_text, String chart_data){ 
    this.chart_image=chart_image; 
    this.chart_text=chart_text; 
    this.chart_data=chart_data; 
    if(chart_data == null){return;} 

    try{ 
     JSONObject obj = new JSONObject(chart_data);  // String charts="{\"charts\":[{\"chart_value\":10000, \"colors\":[4,5,6,7,0], \"slices\":[3000,3500,2500,1000,300]},{\"chart_value\":5000, \"colors\":[1,4,0], \"slices\":[4000,4500,300]},{\"chart_value\": 54.2, \"colors\":[4,0], \"slices\":[6000,4000]}]}"; 
     JSONArray jcharts = obj.getJSONArray("charts"); 

     for (int i = 0; i < jcharts.length(); i++){ 
      JSONObject chartData = jcharts.getJSONObject(i); 
      chart_labels[i] = chartData.getInt("value"); 

      //convert to normal array 
      JSONArray jcolors = chartData.getJSONArray("colors"); 
      int[] colors = new int[jcolors.length()]; 
      for (int c = 0; c < jcolors.length(); c++){ 
       colors[c] =COLORS[jcolors.getInt(c)]; 
      } 

      //convert to normal array 
      JSONArray jslices = chartData.getJSONArray("slices"); 
      int[] slices = new int[jslices.length()]; 
      for (int s = 0; s < jslices.length(); s++){ 
       slices[s] = jslices.getInt(s); 
      } 

      // Draw pie chart 
      DrawPieChart(chart_image[i], chart_text[i], colors, slices, String.valueOf(chart_labels[i])); 
     } 
    } catch (JSONException e){ 
     e.printStackTrace(); 
    }; 
} 

private void DrawPieChart(ImageView ImageView,TextView TextView, int [] colors,int [] slices, String label){ 
    Bitmap bmp = Bitmap.createBitmap(ImageView.getDrawable().getIntrinsicHeight(),ImageView.getDrawable().getIntrinsicHeight(), Bitmap.Config.ARGB_8888);//w h config 
    float scale = bmp.getDensity(); 

    Canvas canvas = new Canvas(bmp); 
    int width=bmp.getWidth()-2; 
    int height=bmp.getHeight()-2; 
    int centerX=width/2; 
    int centerY=height/2; 
    RectF box = new RectF(2,2,width,height); 

    //get value for 100% 
    int sum = 0; 
    for (int slice : slices){ 
     sum += slice; 
    } 
    //initalize painter 
    Paint paint = new Paint(); 
    paint.setAntiAlias(true); 

    paint.setStyle(Paint.Style.STROKE); 
    paint.setStrokeWidth(1f); 
    paint.setStyle(Paint.Style.FILL_AND_STROKE); 
    float start = -90;//start at top of pie 
    //draw slices 
    for(int i =0; i < slices.length; i++){ 
     paint.setColor(colors[i]); 
     float angle; 
     angle = ((360f/sum) * slices[i]); 
     canvas.drawArc(box, start, angle, true, paint); 

     paint.setColor(0xFF000000); 
     start += angle; 
    } 

    start = -90;//start at top of pie 

    //draw labels - Must be drawn on top of slices 
    for(int i =0; i < slices.length-1; i++){ 
     float angle; 
     angle = ((360f/sum) * slices[i]); 

     paint.setColor(0xFF000000); 
     paint.setTextAlign(Paint.Align.CENTER); 
     paint.setTextSize((int) (scale/3));// text size in pixels 
     //paint.setShadowLayer(1f, 0f, 1f, 0x66FFFFFF);// text shadow 
     float radius = centerX/1.5f;//Center text inside pie slice fat end to pointed end - X 
     int center = (int) (start+angle/2);//Center text inside pie slice fat end, top to bottom - Y 
     int textX = (int)(radius * Math.cos(center * Math.PI/180F)) + centerX; 
     int textY = (int)(radius * Math.sin(center * Math.PI/180F)) + centerY; 
     start += angle; 
     if(angle<30){continue;}//too small to print text on, so just skip it. 
     canvas.drawText(String.valueOf(slices[i]), textX, textY, paint); 

    } 

    ImageView.setImageBitmap(bmp); 
    TextView.setText(label); 
} 
} 

そして上でそれを表示するには何か:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/RootView" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@drawable/bg_image"> 

<ScrollView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:padding="10dp" 
    android:fillViewport="false"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center" 
      android:background="#cc000000" 
      android:orientation="horizontal" 
      > 

      <!-- chart title --> 
      <TextView 
       android:text="CHART ONE" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:textSize="16sp" 
       android:layout_weight="1" 
       /> 
      <TextView 
       android:text="CHART TWO" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:textSize="16sp" 
       android:layout_weight="1" 
       /> 
      <TextView 
       android:text="CHART THREE" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:textSize="16sp" 
       android:layout_weight="1" 
       /> 

     </LinearLayout> 

     <!-- charts --> 
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      android:background="#AA000000" 
      android:gravity="center" 
      > 

      <ImageView 
       android:id="@+id/chart_1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:layout_weight="1" 
       android:src="@drawable/default_piechart" 
       /> 
      <ImageView 
       android:id="@+id/chart_2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:layout_weight="1" 
       android:src="@drawable/default_piechart" 
       /> 
      <ImageView 
       android:id="@+id/chart_3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:layout_weight="1" 
       android:src="@drawable/default_piechart" 
       /> 

     </LinearLayout> 

     <!-- chart values --> 
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:gravity="center" 
      android:background="#AA000000" 
      android:orientation="horizontal" 
      > 

      <TextView 
       android:id="@+id/chart_value_1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:text="-" 
       android:textSize="16sp" 
       android:layout_weight="1" 
       /> 
      <TextView 
       android:id="@+id/chart_value_2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:text="-" 
       android:textSize="16sp" 
       android:layout_weight="1" 
       /> 
      <TextView 
       android:id="@+id/chart_value_3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:adjustViewBounds="true" 
       android:gravity="center" 
       android:text="-" 
       android:textSize="16sp" 
     android:layout_weight="1" 
     /> 
     </LinearLayout> 
    </LinearLayout> 
    </ScrollView> 
</RelativeLayout> 

今では、このような主な活動から呼び出すことができます。これのいずれかが証明した場合

ImageView [] chart_image = new ImageView[3]; 
    TextView [] chart_text = new TextView[3]; 
    chart_image[0] = (ImageView) findViewById(R.id.chart_1); 
    chart_image[1] = (ImageView) findViewById(R.id.chart_2); 
    chart_image[2] = (ImageView) findViewById(R.id.chart_3); 

    chart_text[0] = (TextView) findViewById(R.id.chart_value_1); 
    chart_text[1] = (TextView) findViewById(R.id.chart_value_2); 
    chart_text[2] = (TextView) findViewById(R.id.chart_value_3); 

    String chart_data= "\"charts\": [{ \"value\": \"Chart 1 Value\", \"colors\": [5, 6, 7, 8, 1], \"slices\": [938, 2927, 2271, 557, 5507] }, { \"value\": \"Chart 2 Value\", \"colors\": [4, 8, 1, 1], \"slices\": [5492, 41701, 1507] }, { \"value\": 9999, \"colors\": [8, 1], \"slices\": [7000, 3000] }] "; 

    new DrawPieCharts(chart_image, chart_text, chart_data); 

は私に投票を放棄有用!