2016年7月2日 星期六

Android App 登入畫面動畫

本範例要介紹的是 Android App 登入畫面動畫的特效功能，登入畫面動畫的好處是可以展示產品的LOGO， 或是把一些使用者常用的資料， 在開啟程式之前就先抓好或啟動起來， 這樣一來使用者一旦進入程式，就可以很迅速地將程式開啟。

1.res部分在 anim 裡建立 xml 的特效動畫設定(透明度變化)，drawable裡放置顯示圖片。


2.layout部分設兩個畫面供畫面轉換。


 3.使用 Animation.AnimationListener 的介面，在 onAnimationEnd 裡當動畫結束後做intent的切換。
WelcomeActivity.java 
package gae.melvin.com.app_welcomeview;

import android.content.Context;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class WelcomeActivity extends AppCompatActivity implements Animation.AnimationListener{

    private ImageView imageView;
    private Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        context = this;

        //取消ActionBar
        getSupportActionBar().hide();
        //取消狀態欄
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        imageView = (ImageView)findViewById(R.id.imageView);

        //imageView 設定動畫元件(透明度調整)
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.welcome_anim);
        animation.setFillEnabled(true);
        animation.setFillAfter(true);
        animation.setAnimationListener(this);
        imageView.setAnimation(animation);
    }
    /*實作 Animation.AnimationListener 的三種方法*/
    @Override
    public void onAnimationStart(Animation animation) {}

    @Override
    public void onAnimationEnd(Animation animation) {
        startActivity(new Intent(context,MainActivity.class));
        finish();
    }

    @Override
    public void onAnimationRepeat(Animation animation) {}

}

MainActivity.java 
package gae.melvin.com.app_welcomeview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("主畫面");
    }

}

4.呈現效果


於 1 則留言:
標籤：

2016年7月1日 星期五

使用 okHttp 的 GET 方式讀取 JSON 資料

如下圖所示，本範例使用 OKHttp 來讀取 JSON 多筆資料，並由 GSON(GSON是Google 開發用來解析JSON 格式資料的 Library) 來解析 JSON 格式資料，並由App顯示出相關訊息。
34.png
1.找到對應的module ，依照步驟下載 GSON 和 OKHttp 的 Library。
2.OKHttp官網裡有提供GET的範例，可直接套用。
3.lauout.xml。

<?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"
    tools:context="gae.melvin.com.app_welcomeview.WelcomeActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:src="@drawable/diary"
        android:layout_gravity="center_vertical"
        android:scaleType="fitCenter" />

</LinearLayout>
4.Book.java。
package gae.melvin.com.app_okhttp_gson;

public class Book {
    private long key;
    private String title;
    private String author;
    private String price;
    private long time;

    public long getKey() {
        return key;
    }

    public void setKey(long key) {
        this.key = key;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public long getTime() {
        return time;
    }

    public void setTime(long time) {
        this.time = time;
    }
}

5.MainActivity.java。
package gae.melvin.com.app_okhttp_gson;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import com.google.gson.Gson;
import com.squareup.okhttp.OkHttpClient;
import com.squareup.okhttp.Request;
import com.squareup.okhttp.Response;
import java.io.IOException;



public class MainActivity extends AppCompatActivity {

    private TextView textView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = (TextView)findViewById(R.id.textView);
        new RunWrok().start();

    }


    /*上網抓資料，需要另外開執行緒做處理(Android機制)*/
    class RunWrok extends Thread
    {
        String path_json ="http://android0620-1348.appspot.com/query";
        String result_json = null;

        /* This program downloads a URL and print its contents as a string.*/
        OkHttpClient client = new OkHttpClient();


        String run(String url) throws IOException {
            Request request = new Request.Builder()
                    .url(url)
                    .build();

            Response response = client.newCall(request).execute();
            return response.body().string();
        }

        Runnable task = new Runnable()
        {
            @Override
            public void run() {
                //使用 gson 解析 json 資料
                Gson gson = new Gson();
                Book[] books = gson.fromJson(result_json,Book[].class);

                StringBuilder sb = new StringBuilder();
                for(Book book :books){
                    sb.append("書名:").append(book.getTitle()).append(" ")
                            .append("作者:").append(book.getAuthor()).append(" ")
                            .append("價錢:").append(book.getPrice()).append("\n\n");
                }
                textView.setText(sb);

            }
        };

