Symfoware

Symfowareについての考察blog

PHPでexcel(xlsx)ファイルをPhpSpreadsheet + CodeIgniter 3で出力

PHPでxlsx形式のファイルを出力してみます。

こちらを参考に
PHPExcelの後継っぽいPhpSpreadsheetでExcelファイルを読み書きするサンプルコード
PhpSpreadsheetを使用します。

https://github.com/PHPOffice/PhpSpreadsheet
https://phpspreadsheet.readthedocs.io/en/develop/


CodeIgniter 3を使用して出力を試してみたいと思います。



composerでの取得



composerで取得したライブラリをCodeIgniterで使用する方法。
CodeIgniter 3でComposer(コンポーザー)のautoload

こちらを思い出しながら、PhpSpreadsheetの設置を行います。

まず、CodeIgniterのapplicationディレクトリ内にcomposer.jsonファイルを作成。

記載する内容は以下の通り。

・composer.json


  1. {
  2.     "require": {
  3.         "phpoffice/phpspreadsheet": "dev-develop"
  4.     }
  5. }




開発版を使用することにしました。

applicationディレクトリでcomposerコマンドを実行。


$ composer install



これでapplication/vendorディレクトリにPhpSpreadsheetと必要なライブラリが配置されます。



CodeIgniterでcomposerのautoloadを有効にするため、
application/config/config.phpを編集。

composer_autoloadをTRUEに変更します。


  1. $config['composer_autoload'] = TRUE;



これで準備は整いました。





hello world



とにかくxlsxファイルを出力してみます。
application/controllers/Sample.phpを作成。


・Sample.php


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. class Sample extends CI_Controller {
  5.     public function index() {
  6.         
  7.         $spreadsheet = new Spreadsheet();
  8.         $sheet = $spreadsheet->getActiveSheet();
  9.         $sheet->setCellValue('A1', 'Hello World !');
  10.         
  11.         $writer = new Xlsx($spreadsheet);
  12.         $writer->save('hello world.xlsx');
  13.         
  14.     }
  15. }




CodeIgniterのルートディレクトリ(index.phpがある階層)に移動し、
コマンドで実行してやります。


$ php index.php sample




「hello world.xlsx」が出力できました。

799_01.png



日本語を出力してみます。


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. class Sample extends CI_Controller {
  5.     public function index() {
  6.         
  7.         $spreadsheet = new Spreadsheet();
  8.         $sheet = $spreadsheet->getActiveSheet();
  9.         $sheet->setCellValue('A1', '日本語でこんにちは!');
  10.         
  11.         $writer = new Xlsx($spreadsheet);
  12.         $writer->save('hello world.xlsx');
  13.         
  14.     }
  15. }




特に問題なさそうです。

799_02.png


改行もOK


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. class Sample extends CI_Controller {
  5.     public function index() {
  6.         
  7.         $spreadsheet = new Spreadsheet();
  8.         $sheet = $spreadsheet->getActiveSheet();
  9.         $sheet->setCellValue('A1', "日本語でこんにちは!\n改行");
  10.         
  11.         $writer = new Xlsx($spreadsheet);
  12.         $writer->save('hello world.xlsx');
  13.         
  14.     }
  15. }



799_03.png






罫線



罫線の設定はサンプルの「23_Sharedstyles.php」が参考になります。


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. use PhpOffice\PhpSpreadsheet\Style;
  5. use PhpOffice\PhpSpreadsheet\Style\Border;
  6. class Sample extends CI_Controller {
  7.     public function index() {
  8.         
  9.         $spreadsheet = new Spreadsheet();
  10.         $sheet = $spreadsheet->getActiveSheet();
  11.         
  12.         // スタイルを指定
  13.         $sharedStyle = new Style();
  14.         $sharedStyle->applyFromArray([
  15.             'borders' => [
  16.                 'bottom' => ['borderStyle' => Border::BORDER_THIN],
  17.                 'right' => ['borderStyle' => Border::BORDER_MEDIUM],
  18.             ]
  19.         ]);
  20.         
  21.         // セルの範囲を指定して、スタイルを反映
  22.         $spreadsheet->getActiveSheet()->duplicateStyle($sharedStyle, 'A1:E1');
  23.         
  24.         $writer = new Xlsx($spreadsheet);
  25.         $writer->save('hello world.xlsx');
  26.         
  27.     }
  28. }



