Symfoware

Symfowareについての考察blog

Android 横にスライドしてFragmentを切り替える

Fragmentを変更するときスライドしてかっこよく切り替えたい。


Slide



Slideを使えば簡単に実現できました。

※APIレベル21以降で使用できます。
APIレベルの変更はこちら。
Android APIレベルの変更




レイアウトファイル



テストに使用するレイアウトファイルは以下の3つ。

・activity_main.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     android:orientation="vertical"
  9.     >
  10.     <LinearLayout
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:orientation="horizontal">
  14.         <Button
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="wrap_content"
  17.             android:text="変更"
  18.             android:onClick="changeState" />
  19.     </LinearLayout>
  20.     <LinearLayout
  21.         android:id="@+id/content"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="match_parent"
  24.         android:orientation="horizontal">
  25.     </LinearLayout>
  26. </LinearLayout>




・fragment_1.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#ff0000"
  7.     >
  8.     <TextView
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="first"
  12.         android:textSize="36sp"
  13.         />
  14. </LinearLayout>




・fragment_2.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#00FF00">
  7.     <TextView
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="second"
  11.         android:textSize="36sp" />
  12. </LinearLayout>





Fragment



レイアウトを読み込むFragmentを2つ。

・Fragment1.java


  1. import android.app.Fragment;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. public class Fragment1 extends Fragment {
  7.     public static Fragment1 newInstance(String name) {
  8.         Fragment1 fragment = new Fragment1();
  9.         return fragment;
  10.     }
  11.     @Override
  12.     public void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.     }
  15.     @Override
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  17.         super.onCreateView(inflater, container, savedInstanceState);
  18.         return inflater.inflate(R.layout.fragment_1, container, false);
  19.     }
  20. }





・Fragment2.java


  1. import android.app.Fragment;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. public class Fragment2 extends Fragment {
  7.     public static Fragment2 newInstance(String name) {
  8.         Fragment2 fragment = new Fragment2();
  9.         return fragment;
  10.     }
  11.     @Override
  12.     public void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.     }
  15.     @Override
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  17.         super.onCreateView(inflater, container, savedInstanceState);
  18.         return inflater.inflate(R.layout.fragment_2, container, false);
  19.     }
  20. }







MainActivity



Activityのソースはこうなりました。


  1. import android.app.Fragment;
  2. import android.app.FragmentManager;
  3. import android.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.transition.Slide;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. public class MainActivity extends AppCompatActivity {
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         FragmentManager fragmentManager = getFragmentManager();
  15.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  16.         // 実際に使用するFragmentの作成
  17.         Fragment newFragment = new Fragment1();
  18.         Slide slide = new Slide();
  19.         slide.setSlideEdge(Gravity.LEFT);
  20.         newFragment.setExitTransition(slide);
  21.         // Fragmentを組み込む
  22.         transaction.add(R.id.content, newFragment);
  23.         // backstackに追加
  24.         transaction.addToBackStack(null);
  25.         // 上記の変更を反映する
  26.         transaction.commit();
  27.     }
  28.     public void changeState(View view) {
  29.         FragmentManager fragmentManager = getFragmentManager();
  30.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  31.         // 実際に使用するFragmentの作成
  32.         Fragment newFragment = new Fragment2();
  33.         Slide slide = new Slide();
  34.         slide.setSlideEdge(Gravity.RIGHT);
  35.         newFragment.setEnterTransition(slide);
  36.         // Fragmentを組み込む
  37.         transaction.replace(R.id.content, newFragment);
  38.         // backstackに追加
  39.         transaction.addToBackStack(null);
  40.         // 上記の変更を反映する
  41.         transaction.commit();
  42.     }
  43. }




初期表示

775_01.png


ボタンを押すと、すっと画面が切り替わります。

775_02.png



元いたFragmentが左に消えて、新しいFragmentが右から表示されます。