        @Override
        public void run()
        {
            try {
                //1.抓資料
                result_json = run(path_json);
                //2.改變畫面內容只能用主執行緒(Android機制)
                runOnUiThread(task);
            } catch (IOException e) {
                e.printStackTrace();
            }

        }

    }


}

6.AndroidManifest.xml，上網權限要開。
 












於





1 則留言:
  


















標籤：

















          

        

          

        

2016年6月27日 星期一


          

        










Google APP Engine 前後端建置測試(二)














上一篇 Google APP Engine 開發簡介(一) 有大概介紹GAE的基本觀念，接下來我們要使用 Android Studio 建置後端平台，把網路應用程式佈署上傳，這樣該網路應用程式就可以公開讓所以人使用( appspot.com 網域下的免費網址)。搭配使用 Android Studio 建置前端App，套用WebView元件連結後端，測試是否能連結成功。 























1.在App_GAE專案裡建置兩個 Moudle (App_cloud為前端App、backend_test為後端網頁應用程式)。















2.建置 App_cloud，在此就不多加贅述。











3.Android Studio 有提供自動建置網頁應用程式模組，選擇 Google Cloud Module。











4.建立相關配置後，就能產生網頁應用程式。



Module type: 下拉選單選擇 App Engine Java Servlet Module



Module name: 網頁應用程式名稱



Package name: 選擇對應的App應用程式的目錄名稱



Client module: 選擇對應的App應用程式











5.選取 Project 方式呈現才會顯示細部的專案，其中裡面有幾個比較重要的檔案。



MyServlet(程式控制端)









index.html(畫面呈現)









web.xml(設定檔)











6.選取 Build 按下 Deploy Module to App Engine











7.Deploy to: 選取Google Console內存在的專案ID(下方Deploy按鈕會需要登入gmail使用授權)











8.網址部分前面為專案ID名稱，後方appspot.com為固定寫法。











9.用get方式，網址列上打上/hello 轉跳畫面(傳參數)。







10.App_cloud(layout部分)。


<?xml version="1.0" encoding="utf-8"?><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"    tools:context="gae.melvin.com.app_cloud.MainActivity">

    <WebView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/webView"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true"        android:layout_alignParentTop="true" />
</RelativeLayout>











10.App_cloud(Activity部分)。


public class MainActivity extends AppCompatActivity {


    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String myURL = "http://semiotic-effort-135423.appspot.com/";
        WebView myBrowser=(WebView)findViewById(R.id.webView);

        WebSettings websettings = myBrowser.getSettings();
        websettings.setSupportZoom(true);
        websettings.setBuiltInZoomControls(true);
        websettings.setJavaScriptEnabled(true);

        myBrowser.setWebViewClient(new WebViewClient());

        myBrowser.loadUrl(myURL);
    }


}









11.最終用前端App測試也能順利連結後端。




























於





1 則留言:
  


















標籤：

















          

        

          

        

2016年6月25日 星期六


          

        










Google APP Engine 開發簡介(一)












Google App Engine(GAE) 服務是一個提供網頁系統執行的平台。在這個基礎建設下，可以很容易的建立與維護，以及當流量與儲存需求增加時可以容易擴增規模。在GAE的環境中，使用者不需要維護伺服器，只需要將網路應用程式上傳，然後其他的使用者就可以使用該應用程式所提供的服務。對於該應用程式可以使用 appspot.com 領域之下的免費網址。該網路應用程式可以公開讓所有的人使用，或是限制只有組織內的成員才可以存取。GAE 支援以數種常用之程式語言所開發的app。









Google App Engine上的APP沒有初始費用，所有的應用程式可以免費使用1GB的儲存空間，足夠的CPU時間，以及可以支援一個月5百萬次的網頁瀏覽數的足夠頻寬。使用者一旦開通計費機制，則免費的額度也會增加，而且只需支付超過免費額度的部分。Google有一套完整的幾費機制，有興趣者可以參考 Google APP Engine 網站的說明。





1.進入GAE首頁並登入gmail。









2.點選右上角紅色框框，選取建立專案。(建立好專稱名稱後會自動產生專案ID)。









3.點選左上角橘色框框選單。







4.選取資料儲存庫，查看資料庫裡的變化。