799_04.png


指定可能な線のスタイルは以下のとおり。


Border::BORDER_NONE
Border::BORDER_DASHDOT
Border::BORDER_DASHDOTDOT
Border::BORDER_DASHED
Border::BORDER_DOTTED
Border::BORDER_DOUBLE
Border::BORDER_HAIR
Border::BORDER_MEDIUM
Border::BORDER_MEDIUMDASHDOT
Border::BORDER_MEDIUMDASHDOTDOT
Border::BORDER_MEDIUMDASHED
Border::BORDER_SLANTDASHDOT
Border::BORDER_THICK
Border::BORDER_THIN



799_05.png




セルの色



セルに色を付けたい場合も罫線と同様スタイルを指定してやります。


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. use PhpOffice\PhpSpreadsheet\Style;
  5. use PhpOffice\PhpSpreadsheet\Style\Border;
  6. use PhpOffice\PhpSpreadsheet\Style\Fill;
  7. class Sample extends CI_Controller {
  8.     public function index() {
  9.         
  10.         $spreadsheet = new Spreadsheet();
  11.         $sheet = $spreadsheet->getActiveSheet();
  12.         
  13.         // スタイルを指定
  14.         $sharedStyle = new Style();
  15.         $sharedStyle->applyFromArray([
  16.             'fill' => [
  17.                 'fillType' => Fill::FILL_SOLID,
  18.                 'color' => ['argb' => 'FFCCFFCC'],
  19.             ]
  20.         ]);
  21.         
  22.         // セルの範囲を指定して、スタイルを反映
  23.         $spreadsheet->getActiveSheet()->duplicateStyle($sharedStyle, 'A1:E1');
  24.         
  25.         $writer = new Xlsx($spreadsheet);
  26.         $writer->save('hello world.xlsx');
  27.         
  28.     }
  29. }



799_06.png



Fillで指定できるのは以下の通り。


Fill::FILL_NONE
Fill::FILL_SOLID
Fill::FILL_GRADIENT_LINEAR
Fill::FILL_GRADIENT_PATH
Fill::FILL_PATTERN_DARKDOWN
Fill::FILL_PATTERN_DARKGRAY
Fill::FILL_PATTERN_DARKGRID
Fill::FILL_PATTERN_DARKHORIZONTAL
Fill::FILL_PATTERN_DARKTRELLIS
Fill::FILL_PATTERN_DARKUP
Fill::FILL_PATTERN_DARKVERTICAL
Fill::FILL_PATTERN_GRAY0625
Fill::FILL_PATTERN_GRAY125
Fill::FILL_PATTERN_LIGHTDOWN
Fill::FILL_PATTERN_LIGHTGRAY
Fill::FILL_PATTERN_LIGHTGRID
Fill::FILL_PATTERN_LIGHTHORIZONTAL
Fill::FILL_PATTERN_LIGHTTRELLIS
Fill::FILL_PATTERN_LIGHTUP
Fill::FILL_PATTERN_LIGHTVERTICAL
Fill::FILL_PATTERN_MEDIUMGRAY




色を指定した場合、差異はないようです。

799_07.png


色を指定しなかった場合、このようになりました。

799_08.png



罫線と色を同時に指定することも可能です。


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. use PhpOffice\PhpSpreadsheet\Style;
  5. use PhpOffice\PhpSpreadsheet\Style\Border;
  6. use PhpOffice\PhpSpreadsheet\Style\Fill;
  7. class Sample extends CI_Controller {
  8.     public function index() {
  9.         
  10.         $spreadsheet = new Spreadsheet();
  11.         $sheet = $spreadsheet->getActiveSheet();
  12.         
  13.         // スタイルを指定
  14.         $sharedStyle = new Style();
  15.         $sharedStyle->applyFromArray([
  16.             'fill' => [
  17.                 'fillType' => Fill::FILL_SOLID,
  18.                 'color' => ['argb' => 'FFCCFFCC'],
  19.             ],
  20.             'borders' => [
  21.                 'bottom' => ['borderStyle' => Border::BORDER_THIN],
  22.                 'right' => ['borderStyle' => Border::BORDER_MEDIUM],
  23.             ]
  24.         ]);
  25.         
  26.         // セルの範囲を指定して、スタイルを反映
  27.         $spreadsheet->getActiveSheet()->duplicateStyle($sharedStyle, 'A1:E1');
  28.         
  29.         $writer = new Xlsx($spreadsheet);
  30.         $writer->save('hello world.xlsx');
  31.         
  32.     }
  33. }