上に移動させたい場合は、Gravity.TOPとGravity.BOTTOMに指定を変更します。


  1. import android.app.Fragment;
  2. import android.app.FragmentManager;
  3. import android.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.transition.Slide;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. public class MainActivity extends AppCompatActivity {
  10.     @Override
  11.     protected void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.activity_main);
  14.         FragmentManager fragmentManager = getFragmentManager();
  15.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  16.         // 実際に使用するFragmentの作成
  17.         Fragment newFragment = new Fragment1();
  18.         Slide slide = new Slide();
  19.         //slide.setSlideEdge(Gravity.LEFT);
  20.         slide.setSlideEdge(Gravity.TOP);
  21.         newFragment.setExitTransition(slide);
  22.         // Fragmentを組み込む
  23.         transaction.add(R.id.content, newFragment);
  24.         // backstackに追加
  25.         transaction.addToBackStack(null);
  26.         // 上記の変更を反映する
  27.         transaction.commit();
  28.     }
  29.     public void changeState(View view) {
  30.         FragmentManager fragmentManager = getFragmentManager();
  31.         FragmentTransaction transaction = fragmentManager.beginTransaction();
  32.         // 実際に使用するFragmentの作成
  33.         Fragment newFragment = new Fragment2();
  34.         Slide slide = new Slide();
  35.         //slide.setSlideEdge(Gravity.RIGHT);
  36.         slide.setSlideEdge(Gravity.BOTTOM);
  37.         newFragment.setEnterTransition(slide);
  38.         // Fragmentを組み込む
  39.         transaction.replace(R.id.content, newFragment);
  40.         // backstackに追加
  41.         transaction.addToBackStack(null);
  42.         // 上記の変更を反映する
  43.         transaction.commit();
  44.     }
  45. }





【参考URL】

Activity/Fragment Transitionsのつかいかた
カスタム アニメーションの定義
Window setEnterTransition


関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/15(火) 22:17:22|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android APIレベルの変更

メニューから[File] - [Project Structure...]を選択。

774_01.png


Modulesで「app」を選択して「Flavors」タブを選択。

774_02.png


Min Skd Versionを変更。
選択肢に存在しなくても、直接数値入力でもよさそう。
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/15(火) 21:52:19|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android ソースコード展開時に「All packages are not available for download!」

AppCompatActivityなど、Android自体に含まれているソースコードを展開すると警告が。


All packages are not available for download!
The following packages are not available:
-Pakage is source;android-26



773_01.png


原因



原因はエラーメッセージそのまま「android-26のsourceがない」ってことなのですが、
修正方法がわからず苦戦したのでメモしておきます。

[File] - [Settings...]を選択。

773_02.png


[Appearande & Behavior] - [System Settings] - [Android SDK]を選択。
「SDK Platforms」のタブで、右下の「Show Package Details」をチェック。

773_03.png


Source for Android 26はまだ存在しないようです。
25はインストールされているので、このバージョンに変更すればよさそう。


[File] - [Project Structure...]を選択。

773_04.png


appを選択して、「Properties」タブを選択。
Compile Sdk Versionを API 25に変更します。

773_05.png


これでソースコードが閲覧できるようになりました。


【参考URL】

Android Studio AVD Manager cannot update system images

Android StudioでSDK Managerを起動する

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/15(火) 21:45:43|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android ネットワークライブラリ「Volley」を使用して画像データ取得

Volleyを使用してJSONデータを取得してみました。
Android ネットワークライブラリ「Volley」を使用してJSONデータ取得

今回は画像データを取得してみます。
こちらを参考にしました。
Transmitting Network Data Using Volley


単純な画像の取得



http://192.168.1.4:8000/image.jpg
このURLで画像が取得できるようにしておきます。

