2016-05-04 18 views
1

Dies sollte ein sehr nützliches Beispiel für jeden sein, der diesen Thread liest. Ich versuche, eine asynchrone Aufgabe zu erstellen, die einen vorhandenen Platz mit Bildern in einem ImageView übernimmt und sie durch die exakt gleiche Größe, aber anderes Bild ersetzt.Mehrere Bilder/Kreisdiagramm Aktualisierung

Insbesondere möchte ich einige statische Bilder anzeigen, dann aktualisieren Sie sie mit Live-Daten von einem Remote-Server, sondern skalieren sie auch, was auch immer die aktuelle Größe angezeigt wird.

Von der Haupttätigkeit, wir würden es rufen Sie einfach mit der Image die wir aktualisieren möchten:

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

Als nächstes müssen wir den Server kontaktieren, ein JSON-Objekt mit unseren Charts greifen, und die Bilder zu aktualisieren. Ich fürchte, ich weiß einfach nicht genug über Java und Android, um alles miteinander zu verbinden. Dies ist die aktuelle heiße Verwirrung habe ich los jetzt:

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

auch hier das Layout einschließlich:

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

Die Karten arbeiten bestätigt. Es wird die aktuellen Größen der Platzhalter greifen und ein Tortendiagramm erstellen, damit es übereinstimmt, so dass ein Teil des Codes in Ordnung ist. Ich brauche nur ein wenig Hilfe, um den Rest dieses Chaos zu organisieren, und es übersteigt einfach meine Fähigkeiten.

Antwort

0

Nun, niemand kam zur Rettung, aber ich war in der Lage, es selbst herauszufinden. Hier ist der fertige, getestete Code.

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

Und noch etwas, um sie anzuzeigen auf:

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

Jetzt kann es aus der Haupttätigkeit wie folgt aufgerufen werden:

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

eine Stimme Geben Sie mir, wenn irgendetwas davon bewiesen sinnvoll!