799_09.png




作成したファイルのダウンロード



ブラウザで表示した時、作成したファイルをダウンロードさせるパターン。
※サンプルのままですが。


  1. <?php
  2. use PhpOffice\PhpSpreadsheet\Spreadsheet;
  3. use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
  4. use PhpOffice\PhpSpreadsheet\Style;
  5. use PhpOffice\PhpSpreadsheet\Style\Border;
  6. use PhpOffice\PhpSpreadsheet\Style\Fill;
  7. class Sample extends CI_Controller {
  8.     public function index() {
  9.         
  10.         $spreadsheet = new Spreadsheet();
  11.         $sheet = $spreadsheet->getActiveSheet();
  12.         
  13.         // スタイルを指定
  14.         $sharedStyle = new Style();
  15.         $sharedStyle->applyFromArray([
  16.             'fill' => [
  17.                 'fillType' => Fill::FILL_SOLID,
  18.                 'color' => ['argb' => 'FFCCFFCC'],
  19.             ],
  20.             'borders' => [
  21.                 'bottom' => ['borderStyle' => Border::BORDER_THIN],
  22.                 'right' => ['borderStyle' => Border::BORDER_MEDIUM],
  23.             ]
  24.         ]);
  25.         
  26.         // セルの範囲を指定して、スタイルを反映
  27.         $spreadsheet->getActiveSheet()->duplicateStyle($sharedStyle, 'A1:E1');
  28.         
  29.         $writer = new Xlsx($spreadsheet);
  30.         //$writer->save('hello world.xlsx');
  31.         
  32.         // Redirect output to a client’s web browser (Xlsx)
  33.         header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  34.         header('Content-Disposition: attachment;filename="01simple.xlsx"');
  35.         header('Cache-Control: max-age=0');
  36.         // If you're serving to IE 9, then the following may be needed
  37.         header('Cache-Control: max-age=1');
  38.         // If you're serving to IE over SSL, then the following may be needed
  39.         header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); // Date in the past
  40.         header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT'); // always modified
  41.         header('Cache-Control: cache, must-revalidate'); // HTTP/1.1
  42.         header('Pragma: public'); // HTTP/1.0
  43.         
  44.         $writer->save('php://output');
  45.         exit;
  46.         
  47.     }
  48. }



関連記事

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

  1. 2017/09/21(木) 00:09:01|
  2. PHP
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

android Fragmentを右から左にスライドアニメーションして入れ替える

Slideを使用してFragmentの入れ替えを行ってみました。
Android 横にスライドしてFragmentを切り替える

APIレベル21以前にも対応したかったので、独自にアニメーションを定義して
自前でスライドしてみます。


android.R.anim.slide_in_left



スライドのサンプルとして、android.R.anim.slide_in_left、android.R.anim.slide_out_rightが
用意されています。

FragmentTransaction#setCustomAnimationsを使用して、
Fragmentを入れ替える部分はこんなコードになりました。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
  5.         // Fragmentを組み込む
  6.         transaction.replace(R.id.content, fragment);
  7.         // 初回表示以外の場合はスタックに追加
  8.         if (mCount != 1) {
  9.             transaction.addToBackStack(null);
  10.         }
  11.         // 上記の変更を反映する
  12.         transaction.commit();
  13.         mCount++;





これで右から左に入れ替えることはできました。








anim



アニメーションはxmlファイルで定義するようです。

resを右クリックで[New] - [Android resource file]を選択

798_01.png


「Resource type」に「Animation」を選択。
「slide_in_right」というファイルを作成しました。

798_02.png


ファイルの内容は、android.R.anim.slide_in_leftを参考に以下のとおり。


・slide_in_right.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="100%p" android:toXDelta="0"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




同様に、outするときの動作も指定します。
slide_out_leftを作成。