こちらを参考にさせていただきました。
[Android][Volley] ImageRequestを使用していた箇所がDeprecatedになっていた


  1. import android.graphics.Bitmap;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  6. import android.widget.ListView;
  7. import com.android.volley.RequestQueue;
  8. import com.android.volley.Response;
  9. import com.android.volley.VolleyError;
  10. import com.android.volley.toolbox.ImageRequest;
  11. import com.android.volley.toolbox.Volley;
  12. import java.util.ArrayList;
  13. public class MainActivity extends AppCompatActivity {
  14.     private ArrayList<ListRow> mListItems;
  15.     private MyAdapter mAdapter;
  16.     private static final int LOADER_ID = 1;
  17.     private static final String ARG_URL_PARAM = "ARG_URL_PARAM";
  18.     @Override
  19.     protected void onCreate(Bundle savedInstanceState) {
  20.         super.onCreate(savedInstanceState);
  21.         setContentView(R.layout.activity_main);
  22.         // リストに表示するデータ
  23.         mListItems = new ArrayList<>();
  24.         // MyAdapterを作成し、データを設定
  25.         mAdapter = new MyAdapter(this, R.layout.list_layout, mListItems);
  26.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  27.         ListView listView = (ListView) findViewById(R.id.listView1);
  28.         listView.setAdapter(mAdapter);
  29.     }
  30.     public void readJson(View view) {
  31.         mListItems.clear();
  32.         // Instantiate the RequestQueue.
  33.         RequestQueue queue = Volley.newRequestQueue(this);
  34.         String url = "http://192.168.1.4:8000/image.jpg";
  35.         ImageRequest imgRequest = new ImageRequest(
  36.                 url,
  37.                 new Response.Listener<Bitmap>() {
  38.                     @Override
  39.                     public void onResponse(Bitmap bitmap) {
  40.                         ListRow item = new ListRow(bitmap, "テスト画像");
  41.                         mListItems.add(item);
  42.                         mAdapter.notifyDataSetChanged();
  43.                     }
  44.                 },0, 0, ImageView.ScaleType.CENTER_INSIDE, Bitmap.Config.RGB_565,
  45.                 new Response.ErrorListener() {
  46.                     @Override
  47.                     public void onErrorResponse(VolleyError error) {
  48.                         System.out.println(error.getMessage());
  49.                     }
  50.                 }
  51.         );
  52.         // Add the request to the RequestQueue.
  53.         queue.add(imgRequest);
  54.     }
  55. }




実行結果

772_01.png


本来はImageLoaderクラスを使用したほうが良いようです。
ネットワーク通信用ライブラリVOLLEYを使いこなす

これはまた別の機会に調べてみたいと思います。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/13(日) 15:41:04|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android ネットワークライブラリ「Volley」を使用してJSONデータ取得

生のhttpconnectionとAsyncTaskLoaderを使用してJSONデータを取得してみました。
Android http経由でのデータ取得とJSONデータの解析

結構つらい。



Volley



これ、うまく書かないとコールバックの嵐になりそうだなと思っていたところ
Androidの開発におけるベストプラクティス

Volleyという通信ライブラリを知りました。
https://github.com/google/volley
Volley 基礎 (Android アプリ用ネットワークライブラリ)
ネットワーク通信用ライブラリVOLLEYを使いこなす


公式にチュートリアルもあるようです。
Transmitting Network Data Using Volley

前回作ったプログラムの通信部分をVolleyに変更してみます。






gradleの設定



ドキュメントにあるように、gradleの設定ファイルを編集します。

771_01.png

dependencies(依存関係)の項目に1行追加。


compile 'com.android.volley:volley:1.0.0'




