タス デザイン グループ

Read Article

様々なプログレス表示をする

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.fxos.androidtips08"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="15" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name="com.example.fxos.androidtips08.MainActivity"
            android:label="@string/app_name"
            android:launchMode="singleTask" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

<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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button_show_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="@string/btn_show_progress" />

    <LinearLayout
        android:id="@+id/progress_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_large"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_small"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_large_inverse"
            style="?android:attr/progressBarStyleLargeInverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_middle_inverse"
            style="?android:attr/progressBarStyleInverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ProgressBar
            android:id="@+id/progress_small_inverse"
            style="?android:attr/progressBarStyleSmallInverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Show Progress</string>
    <string name="btn_show_progress">Start Progress</string>
    <string name="toast_message">Progress Finished.</string>

</resources>

MainActivity.java

package com.example.fxos.androidtips08;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends Activity {
    private static final int MAX_PROGRESS = 100;

    private static final int NEXT_PROGRESS_DELAY = 50;

    private ProgressBar mProgressBar;

    private LinearLayout mProgressLayout;

    private ProgressRunnable mProgressRunnable;

    Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // set feature to show title bar progress
        requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
        // hide title bar progress first
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                setProgressBarIndeterminateVisibility(false);
            }
        });

        setContentView(R.layout.activity_main);

        mProgressLayout = (LinearLayout)findViewById(R.id.progress_layout);
        mProgressLayout.setVisibility(View.GONE);

        mProgressBar = (ProgressBar)findViewById(R.id.progress_bar);
        mProgressBar.setMax(MAX_PROGRESS);
    }

    public void onClick(View view) {
        if (view.getId() == R.id.button_show_progress) {
            // show progress items
            mProgressLayout.setVisibility(View.VISIBLE);
            setProgressBarIndeterminateVisibility(true);

            // check if progress thread is not running
            if (mProgressRunnable == null) {
                // set progress thread
                mProgressRunnable = new ProgressRunnable();
                mProgressBar.setProgress(0);

                // start progress thread
                mHandler.postDelayed(mProgressRunnable, NEXT_PROGRESS_DELAY);
            }
        }
    }

    class ProgressRunnable implements Runnable {
        @Override
        public void run() {
            int progress = mProgressBar.getProgress();
            // increment progress
            if (mProgressBar.getProgress() < MAX_PROGRESS) {
                progress++;
                mProgressBar.setProgress(progress);
                mHandler.postDelayed(this, NEXT_PROGRESS_DELAY);
            } else {
                // hide progress items
                mProgressLayout.setVisibility(View.GONE);
                setProgressBarIndeterminateVisibility(false);

                // show finish message
                Toast.makeText(MainActivity.this, R.string.toast_message, Toast.LENGTH_SHORT)
                        .show();

                mProgressRunnable = null;
            }
        }
    }
}

manifest.webapp

{
  "name": "show_progress",
  "description": "f08_show_progress",
  "launch_path": "/index.html",
  "type": "web",
  "icons": {
    "64": "/img/icon/app-icon64.png",
    "128": "/img/icon/app-icon128.png"
  },
  "developer": {
    "name": "TAS Design Group",
    "url": "http://tasdg.co.jp/"
  },
  "default_locale": "ja"
}

FxOS CSS(shared/style/)

CSS (style/style.css)

@charset "UTF-8";

html {
  height: 100%;
  font-family: sans-serif;
  font-size: 62.5%;
}

@media only screen and (min-width: 480px) and (max-width: 720px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 800px) and (max-width: 1280px) and (min-aspect-ratio: 1 / 1) {
  html {
    font-size: 93.75%;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1080px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 960px) and (max-width: 1920px) and (min-aspect-ratio: 1 / 1) {
  html {
    font-size: 125%;
  }
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  display: block;
  overflow: hidden;
}

body #wrap {
  height: 100%;
}

section[role="region"] {
  height: 100%;
}
section[role="region"] > header.fixed:first-child {
  position: absolute;
  width: 100%;
}

@media only screen and (min-width: 480px) and (max-width: 720px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 800px) and (max-width: 1280px) and (min-aspect-ratio: 1 / 1) {
  section[role="region"] > header.fixed:first-child .icon-menu {
    background-image: url("../shared/style/headers/images/icons/menu@1.5x.png");
  }
}

@media only screen and (min-width: 640px) and (max-width: 1080px) and (max-aspect-ratio: 1 / 1), only screen and (min-width: 960px) and (max-width: 1920px) and (min-aspect-ratio: 1 / 1) {
  section[role="region"] > header.fixed:first-child .icon-menu {
    background-image: url("../shared/style/headers/images/icons/menu@2x.png");
  }
}

.spinnerArea {
  text-align: center;
  padding-top: 1rem;
}

p[role="status"] {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
}
p[role="status"] span {
  color: #333333;
}

index.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <meta charset="utf-8">
  <title>show_progress</title>
  <link rel="stylesheet" href="shared/style/headers.css">
  <link rel="stylesheet" href="shared/style/progress_activity.css">
  <link rel="stylesheet" href="style/style.css">
  <script src="js/main.js"></script>
</head>
<body>
  <section role="region">
    <header>
      <h1>show_progress</h1>
    </header>
    <article>

      <div class="spinnerArea">
        <progress></progress>
      </div>

      <p role="status">
        <span id="percent1"></span>
        <progress id="progress1" class="pack-activity" value="0" max="100"></progress>
      </p>

      <p role="status">
        <span id="percent2"></span>
        <progress id="progress2" value="0" max="100"></progress>
      </p>


    </article>
  </section>
</body>
</html>

main.js

var i = 0;
var pg1;
var pg2;
var per1;
var per2;
var timer;

function timerInit() {
  timer = setTimeout('timerInit()', 1000);
  if (i <= 100) {
    pg1.setAttribute('value', i);
    pg2.setAttribute('value', i);
    per1.innerHTML = i + '%';
    per2.innerHTML = i + '%';
    i++;
  } else {
    clearTimeout(timer);
  }
}

window.addEventListener('load', function() {
  per1 = document.getElementById('percent1');
  per2 = document.getElementById('percent2');
  pg1 = document.getElementById('progress1');
  pg2 = document.getElementById('progress2');

  timerInit();
});
Return Top