Android: How to display an image file (building's floor map) and update the file?

问题

I have read ImageView. I want to use it to display the image file. Also, I have plan to provide functionality to update the file.

Would you teach me on how to display the image file. Then add group of radio buttons on the top to represent the floors. When I click 1st Floor, the imageview source change to image1.png, then click 2nd floor radio button, change to image2.png and so on..

I am using Android Platform 2.1-update1 and eclipse ADT for this thesis.

Here's my current code: (although there is some undesirable appearance of the radio buttons)

public class DisplayImageMapActivity extends Activity {
    ImageView iv;
    private final String FLOOR = "F";
    private final String storagePath = Environment.getExternalStorageDirectory() + "/keitaiAppH23";
    private final String localMapsPath = storagePath + "/localMaps";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        iv=(ImageView)findViewById(R.id.storageimage);

        RadioGroup levelRGroup = (RadioGroup) findViewById(R.id.level_rgroup);

        int levelSize = 8;
        for (int i = 0; i < levelSize; i++) {
            RadioButton levelRButton = new RadioButton(this);
            if(i==0) {
                levelRButton.setText(new StringBuffer(i+1).append(FLOOR).append("(start)"));
            } else if (i==7) {
                levelRButton.setText(new StringBuffer(i+1).append(FLOOR).append("(end)"));
            }
            levelRButton.setTag((i+1) + FLOOR);
            levelRButton.setLayoutParams(
                    new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1));

            levelRGroup.addView(levelRButton);
        }

        levelRGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            public void onCheckedChanged(RadioGroup group, final int checkedId) {
                iv.setImageURI(Uri.parse(new StringBuffer(localMapsPath)
                .append("/").append(group.findViewById(checkedId).getTag()).append(".gif").toString()));
                iv.invalidate();
            }
        });

        levelRGroup.getChildAt(0).performClick();

    }
}

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"
    android:id="@+id/main_layout"
    >
    <RadioGroup android:id="@+id/level_rgroup"
        android:layout_width="wrap_content" android:orientation="horizontal"
        android:layout_height="wrap_content">
    </RadioGroup>
    <ImageView android:id="@+id/storageimage" android:src="@drawable/icon"
        android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>

UPDATE: Requirements:

image file are set dynamically which obtain from external source (e.g. DB,url). - Resolved
radiobuttons are need to be dynamically created because it is not fix by 8F. It should be the number of target floors (e.g. start is 5F, end is 7F, so it should be 3 radiobuttons only 5F,6F,7F). - Resolved

Problems Encountered:

Image cannot be updated. - Resolved
All radiobuttons are not displayed as expected (Maybe due to wrong layout). - Not Yet Resolved
When I click the radiobuttons to toggle the selection, it doesn't change on the 1F radiobutton. Note: It is OK for 2F to 8F. It switches the selection as expected. - Resolved

Screen shot:

回答1:

These modifications should do it (there may be some typos):

Layout:

<?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"
    android:id="@+id/main_layout"
    >
    <ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" 
                android:id="@+id/iView" android:src="@drawable/icon"></ImageView>

    <RadioGroup android:id="@+id/level_rgroup"
        android:layout_width="fill_parent" android:orientation="horizontal"
        android:layout_height="wrap_content">
        <RadioButton android:id="@+id/rb1"
            android:width="106dip" android:height="80dip" android:text="Floor 1"/>
        <RadioButton android:id="@+id/rb2" 
            android:width="106dip" android:height="80dip" android:text="Floor 2"/>
        <RadioButton android:id="@+id/rb3" 
            android:width="106dip" android:height="80dip" android:text="Floor 3"/>
    </RadioGroup>
</LinearLayout>

Code:

public class DisplayImageMapActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);      
            RadioGroup levelRGroup = (RadioGroup) mainLayout.findViewById(R.id.level_rgroup);
            final ImageView iView = (ImageView) findViewById(R.id.iView);

            levelRGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
                public void onCheckedChanged(RadioGroup group, final int checkedId) {
                    switch (checkedId) {
                    case R.id.rb1:
                        iView.setImageResource(R.drawable.floor_1);
                        iView.invalidate();
                        break;
                    case R.id.rbM2:
                        iView.setImageResource(R.drawable.floor_2);
                        iView.invalidate();
                        break;
                    case R.id.rb3:
                        iView.setImageResource(R.drawable.floor_3);
                        iView.invalidate();
                        break;
                    }
                }
            }); 
        }
    }

You can add those buttons programatically if you want to, remember to set layout_width and other attributes for them if you want them to be seen (I put them in the XML since I had that code laying around).

Comment if you have any questions.

来源：https://stackoverflow.com/questions/7306069/android-how-to-display-an-image-file-buildings-floor-map-and-update-the-file

标签

android

imagemap