・slide_out_left.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="0" android:toXDelta="-100%p"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




ソースを作成したリソースを作成するように変更します。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_left);
  5.         // Fragmentを組み込む
  6.         transaction.replace(R.id.content, fragment);
  7.         // 初回表示以外の場合はスタックに追加
  8.         if (mCount != 1) {
  9.             transaction.addToBackStack(null);
  10.         }
  11.         // 上記の変更を反映する
  12.         transaction.commit();
  13.         mCount++;




これで右から左にスライドしてくれました。







popBackStack対応



上の動画でもわかるように、戻るボタンを押した時はアニメーションしてくれません。
戻る時のアニメーションは、
FragmentTransaction#setCustomAnimationsの第三、第四引数で指定します。

戻る時のアニメーションを指定するファイルを作成します。
左から入って、右に抜けていきます。

・slide_in_left


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="-100%p" android:toXDelta="0"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




・slide_out_right


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <translate android:fromXDelta="0" android:toXDelta="100%p"
  4.         android:duration="@android:integer/config_mediumAnimTime"/>
  5.     <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
  6.         android:duration="@android:integer/config_mediumAnimTime" />
  7. </set>




プログラムを修正。


  1.         Fragment fragment = Fragment1.newInstance(mCount);
  2.         FragmentManager fragmentManager = getSupportFragmentManager();
  3.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  4.         transaction.setCustomAnimations(
  5.                 R.anim.slide_in_right, R.anim.slide_out_left, // 追加した時のアニメーション
  6.                 R.anim.slide_in_left, R.anim.slide_out_right // 戻る(popBackStack)した時のアニメーション
  7.         );
  8.         // Fragmentを組み込む
  9.         transaction.replace(R.id.content, fragment);
  10.         // 初回表示以外の場合はスタックに追加
  11.         if (mCount != 1) {
  12.             transaction.addToBackStack(null);
  13.         }
  14.         // 上記の変更を反映する
  15.         transaction.commit();
  16.         mCount++;




狙い通りの動作になりました。




【参考URL】

Fragment入れ替え時のアニメーション
Support package の FragmentTransaction 時のアニメーションをセットする
Android:Fragmentの画面遷移時にアニメーション
LollipopでFragmentのスライドインアニメーション時の問題
関連記事

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

  1. 2017/09/13(水) 23:25:25|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

android FragmentTransaction.addToBackStackでスタックした情報をクリアする

前の画面に戻る機能は、FragmentTransactionのaddToBackStackを使用すると
簡単に実装できます。

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


積み上げたスタックの情報を消去(clear)したかったのですが、
やり方がわからず。


スタックの初期化



こちらが参考になりました。
Clear back stack using fragments

1つ前のスタックを消すことはやったことたあるのですが、
Android 戻るボタンを押した時、積み上げたBackStackを1つ飛ばした画面に戻りたい
これと同様、スタックがなくなるまで前に戻ればOKです。


サンプルはこんな感じになりました。

・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:orientation="vertical"
  7.     android:layout_width="match_parent"
  8.     android:layout_height="match_parent"
  9.     tools:context="com.example.baranche.myapplication.MainActivity">
  10.     <LinearLayout
  11.         android:orientation="horizontal"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="wrap_content">
  14.         <Button
  15.             android:id="@+id/button"
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="wrap_content"
  18.             android:text="Add"
  19.             android:onClick="click"
  20.             />
  21.         <Button
  22.             android:id="@+id/button2"
  23.             android:layout_width="wrap_content"
  24.             android:layout_height="wrap_content"
  25.             android:text="Clear"
  26.             android:onClick="clear"
  27.             />
  28.     </LinearLayout>
  29.     <LinearLayout
  30.         android:id="@+id/content"
  31.         android:orientation="vertical"
  32.         android:layout_width="match_parent"
  33.         android:layout_height="match_parent" />
  34. </LinearLayout>




・fragment.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:orientation="vertical"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     >
  8.     <TextView
  9.         android:id="@+id/textView"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent"
  12.         android:textAlignment="center"
  13.         android:textSize="40sp"
  14.         android:text="TextView" />
  15. </LinearLayout>