5.第一次產生專案，暫無任何資料(之後會以程式碼方式產生)。











6.Cloud Datastore 與 relational database 的差異









7.點選App Engine選取配額，便可查看該應用程式的配額詳細資料。













參考網站:















於





沒有留言:
  


















標籤：

























          

        

          

        

2016年6月18日 星期六


          

        










Android Studio 相關設定












Android Studio 開發工具安裝說明




Android Studio 常用的偏好設定



1.預設為白色主題的，看個人喜好也可以設定黑色主題(Darcula)。











2.設定顯示行號。











3.設定文字樣式與字體大小(Font預設是不能改的， 只能點選Schema右邊的Sava As 按鈕， 將當前Schema另存為個人的Schema，才能更改)。











4.自動提示(紅框中Java標題下面的方框全部勾選即可)，搭配手動提示(預設為Ctrl + Space，改為 Ctrl + \ )，能更有效提高開發時的效率。



















5.設定註解顏色，預設為淡灰色(有Block comment 與 Line comment 兩種)。















Genymation 模擬器



官網








Android 模擬器 Genymotion 使用教學













於





沒有留言:
  


















標籤：


























Java GUI Layout 輔助工具 WindowBuilder 介紹












為了方便開發Java Swing，我們可以使用Eclipse(Version: Mars Release 4.5.0) 插件 WindowBuilder 的輔助工具來開發。首先選擇Help/Install New Software， 並在Work with裡選擇 Mars - http://download.eclipse.org/releases/mars ， 便會產生 General Purpose Tools 選項,，最後只要選取 Swing Designer、 SWT Designer 以及 WindowBuilder 三個選項安裝即可。 



































接著我們就可以使用 WindowBuilder 內所提供的 Application Window 選項，它會自動產生 JFrame 的框架，其中 Source 為程式碼部分、Design 為 GUI圖形介面。


























package test;

import java.awt.EventQueue;

import javax.swing.JFrame;

public class test {

 private JFrame frame;

 /**
  * Launch the application.
  */
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     test window = new test();
     window.frame.setVisible(true);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }

 /**
  * Create the application.
  */
 public test() {
  initialize();
 }

 /**
  * Initialize the contents of the frame.
  */
 private void initialize() {
  frame = new JFrame();
  frame.setBounds(100, 100, 450, 300);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 }

}








以下網站有介紹 Java Swing、WindowBuilder 可供參考。





[介紹] eclipse 插件 - Java GUI Layout 輔助工具 WindowBuilder



Eclipse 安裝 Window Builder 教學



如何使用Window Builder



Java入門指南 - GUI 的基本概念
















於





沒有留言:
  


















標籤：

















        

      









訂閱：
文章 (Atom)









[java] 條件控制



 前言：   在 java 的條件控制中可分為 if-else 架構、三元運算子、switch-case 架構這三類，其中 if-else、三元運算子為條件型的判斷，條件必須為 true/false布林值；switch-case 為比對變數型的判斷，條件值比較多可以是 char、...












    

  • 

    

    




    

    [Java] 資料型態介紹 與 記憶體配置
    

    前言：   在開始討論 Java 資料型別前大家是否有想過為什麼要有資料型別這個東西呢？   所以一開始想先給大家有『要計算前必先記憶』這個觀念，舉個例子來說：   想像自己是加油站員工，假設汽油每公升 i 元，幫一台機車加 j 公升的汽油，那總共要跟客人收 i x j 元．我們...
    

    

    

    • 

  • 

    

    




    

    使用 okHttp 的 GET 方式讀取 XML 資料
    

     一般在解析 XML 資料大致上有分成 DOM 、 SAX 、 JDOM 、 DOM4J 四種解析方式，我比較有接觸過的 DOM 、 SAX 這兩種，所以只就介紹介紹 DOM 、 SAX 的差異。接著本範例會使用 OKHttp  來讀取政府提供的XML格式資料( 顯著有感地震報告...
    

    

    

    • 

  • 

    

    




    

    TBIKE台北通 App 上架錯誤訊息排除紀錄
    

     資料來源   臺北youbike的json檔   http://data.taipei/opendata/datalist/datasetMeta?oid=8ef1626a-892a-4218-8344-f7ac46e1aa48   資料存取網址      http://dat...
    

    

    

    •