build.gradleはこのようになりました。


  1. apply plugin: 'com.android.application'
  2. android {
  3.     compileSdkVersion 26
  4.     buildToolsVersion "26.0.1"
  5.     defaultConfig {
  6.         applicationId "com.example.baranche.myapplication"
  7.         minSdkVersion 15
  8.         targetSdkVersion 26
  9.         versionCode 1
  10.         versionName "1.0"
  11.         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
  12.     }
  13.     buildTypes {
  14.         release {
  15.             minifyEnabled false
  16.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  17.         }
  18.     }
  19. }
  20. dependencies {
  21.     compile fileTree(dir: 'libs', include: ['*.jar'])
  22.     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
  23.         exclude group: 'com.android.support', module: 'support-annotations'
  24.     })
  25.     compile 'com.android.support:appcompat-v7:26.+'
  26.     compile 'com.android.support.constraint:constraint-layout:1.0.2'
  27.     compile 'com.android.volley:volley:1.0.0'
  28.     testCompile 'junit:junit:4.12'
  29. }







プログラムの変更



Sending a Simple Request
ここを見ながらプログラムを修正しました。

ちょっとハマったのは、取得した文字列がutf8ではなかったことでしょうか。
こちらを参考に、文字コードを変換しています。
Fail with UTF-8 encoding in Volley Requests


・MainActivity.java


  1. import android.graphics.Bitmap;
  2. import android.graphics.BitmapFactory;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ListView;
  7. import com.android.volley.Request;
  8. import com.android.volley.RequestQueue;
  9. import com.android.volley.Response;
  10. import com.android.volley.VolleyError;
  11. import com.android.volley.toolbox.StringRequest;
  12. import com.android.volley.toolbox.Volley;
  13. import org.json.JSONArray;
  14. import org.json.JSONObject;
  15. import java.net.URLDecoder;
  16. import java.net.URLEncoder;
  17. import java.util.ArrayList;
  18. public class MainActivity extends AppCompatActivity {
  19.     private ArrayList<ListRow> mListItems;
  20.     private MyAdapter mAdapter;
  21.     private static final int LOADER_ID = 1;
  22.     private static final String ARG_URL_PARAM = "ARG_URL_PARAM";
  23.     @Override
  24.     protected void onCreate(Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_main);
  27.         // リストに表示するデータ
  28.         mListItems = new ArrayList<>();
  29.         // MyAdapterを作成し、データを設定
  30.         mAdapter = new MyAdapter(this, R.layout.list_layout, mListItems);
  31.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  32.         ListView listView = (ListView) findViewById(R.id.listView1);
  33.         listView.setAdapter(mAdapter);
  34.     }
  35.     public void readJson(View view) {
  36.         mListItems.clear();
  37.         // Instantiate the RequestQueue.
  38.         RequestQueue queue = Volley.newRequestQueue(this);
  39.         String url = "http://192.168.1.4:8000/sample.json";
  40.         // Request a string response from the provided URL.
  41.         StringRequest stringRequest = new StringRequest(
  42.             Request.Method.GET, url,
  43.             new Response.Listener<String>() {
  44.                 @Override
  45.                 public void onResponse(String response) {
  46.                     // ローダーが取得した文字列を解析して表示
  47.                     try {
  48.                         // 文字コードを変換
  49.                         String jsonString = URLDecoder.decode(URLEncoder.encode(response, "iso8859-1"),"UTF-8");
  50.                         // JSONな文字列をオブジェクトに変換
  51.                         JSONObject json = new JSONObject(jsonString);
  52.                         // "rows"の項目を取得し、ループ
  53.                         JSONArray rows = json.getJSONArray("rows");
  54.                         for (int i = 0; i < rows.length(); i++) {
  55.                             // titleを取得
  56.                             JSONObject row = rows.getJSONObject(i);
  57.                             String title = row.getString("title");
  58.                             Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_suiginto);
  59.                             ListRow item = new ListRow(bmp, title);
  60.                             mListItems.add(item);
  61.                         }
  62.                     } catch (Exception e) {
  63.                         e.printStackTrace();
  64.                     }
  65.                     mAdapter.notifyDataSetChanged();
  66.                 }
  67.             },
  68.             new Response.ErrorListener() {
  69.                 @Override
  70.                 public void onErrorResponse(VolleyError error) {
  71.                     System.out.println(error.getMessage());
  72.                 }
  73.             }
  74.         );
  75.         // Add the request to the RequestQueue.
  76.         queue.add(stringRequest);
  77.     }
  78. }