・MainActivity.java


  1. import android.support.v4.app.Fragment;
  2. import android.support.v4.app.FragmentManager;
  3. import android.support.v4.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. public class MainActivity extends AppCompatActivity {
  8.     private int mCount = 1;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         addStack();
  14.     }
  15.     public void click(View view) {
  16.         addStack();
  17.     }
  18.     public void clear(View view) {
  19.         FragmentManager fragmentManager = getSupportFragmentManager();
  20.         int stackCount = fragmentManager.getBackStackEntryCount();
  21.         for(int i = 0; i < stackCount; ++i) {
  22.             fragmentManager.popBackStack();
  23.         }
  24.         mCount = 1;
  25.         addStack();
  26.     }
  27.     private void addStack() {
  28.         Fragment fragment = Fragment1.newInstance(mCount);
  29.         FragmentManager fragmentManager = getSupportFragmentManager();
  30.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  31.         // Fragmentを組み込む
  32.         transaction.replace(R.id.content, fragment);
  33.         // 初回表示以外の場合はスタックに追加
  34.         if (mCount != 1) {
  35.             transaction.addToBackStack(null);
  36.         }
  37.         // 上記の変更を反映する
  38.         transaction.commit();
  39.         mCount++;
  40.     }
  41. }




・Fragment1.java


  1. import android.os.Bundle;
  2. import android.support.v4.app.Fragment;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.TextView;
  7. public class Fragment1 extends Fragment {
  8.     private int mCount;
  9.     public static Fragment newInstance(int count) {
  10.         Fragment1 fragment = new Fragment1();
  11.         Bundle args = new Bundle();
  12.         args.putInt("COUNT", count);
  13.         fragment.setArguments(args);
  14.         return fragment;
  15.     }
  16.     @Override
  17.     public void onCreate(Bundle savedInstanceState) {
  18.         super.onCreate(savedInstanceState);
  19.         Bundle args = getArguments();
  20.         mCount = args.getInt("COUNT");
  21.     }
  22.     @Override
  23.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  24.         View view = inflater.inflate(R.layout.fragment, container, false);
  25.         TextView text = (TextView)view.findViewById(R.id.textView);
  26.         text.setText(String.format("Stack:%d", mCount));
  27.         return view;
  28.     }
  29. }





アプリ起動時

797_01.png


ADDでスタックを追加していきます。

797_02.png


CLEARでスタックを消去し初期化。
ここで戻るボタンを押すと、前のスタックは存在しないため、狙い通りアプリケーションが終了します。

797_03.png




POP_BACK_STACK_INCLUSIVE



FragmentManager.popBackStack(String name, FragmentManager.POP_BACK_STACK_INCLUSIVE)
これでもスタックを先頭に戻せるとのこと。
試してみます。


  1. import android.support.v4.app.Fragment;
  2. import android.support.v4.app.FragmentManager;
  3. import android.support.v4.app.FragmentTransaction;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. public class MainActivity extends AppCompatActivity {
  8.     private int mCount = 1;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         addStack();
  14.     }
  15.     public void click(View view) {
  16.         addStack();
  17.     }
  18.     public void clear(View view) {
  19.         FragmentManager fragmentManager = getSupportFragmentManager();
  20.         /*
  21.         int stackCount = fragmentManager.getBackStackEntryCount();
  22.         for(int i = 0; i < stackCount; ++i) {
  23.             fragmentManager.popBackStack();
  24.         }
  25.         */
  26.         fragmentManager.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
  27.         mCount = 1;
  28.         addStack();
  29.     }
  30.     private void addStack() {
  31.         Fragment fragment = Fragment1.newInstance(mCount);
  32.         FragmentManager fragmentManager = getSupportFragmentManager();
  33.         final FragmentTransaction transaction = fragmentManager.beginTransaction();
  34.         // Fragmentを組み込む
  35.         transaction.replace(R.id.content, fragment);
  36.         // 初回表示以外の場合はスタックに追加
  37.         if (mCount != 1) {
  38.             transaction.addToBackStack(null);
  39.         }
  40.         // 上記の変更を反映する
  41.         transaction.commit();
  42.         mCount++;
  43.     }
  44. }




このコードでも同様の効果が得られました。

関連記事

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

  1. 2017/09/12(火) 23:06:04|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Ubuntu + Android Studioで実機をUSBに接続してデバッグ

