วันจันทร์ที่ 16 กันยายน พ.ศ. 2556

Android : เริ่มต้นเขียน โปรแกรม ImageView

บทนี้ จะเป็นการทดลองเขียน Source Code และ การออกแบบหน้าจอ โปรแกรม ImageView ซึ่งเป็นโปรแกรมสำหรับแสดงภาพ
     เรามาดูรายละเอียด Source Code การสร้างโปรแกรมกัน
โดยเราต้องสร้างๆไฟล์หลักๆ 2 ไฟล์ คือ Main.java และ main.xml

// 1. Main.java
package com.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class Main extends Activity implements OnClickListener{
ImageView ivDisplay;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ivDisplay = (ImageView) findViewById(R.id.ivDisplay);
        ImageView ivImage1 = (ImageView) findViewById(R.id.ivImage1);
        ImageView ivImage2 = (ImageView) findViewById(R.id.ivImage2);
        ImageView ivImage3 = (ImageView) findViewById(R.id.ivImage3);
        ImageView ivImage4 = (ImageView) findViewById(R.id.ivImage4);
        ImageView ivImage5 = (ImageView) findViewById(R.id.ivImage5);
        ImageView ivImage6 = (ImageView) findViewById(R.id.ivImage6);
        ImageView ivImage7 = (ImageView) findViewById(R.id.ivImage7);
        
        ivImage1.setOnClickListener(this);
        ivImage2.setOnClickListener(this);
        ivImage3.setOnClickListener(this);
        ivImage4.setOnClickListener(this);
        ivImage5.setOnClickListener(this);
        ivImage6.setOnClickListener(this);
        ivImage7.setOnClickListener(this);
    }

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ivImage1:
ivDisplay.setImageResource(R.drawable.back_abstract);
break;
case R.id.ivImage2:
ivDisplay.setImageResource(R.drawable.back_apple);
break;
case R.id.ivImage3:
ivDisplay.setImageResource(R.drawable.back_bacon);
break;
case R.id.ivImage4:
ivDisplay.setImageResource(R.drawable.back_cheese);
break;
case R.id.ivImage5:
ivDisplay.setImageResource(R.drawable.back_rainbow);
break;
case R.id.ivImage6:
ivDisplay.setImageResource(R.drawable.back_skull);
break;
case R.id.ivImage7:
ivDisplay.setImageResource(R.drawable.back_skunk);
break;
default:
break;
}
}
}

// 2. main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<ImageView
android:src="@drawable/back_abstract"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:id="@+id/ivDisplay">
</ImageView>

<Button
android:id="@+id/btnSetWallpaper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Set Image background">
</Button>
<HorizontalScrollView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<ImageView
android:src="@drawable/back_abstract"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage1"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_apple"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage2"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_bacon"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage3"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_cheese"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage4"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_rainbow"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage5"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_skull"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage6"
android:padding="15dp"/>
<ImageView
android:src="@drawable/back_skunk"
android:layout_width="125dp"
android:layout_height="125dp"
android:layout_gravity="center"
android:id="@+id/ivImage7"
android:padding="15dp"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>

ทดลอง Run โปรแกรม