実行結果

771_02.png




Making a Standard Request



先程は文字列を受け取りJSONObjectに自分で変換していましたが、
戻り値がJSONObjectとなる処理も用意されていました。
Making a Standard Request

プログラムを変更してみます。


  1. import android.graphics.Bitmap;
  2. import android.graphics.BitmapFactory;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ListView;
  7. import com.android.volley.Request;
  8. import com.android.volley.RequestQueue;
  9. import com.android.volley.Response;
  10. import com.android.volley.VolleyError;
  11. import com.android.volley.toolbox.JsonObjectRequest;
  12. import com.android.volley.toolbox.Volley;
  13. import org.json.JSONArray;
  14. import org.json.JSONException;
  15. import org.json.JSONObject;
  16. import java.util.ArrayList;
  17. public class MainActivity extends AppCompatActivity {
  18.     private ArrayList<ListRow> mListItems;
  19.     private MyAdapter mAdapter;
  20.     private static final int LOADER_ID = 1;
  21.     private static final String ARG_URL_PARAM = "ARG_URL_PARAM";
  22.     @Override
  23.     protected void onCreate(Bundle savedInstanceState) {
  24.         super.onCreate(savedInstanceState);
  25.         setContentView(R.layout.activity_main);
  26.         // リストに表示するデータ
  27.         mListItems = new ArrayList<>();
  28.         // MyAdapterを作成し、データを設定
  29.         mAdapter = new MyAdapter(this, R.layout.list_layout, mListItems);
  30.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  31.         ListView listView = (ListView) findViewById(R.id.listView1);
  32.         listView.setAdapter(mAdapter);
  33.     }
  34.     public void readJson(View view) {
  35.         mListItems.clear();
  36.         // Instantiate the RequestQueue.
  37.         RequestQueue queue = Volley.newRequestQueue(this);
  38.         String url = "http://192.168.1.4:8000/sample.json";
  39.         // Request a string response from the provided URL.
  40.         JsonObjectRequest jsObjRequest = new JsonObjectRequest(
  41.             Request.Method.GET, url, null,
  42.             new Response.Listener<JSONObject>() {
  43.                 @Override
  44.                 public void onResponse(JSONObject response) {
  45.                     try {
  46.                         // "rows"の項目を取得し、ループ
  47.                         JSONArray rows = response.getJSONArray("rows");
  48.                         for (int i = 0; i < rows.length(); i++) {
  49.                             // titleを取得
  50.                             JSONObject row = rows.getJSONObject(i);
  51.                             String title = row.getString("title");
  52.                             Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_suiginto);
  53.                             ListRow item = new ListRow(bmp, title);
  54.                             mListItems.add(item);
  55.                         }
  56.                     } catch (JSONException e) {
  57.                         e.printStackTrace();
  58.                     }
  59.                     mAdapter.notifyDataSetChanged();
  60.                 }
  61.             },
  62.             new Response.ErrorListener() {
  63.                 @Override
  64.                 public void onErrorResponse(VolleyError error) {
  65.                     System.out.println(error.getMessage());
  66.                 }
  67.             }
  68.         );
  69.         // Add the request to the RequestQueue.
  70.         queue.add(jsObjRequest);
  71.     }
  72. }




実行結果は変わりません。

Volley、キャッシュや通信のキャンセルも行えるようで。
自分で通信処理を実装するより楽できそうです。



【参考URL】

Androidの開発におけるベストプラクティス
https://github.com/google/volley
Volley 基礎 (Android アプリ用ネットワークライブラリ)
ネットワーク通信用ライブラリVOLLEYを使いこなす
Transmitting Network Data Using Volley

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/12(土) 19:24:00|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
前のページ 次のページ