簡単に出来るだろうと思っていたら、思いの外はまったのでメモ。

こちらを参考にしました。
ハードウェア端末上でアプリを実行する
【Ubuntu】Android Studio で実機をデバッグ機として利用する
Android Studioで実機デバッグするには?
USBドライバ , adb 実機でデバイスが認識しない時 (ubuntu / linux / android)



Ubuntu側の設定



Android端末をUSB接続した状態で「lsusb」を実行。


$ lsusb
Bus 002 Device 006: ID 0b05:7781 ASUSTek Computer, Inc.
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 006 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 005 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 003: ID 056e:0101 Elecom Co., Ltd
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub




Android端末のIDを控えておきます。
私の場合、ASUSだったので「0b05」になります。

この「USB ベンダー ID」はこちらのベージでも確認できます。
ハードウェア端末上でアプリを実行する


管理者権限で「/etc/udev/rules.d/51-android.rules」を作成。


$ sudo vi /etc/udev/rules.d/51-android.rules




記載する内容は以下の通り。


SUBSYSTEM=="usb", ATTR{idVendor}=="[調べたUSBベンダーID4桁]", MODE="0666", GROUP="plugdev"



私の場合はこうなりました。


SUBSYSTEM=="usb", ATTR{idVendor}=="0b05", MODE="0666", GROUP="plugdev"




ファイルを作成したら権限を付与。


$ sudo chmod a+r /etc/udev/rules.d/51-android.rules




ここで一回OSごとリブートしました。
(この手順は不要かも)




Android実機の設定



[設定]から[端末情報]を選択。
※設定後にスクリーンショットをとったので、「開発者向けオプション」が表示されていますが、
最初は表示されていません。

796_01.png


[ソフトウェア情報]を選択。

796_02.png


[ビルド番号]を連打します。(7回タップらしい)

796_03.png

すると、開発用のモードに移行したことを示すダイアログが表示されました。
(スクリーンショット撮り忘れ)


てっきり、これでもう実機デバッグOKな状態になったものと思いハマりました。
改めて、[設定] - [開発者向けオプション]を選択

796_04.png


「USBデバッグ」の項目をONに変更します。

796_05.png


これでAndroid Studioの実行するターゲットに表示されるようになりました。

796_06.png
関連記事

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

  1. 2017/09/03(日) 23:25:24|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android Matrixで画像の拡大・縮小

Androidで表示している画像を拡大する方法を調べてみます。


最初のサンプル



画像を拡大するには、「Matrix」を変更すれば良いようです。
Matrix

こんなサンプルを書いてみました。

・activity_main.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout
  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.     tools:context="com.example.baranche.myapplication.MainActivity">
  9.     <Button
  10.         android:id="@+id/btn1"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:text="拡大"
  14.         android:onClick="expansionClick"
  15.         app:layout_constraintTop_toTopOf="parent"
  16.         app:layout_constraintLeft_toRightOf="parent">
  17.     </Button>
  18.     <ImageView
  19.         android:id="@+id/imageView"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="match_parent"
  22.         android:scaleType="center"
  23.         app:layout_constraintTop_toTopOf="@+id/btn1"
  24.         app:layout_constraintLeft_toRightOf="parent"
  25.         app:layout_constraintBottom_toBottomOf="parent"
  26.          />
  27. </android.support.constraint.ConstraintLayout>





・MainActivity.java


  1. import android.graphics.Matrix;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  6. public class MainActivity extends AppCompatActivity {
  7.     private ImageView mImage;
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         mImage = (ImageView)findViewById(R.id.imageView);
  13.         mImage.setImageResource(R.mipmap.ic_launcher);
  14.     }
  15.     public void expansionClick(View view) {
  16.         // matrixを取得
  17.         Matrix m = mImage.getImageMatrix();
  18.         // matrixの値を取得
  19.         float[] values = new float[9];
  20.         m.getValues(values);
  21.         // Xの拡大率を表示
  22.         float scale = values[Matrix.MSCALE_X];
  23.         setTitle("MSCALE_X:" + Float.toString(scale));
  24.         // 一旦matrixをリセット
  25.         m.reset();
  26.         // XYの拡大率を2倍にして再表示
  27.         m.postScale(scale * 2.0f, scale * 2.0f);
  28.         mImage.invalidate();
  29.     }
  30. }





