CS 491 Lecture 5 – Easier GUIs and Callbacks
Agenda
- the GUI development algorithm
- ClickAndSee on iOS
- ClickAndSee on Android
TODO
- Read sections Overview, Layouts, Input Controls, and Input Events in the Android documentation.
- Read Apple’s UI element documentation.
- 1/4 sheet.
Code
ViewController.m
//
// ViewController.m
// ClickAndSee
//
// Created by Johnson, Christopher R on 9/17/13.
// Copyright (c) 2013 Johnson, Christopher R. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (weak, readonly, nonatomic) IBOutlet UIButton *alertButton;
@property (weak, readonly, nonatomic) IBOutlet UIActivityIndicatorView *progressView;
@property (weak, readonly, nonatomic) IBOutlet UIImageView *imageView;
@end
@implementation ViewController
@synthesize alertButton = _alertButton;
@synthesize progressView = _progressView;
@synthesize imageView = _imageView;
- (void)viewDidLoad {
[super viewDidLoad];
[self.alertButton addTarget:self action:@selector(didPressAlert) forControlEvents:UIControlEventTouchUpInside];
}
- (IBAction)didPressLoad {
[self.progressView startAnimating];
// go out to the interwebs
// grab image
// set image
dispatch_queue_t q = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0);
dispatch_async(q, ^{
NSURL *url = [NSURL URLWithString:@"http://www.twodee.org/imgs/blog/mural.png"];
NSData *bytes = [[NSData alloc] initWithContentsOfURL:url];
dispatch_async(dispatch_get_main_queue(), ^{
UIImage *image = [UIImage imageWithData:bytes];
self.imageView.image = image;
[self.progressView stopAnimating];
});
});
}
- (void)didPressAlert {
UIAlertView *view = [[UIAlertView alloc] initWithTitle:@"TITLE" message:@"MESSAGE" delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil];
[view show];
}
@end
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="org.twodee.clickandsee"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<activity
android:name="org.twodee.clickandsee.MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
activity_main.xml
<RelativeLayout
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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher" />
<Button
android:id="@+id/loadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Load" />
<Button
android:id="@+id/alertButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:text="Alert" />
</RelativeLayout>
MainActivity.java
package org.twodee.clickandsee;
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button alertButton = (Button) findViewById(R.id.alertButton);
alertButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "You clicked Alert.", Toast.LENGTH_LONG).show();
}
});
Button loadButton = (Button) findViewById(R.id.loadButton);
loadButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
loadImage();
}
});
imageView = (ImageView) findViewById(R.id.imageView);
}
private void loadImage() {
new AsyncTask<Void, Void, Bitmap>() {
@Override
protected Bitmap doInBackground(Void... arg0) {
Bitmap bitmap = null;
try {
URL url = new URL("http://www.twodee.org/imgs/blog/mural.png");
URLConnection connection = url.openConnection();
InputStream in = connection.getInputStream();
bitmap = BitmapFactory.decodeStream(in);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return bitmap;
}
@Override
protected void onPostExecute(Bitmap bitmap) {
imageView.setImageBitmap(bitmap);
}
}.execute();
}
}
Haiku
The first way seems right
Then you see a second way
And wish for a third
Then you see a second way
And wish for a third