初期表示

795_01.png

ボタンを押したら画像サイズを2倍にする予定ですが、左上によってしまいます。

795_02.png


画像の水平、垂直移動も合わせて指定する必要がありそうです。


  1. import android.graphics.Matrix;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  6. public class MainActivity extends AppCompatActivity {
  7.     private ImageView mImage;
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         mImage = (ImageView)findViewById(R.id.imageView);
  13.         mImage.setImageResource(R.mipmap.ic_launcher);
  14.     }
  15.     public void expansionClick(View view) {
  16.         // matrixを取得
  17.         Matrix m = mImage.getImageMatrix();
  18.         // matrixの値を取得
  19.         float[] values = new float[9];
  20.         m.getValues(values);
  21.         // Xの拡大率を表示
  22.         float scale = values[Matrix.MSCALE_X];
  23.         setTitle("MSCALE_X:" + Float.toString(scale));
  24.         float transx = values[Matrix.MTRANS_X];
  25.         float transy = values[Matrix.MTRANS_Y];
  26.         // 一旦matrixをリセット
  27.         m.reset();
  28.         // XYの拡大率を2倍にして再表示
  29.         m.postScale(scale * 2.0f, scale * 2.0f, -transx, -transy);
  30.         mImage.invalidate();
  31.     }
  32. }




795_03.png


postScaleを使用しないパターンはこちら。


  1. import android.graphics.Matrix;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  6. public class MainActivity extends AppCompatActivity {
  7.     private ImageView mImage;
  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         mImage = (ImageView)findViewById(R.id.imageView);
  13.         mImage.setImageResource(R.mipmap.ic_launcher);
  14.     }
  15.     public void expansionClick(View view) {
  16.         // matrixを取得
  17.         Matrix m = mImage.getImageMatrix();
  18.         // matrixの値を取得
  19.         float[] values = new float[9];
  20.         m.getValues(values);
  21.         // Xの拡大率を表示
  22.         float scale = values[Matrix.MSCALE_X];
  23.         setTitle("MSCALE_X:" + Float.toString(scale));
  24.         // XYの拡大率を2倍に変更
  25.         values[Matrix.MSCALE_X] = scale * 2.0f;
  26.         values[Matrix.MSCALE_Y] = scale * 2.0f;
  27.         // 一旦matrixをリセット
  28.         m.reset();
  29.         m.setValues(values);
  30.         mImage.invalidate();
  31.     }
  32. }



結果はpostScaleを使用した場合と同じになります。




中心を原点に拡大



画像を中央に表示したまま拡大してみます。
元画像 * 拡大サイズを計算し、中央座標に寄るようにXYの移動距離を求めます。


  1. import android.graphics.Matrix;
  2. import android.graphics.Rect;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ImageView;
  7. public class MainActivity extends AppCompatActivity {
  8.     private ImageView mImage;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         mImage = (ImageView)findViewById(R.id.imageView);
  14.         mImage.setImageResource(R.mipmap.ic_launcher);
  15.     }
  16.     public void expansionClick(View view) {
  17.         // matrixを取得
  18.         Matrix m = mImage.getImageMatrix();
  19.         // matrixの値を取得
  20.         float[] values = new float[9];
  21.         m.getValues(values);
  22.         // Xの拡大率を表示
  23.         float scale = values[Matrix.MSCALE_X];
  24.         setTitle("MSCALE_X:" + Float.toString(scale));
  25.         // XYの拡大率を2倍に変更
  26.         values[Matrix.MSCALE_X] *= 2.0f;
  27.         values[Matrix.MSCALE_Y] *= 2.0f;
  28.         // XY座標の移動位置を計算
  29.         calcTrans(values);
  30.         // 値を再設定
  31.         m.setValues(values);
  32.         mImage.invalidate();
  33.     }
  34.     private void calcTrans(float[] values) {
  35.         // 画像の描画領域
  36.         Rect rect = new Rect();
  37.         mImage.getDrawingRect(rect);
  38.         // 元画像のサイズ
  39.         int imgWidth = mImage.getDrawable().getIntrinsicWidth();
  40.         int imgHeight = mImage.getDrawable().getIntrinsicHeight();
  41.         // 拡大後の画像幅
  42.         int imgScaledWidth = Math.round(imgWidth * values[Matrix.MSCALE_X]);
  43.         // 拡大後の画像高さ
  44.         int imgScaledHeight = Math.round(imgHeight * values[Matrix.MSCALE_Y]);
  45.         // 表示位置中央X座標 - (拡大後の画像幅 / 2)がX移動距離
  46.         values[Matrix.MTRANS_X] = (rect.width() / 2) - (imgScaledWidth / 2);
  47.         // 表示位置中央Y座標 - (拡大後の画像高さ / 2)がY移動距離
  48.         values[Matrix.MTRANS_Y] = (rect.height() / 2) - (imgScaledHeight / 2);
  49.     }
  50. }




これで中央を原点に拡大してくれました。

795_04.png

795_05.png




中央を原点に縮小



縮小も拡大と同じ計算で良いはずです。


  1. import android.graphics.Matrix;
  2. import android.graphics.Rect;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ImageView;
  7. public class MainActivity extends AppCompatActivity {
  8.     private ImageView mImage;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         mImage = (ImageView)findViewById(R.id.imageView);
  14.         mImage.setImageResource(R.mipmap.ic_launcher);
  15.     }
  16.     // 拡大ボタン
  17.     public void expansionClick(View view) {
  18.         // matrixを取得
  19.         Matrix m = mImage.getImageMatrix();
  20.         // matrixの値を取得
  21.         float[] values = new float[9];
  22.         m.getValues(values);
  23.         // Xの拡大率を表示
  24.         float scale = values[Matrix.MSCALE_X];
  25.         setTitle("MSCALE_X:" + Float.toString(scale));
  26.         // XYの拡大率を2倍に変更
  27.         values[Matrix.MSCALE_X] *= 2.0f;
  28.         values[Matrix.MSCALE_Y] *= 2.0f;
  29.         // XY座標の移動位置を計算
  30.         calcTrans(values);
  31.         // 値を再設定
  32.         m.setValues(values);
  33.         mImage.invalidate();
  34.     }
  35.     // 縮小ボタン
  36.     public void reductionClick(View view) {
  37.         // matrixを取得
  38.         Matrix m = mImage.getImageMatrix();
  39.         // matrixの値を取得
  40.         float[] values = new float[9];
  41.         m.getValues(values);
  42.         // Xの拡大率を表示
  43.         float scale = values[Matrix.MSCALE_X];
  44.         setTitle("MSCALE_X:" + Float.toString(scale));
  45.         // XYの拡大率を2倍に変更
  46.         values[Matrix.MSCALE_X] /= 2.0f;
  47.         values[Matrix.MSCALE_Y] /= 2.0f;
  48.         // XY座標の移動位置を計算
  49.         calcTrans(values);
  50.         // 値を再設定
  51.         m.setValues(values);
  52.         mImage.invalidate();
  53.     }
  54.     private void calcTrans(float[] values) {
  55.         // 画像の描画領域
  56.         Rect rect = new Rect();
  57.         mImage.getDrawingRect(rect);
  58.         // 元画像のサイズ
  59.         int imgWidth = mImage.getDrawable().getIntrinsicWidth();
  60.         int imgHeight = mImage.getDrawable().getIntrinsicHeight();
  61.         // 拡大後の画像幅
  62.         int imgScaledWidth = Math.round(imgWidth * values[Matrix.MSCALE_X]);
  63.         // 拡大後の画像高さ
  64.         int imgScaledHeight = Math.round(imgHeight * values[Matrix.MSCALE_Y]);
  65.         // 表示位置中央X座標 - (拡大後の画像幅 / 2)がX移動距離
  66.         values[Matrix.MTRANS_X] = (rect.width() / 2) - (imgScaledWidth / 2);
  67.         // 表示位置中央Y座標 - (拡大後の画像高さ / 2)がY移動距離
  68.         values[Matrix.MTRANS_Y] = (rect.height() / 2) - (imgScaledHeight / 2);
  69.     }
  70. }




これで、中央を原点として画像の拡大と縮小が行えるようになりました。

795_06.png

関連記事

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

  1. 2017/09/03(日) 21:48:31|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