Symfoware

Symfowareについての考察blog

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. | 編集

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. | 編集

Android ヘッダー(ActionBar,ToolBar)にロゴ画像を表示する

Androidのヘッダーに表示されている領域にロゴを表示したい。

786_01.png



ActionBarからToolBarへ



表示されているオブジェクト、「ActionBar」というらしいのですが、
Android 5.0以降は「ToolBar」を使用したほうがカスタマイズしやすいようです。

AndroidのToolBar(新しいActionBar)メモ


でも、ヘッダー部分自分で追加した記憶がないんですよ。
既存のヘッダー(ActionBar)を削除するところから始めていきます。

res/values/styles.xmlを開くと、AppThemeの宣言があると思います。


  1. <resources>
  2.     <!-- Base application theme. -->
  3.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  4.         <!-- Customize your theme here. -->
  5.         <item name="colorPrimary">@color/colorPrimary</item>
  6.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  7.         <item name="colorAccent">@color/colorAccent</item>
  8.     </style>
  9. </resources>



「Theme.AppCompat.Light.DarkActionBar」の箇所を
「Theme.AppCompat.Light.NoActionBar」に変更。


  1. <resources>
  2.     <!-- Base application theme. -->
  3.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  4.         <!-- Customize your theme here. -->
  5.         <item name="colorPrimary">@color/colorPrimary</item>
  6.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  7.         <item name="colorAccent">@color/colorAccent</item>
  8.     </style>
  9. </resources>




これでActionBarは表示されなくなりました。

786_02.png



続いて、activity_main.xmlにToolBarのレイアウトを記載。

・activity_main.xmlにToolBar


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical"
  7.     >
  8.     <android.support.v7.widget.Toolbar
  9.         android:id="@+id/tool_bar"
  10.         android:layout_height="wrap_content"
  11.         android:layout_width="match_parent"
  12.         android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
  13.         android:minHeight="?attr/actionBarSize"
  14.         android:background="?attr/colorPrimary">
  15.     </android.support.v7.widget.Toolbar>
  16. </LinearLayout>





MainActivity.javaでアイコンをセットしてやります。

・MainActivity.java


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.support.v7.widget.Toolbar;
  4. public class MainActivity extends AppCompatActivity {
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         // ツールバーをアクションバーとしてセット
  10.         Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
  11.         setSupportActionBar(toolbar);
  12.         // アイコンを指定
  13.         toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);
  14.         
  15.     }
  16. }




アイコンが表示されました。

786_03.png






ナビゲーションボタンやタイトル、サブタイトル



上記でアイコンを表示した位置、通常は戻るようの矢印が表示されている領域です。


getSupportActionBar().setDisplayHomeAsUpEnabled(true);

とすると、アイコンが矢印で上書きされます。


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.support.v7.widget.Toolbar;
  4. public class MainActivity extends AppCompatActivity {
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         // ツールバーをアクションバーとしてセット
  10.         Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
  11.         setSupportActionBar(toolbar);
  12.         // アイコンを指定
  13.         toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);
  14.         // Home/Upナビゲーション
  15.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  16.     }
  17. }



786_04.png


setLogoという、ロゴを設定するメソッドがあるので、それを使用すればOK


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.support.v7.widget.Toolbar;
  4. public class MainActivity extends AppCompatActivity {
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         // ツールバーをアクションバーとしてセット
  10.         Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
  11.         setSupportActionBar(toolbar);
  12.         
  13.         // アイコンを指定
  14.         toolbar.setLogo(R.mipmap.ic_launcher_round);
  15.         // Home/Upナビゲーション
  16.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  17.     }
  18. }



786_05.png



タイトル、サブタイトルも指定可能です。


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.support.v7.widget.Toolbar;
  4. public class MainActivity extends AppCompatActivity {
  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         // ツールバーをアクションバーとしてセット
  10.         Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
  11.         // ここで呼び出しては行けない
  12.         //setSupportActionBar(toolbar);
  13.         // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  14.         // アイコンを指定
  15.         toolbar.setLogo(R.mipmap.ic_launcher_round);
  16.         toolbar.setTitle("setTitleした領域");
  17.         toolbar.setSubtitle("setSubtitleした領域");
  18.         // toolbarの準備を終えて呼び出すこと
  19.         setSupportActionBar(toolbar);
  20.         // 最後に呼び出すこと
  21.         // Home/Upナビゲーション
  22.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  23.     }
  24. }



786_06.png


この時、メソッドの呼び出し順に注意する必要があります。

getSupportActionBar()を最後に呼び出さないとエラーで落ちます。

toolbar.setTitle()した後でsetSupportActionBar(toolbar)しないとタイトルが変わりません。
AndroidManifest.xmlのandroid:labelで指定している値となります。







メニューの表示



メニューの表示方法はこちらを参考にしました。
[Android] Toolbar:ツールバーのメニューを表示する


まず、メニュー用のレイアウトファイルを追加します。

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

786_07.png


「menu」を選択してOK

786_08.png



res/menuで右クリック。
[New] - [Menu resource file]を選択。

786_09.png


「menu_main」という名前でファイルを作成。

786_10.png


ファイルの内容は以下のようになります。


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item
  5.         android:id="@+id/action_settings"
  6.         android:title="メニュー1"
  7.         app:showAsAction="never" />
  8.     <item
  9.         android:id="@+id/action_settings2"
  10.         android:title="メニュー2"
  11.         app:showAsAction="never"
  12.         />
  13. </menu>




app:showAsAction="never"の意味は後ほど試すことにして、これでメニューの定義は終了です。

定義すれば表示されるわけではなく、MainActivity.javaにメニュー設定のメソッドをオーバーライドして、
先ほど作成したレイアウトファイルを設定します。


  1.     @Override
  2.     public boolean onCreateOptionsMenu(Menu menu) {
  3.         getMenuInflater().inflate(R.menu.menu_main, menu);
  4.         return true;
  5.     }





プログラムはこうなりました。

・MainActivity.java


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.support.v7.widget.Toolbar;
  4. import android.view.Menu;
  5. public class MainActivity extends AppCompatActivity {
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_main);
  10.         // ツールバーをアクションバーとしてセット
  11.         Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
  12.         // ここで呼び出しては行けない
  13.         //setSupportActionBar(toolbar);
  14.         // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  15.         // アイコンを指定
  16.         toolbar.setLogo(R.mipmap.ic_launcher_round);
  17.         toolbar.setTitle("setTitleした領域");
  18.         toolbar.setSubtitle("setSubtitleした領域");
  19.         // toolbarの準備を終えて呼び出すこと
  20.         setSupportActionBar(toolbar);
  21.         // 最後に呼び出すこと
  22.         // Home/Upナビゲーション
  23.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  24.     }
  25.     @Override
  26.     public boolean onCreateOptionsMenu(Menu menu) {
  27.         getMenuInflater().inflate(R.menu.menu_main, menu);
  28.         return true;
  29.     }
  30. }




メニューが表示できました。

786_11.png

786_12.png



app:showAsAction



app:showAsActionの指定の意味、こちらが参考になりました。
Android 4.x時代のアプリにないと残念なActionBarとは (2/3)


never:常に表示しない
ifRoom:表示する余裕があれば表示
always:常に表示
withText:android:titleのテキストを表示。"|"を使用して他の値と同時に指定可能
collapseActionView:android:actionViewLayoutで指定されているアクションビューと関連付ける。"|"を使用して他の値と同時に指定可能

試しに、メニュー1をalwaysに変更してみます。

786_13.png


ツールバーにメニュー1が表示されました。
アイコンをクリックした時は、メニュー2しか表示されなくなります。

786_14.png


メニュー1、メニュー2ともにalwaysにした場合は、メニューのアイコンが非表示となります。

786_15.png

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

  1. 2017/08/20(日) 23:03:17|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Android RelativiLayoutを使用してのレイアウトパターン

Androidで表示する位置の詳細を決めるとき、Java Swingと同様SouthやNorthで指定すると思っていたのですが、
どうやら違うようです。

RelativeLayoutを使用して、レイアウトのパターンを確認してみました。

こちらを参考にしています。
LinearLayoutとRelativeLayoutの使い方をまとめてみた




West,Center,East



左、中央、右にそれぞれ配置してみます。

785_01.png


左:
layout_alignParentTop="true"で上
layout_alignParentLeft="true"で左

右:
layout_alignParentTop="true"で上
layout_alignParentRight="true"で左

中央:
layout_alignParentTop="true"で上
layout_toRightOf="@+id/[左]"で、左に配置したいオブジェクトの次に表示されることを指定
layout_toLeftOf="@+id/[右]"で、右に配置したいオブジェクトの前に表示されることを指定


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     >
  7.     <Button
  8.         android:id="@+id/btn1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="ボタン1"
  12.         android:layout_alignParentTop="true"
  13.         android:layout_alignParentLeft="true">
  14.     </Button>
  15.     <Button
  16.         android:id="@+id/btn2"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:text="ボタン2"
  20.         android:layout_alignParentTop="true"
  21.         android:layout_toRightOf="@+id/btn1"
  22.         android:layout_toLeftOf="@+id/btn3">
  23.     </Button>
  24.     <Button
  25.         android:id="@+id/btn3"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:text="ボタン3"
  29.         android:layout_alignParentTop="true"
  30.         android:layout_alignParentRight="true">
  31.     </Button>
  32. </RelativeLayout>







下にぴったり配置



応用で、layout_alignParentBottom="true"を指定すれば下に移動します。

785_02.png


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     >
  7.     <Button
  8.         android:id="@+id/btn1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="ボタン1"
  12.         android:layout_alignParentBottom="true"
  13.         android:layout_alignParentLeft="true">
  14.     </Button>
  15.     <Button
  16.         android:id="@+id/btn2"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:text="ボタン2"
  20.         android:layout_alignParentBottom="true"
  21.         android:layout_toRightOf="@+id/btn1"
  22.         android:layout_toLeftOf="@+id/btn3">
  23.     </Button>
  24.     <Button
  25.         android:id="@+id/btn3"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:text="ボタン3"
  29.         android:layout_alignParentBottom="true"
  30.         android:layout_alignParentRight="true">
  31.     </Button>
  32. </RelativeLayout>






上の領域にListViewを配置した場合、常に下の領域にボタンが表示されます。
フローティングみたいな効果となりますね。

785_03.png


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     >
  7.     <ListView
  8.         android:id="@+id/listview1"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:layout_alignParentTop="true" />
  12.     <Button
  13.         android:id="@+id/btn1"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:text="ボタン1"
  17.         android:layout_alignParentBottom="true"
  18.         android:layout_alignParentLeft="true">
  19.     </Button>
  20.     <Button
  21.         android:id="@+id/btn2"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="wrap_content"
  24.         android:text="ボタン2"
  25.         android:layout_alignParentBottom="true"
  26.         android:layout_toRightOf="@+id/btn1"
  27.         android:layout_toLeftOf="@+id/btn3">
  28.     </Button>
  29.     <Button
  30.         android:id="@+id/btn3"
  31.         android:layout_width="wrap_content"
  32.         android:layout_height="wrap_content"
  33.         android:text="ボタン3"
  34.         android:layout_alignParentBottom="true"
  35.         android:layout_alignParentRight="true">
  36.     </Button>
  37. </RelativeLayout>







上下に領域を表示



上下にボタンを表示したい場合は組み合わせればOKです。
この指定だと、上下のボタンがフローティングのように表示されます。

785_04.png


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     >
  7.     <Button
  8.         android:id="@+id/btn1"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="wrap_content"
  11.         android:text="ボタン1"
  12.         android:layout_alignParentTop="true"
  13.         android:layout_alignParentLeft="true">
  14.     </Button>
  15.     <Button
  16.         android:id="@+id/btn2"
  17.         android:layout_width="match_parent"
  18.         android:layout_height="wrap_content"
  19.         android:text="ボタン2"
  20.         android:layout_alignParentTop="true"
  21.         android:layout_toRightOf="@+id/btn1"
  22.         android:layout_toLeftOf="@+id/btn3">
  23.     </Button>
  24.     <Button
  25.         android:id="@+id/btn3"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:text="ボタン3"
  29.         android:layout_alignParentTop="true"
  30.         android:layout_alignParentRight="true">
  31.     </Button>
  32.     <ListView
  33.         android:id="@+id/listview1"
  34.         android:layout_width="match_parent"
  35.         android:layout_height="match_parent"
  36.         android:layout_alignParentTop="true" />
  37.     <Button
  38.         android:id="@+id/btn4"
  39.         android:layout_width="wrap_content"
  40.         android:layout_height="wrap_content"
  41.         android:text="ボタン4"
  42.         android:layout_alignParentBottom="true"
  43.         android:layout_alignParentLeft="true">
  44.     </Button>
  45.     <Button
  46.         android:id="@+id/btn5"
  47.         android:layout_width="match_parent"
  48.         android:layout_height="wrap_content"
  49.         android:text="ボタン5"
  50.         android:layout_alignParentBottom="true"
  51.         android:layout_toRightOf="@+id/btn4"
  52.         android:layout_toLeftOf="@+id/btn6">
  53.     </Button>
  54.     <Button
  55.         android:id="@+id/btn6"
  56.         android:layout_width="wrap_content"
  57.         android:layout_height="wrap_content"
  58.         android:text="ボタン6"
  59.         android:layout_alignParentBottom="true"
  60.         android:layout_alignParentRight="true">
  61.     </Button>
  62. </RelativeLayout>





リスト先頭、末尾の表示が見きれてしまうので、常に上下のボタンを表示しておきたい場合は
中央のレイアウト(今回はListView)に
・layout_below="自分の上に表示されるオブジェクト"
・layout_above="自分の下に表示されるオブジェクト"
を指定して、中央の領域を確保します。

785_05.png



  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <Button
  7.         android:id="@+id/btn1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="ボタン1"
  11.         android:layout_alignParentTop="true"
  12.         android:layout_alignParentLeft="true">
  13.     </Button>
  14.     <Button
  15.         android:id="@+id/btn2"
  16.         android:layout_width="match_parent"
  17.         android:layout_height="wrap_content"
  18.         android:text="ボタン2"
  19.         android:layout_alignParentTop="true"
  20.         android:layout_toRightOf="@+id/btn1"
  21.         android:layout_toLeftOf="@+id/btn3">
  22.     </Button>
  23.     <Button
  24.         android:id="@+id/btn3"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:text="ボタン3"
  28.         android:layout_alignParentTop="true"
  29.         android:layout_alignParentRight="true">
  30.     </Button>
  31.     <ListView
  32.         android:id="@+id/listview1"
  33.         android:layout_width="match_parent"
  34.         android:layout_height="match_parent"
  35.         android:layout_below="@+id/btn2"
  36.         android:layout_above="@+id/btn5"/>
  37.     <Button
  38.         android:id="@+id/btn4"
  39.         android:layout_width="wrap_content"
  40.         android:layout_height="wrap_content"
  41.         android:text="ボタン4"
  42.         android:layout_alignParentBottom="true"
  43.         android:layout_alignParentLeft="true">
  44.     </Button>
  45.     <Button
  46.         android:id="@+id/btn5"
  47.         android:layout_width="match_parent"
  48.         android:layout_height="wrap_content"
  49.         android:text="ボタン5"
  50.         android:layout_alignParentBottom="true"
  51.         android:layout_toRightOf="@+id/btn4"
  52.         android:layout_toLeftOf="@+id/btn6">
  53.     </Button>
  54.     <Button
  55.         android:id="@+id/btn6"
  56.         android:layout_width="wrap_content"
  57.         android:layout_height="wrap_content"
  58.         android:text="ボタン6"
  59.         android:layout_alignParentBottom="true"
  60.         android:layout_alignParentRight="true">
  61.     </Button>
  62. </RelativeLayout>






9分割



9分割する例です。

785_06.png


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <Button
  7.         android:id="@+id/btn1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:text="ボタン1"
  11.         android:layout_alignParentTop="true"
  12.         android:layout_alignParentLeft="true">
  13.     </Button>
  14.     <Button
  15.         android:id="@+id/btn2"
  16.         android:layout_width="match_parent"
  17.         android:layout_height="wrap_content"
  18.         android:text="ボタン2"
  19.         android:layout_alignParentTop="true"
  20.         android:layout_toRightOf="@+id/btn1"
  21.         android:layout_toLeftOf="@+id/btn3">
  22.     </Button>
  23.     <Button
  24.         android:id="@+id/btn3"
  25.         android:layout_width="wrap_content"
  26.         android:layout_height="wrap_content"
  27.         android:text="ボタン3"
  28.         android:layout_alignParentTop="true"
  29.         android:layout_alignParentRight="true">
  30.     </Button>
  31.     <Button
  32.         android:id="@+id/btn7"
  33.         android:layout_width="match_parent"
  34.         android:layout_height="match_parent"
  35.         android:text="ボタン7"
  36.         android:layout_below="@+id/btn2"
  37.         android:layout_above="@+id/btn5"
  38.         android:layout_toLeftOf="@+id/btn2">
  39.     </Button>
  40.     <ListView
  41.         android:id="@+id/listview1"
  42.         android:layout_width="wrap_content"
  43.         android:layout_height="wrap_content"
  44.         android:layout_toRightOf="@+id/btn7"
  45.         android:layout_toLeftOf="@+id/btn8"
  46.         android:layout_below="@+id/btn2"
  47.         android:layout_above="@+id/btn5"/>
  48.     <Button
  49.         android:id="@+id/btn8"
  50.         android:layout_width="match_parent"
  51.         android:layout_height="match_parent"
  52.         android:text="ボタン8"
  53.         android:layout_below="@+id/btn2"
  54.         android:layout_above="@+id/btn5"
  55.         android:layout_toRightOf="@+id/btn2">
  56.     </Button>
  57.     <Button
  58.         android:id="@+id/btn4"
  59.         android:layout_width="wrap_content"
  60.         android:layout_height="wrap_content"
  61.         android:text="ボタン4"
  62.         android:layout_alignParentBottom="true"
  63.         android:layout_alignParentLeft="true">
  64.     </Button>
  65.     <Button
  66.         android:id="@+id/btn5"
  67.         android:layout_width="match_parent"
  68.         android:layout_height="wrap_content"
  69.         android:text="ボタン5"
  70.         android:layout_alignParentBottom="true"
  71.         android:layout_toRightOf="@+id/btn4"
  72.         android:layout_toLeftOf="@+id/btn6">
  73.     </Button>
  74.     <Button
  75.         android:id="@+id/btn6"
  76.         android:layout_width="wrap_content"
  77.         android:layout_height="wrap_content"
  78.         android:text="ボタン6"
  79.         android:layout_alignParentBottom="true"
  80.         android:layout_alignParentRight="true">
  81.     </Button>
  82. </RelativeLayout>







組み合わせ



ヘッダーと左側に固定のビュー。
残りの領域でリストを表示する例。

785_07.png


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <Button
  7.         android:id="@+id/btn1"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:text="ボタン1"
  11.         android:layout_alignParentTop="true"
  12.         android:layout_alignParentLeft="true">
  13.     </Button>
  14.     <Button
  15.         android:id="@+id/btn7"
  16.         android:layout_width="wrap_content"
  17.         android:layout_height="match_parent"
  18.         android:text="ボタン7"
  19.         android:layout_alignParentLeft="true"
  20.         android:layout_below="@+id/btn1">
  21.     </Button>
  22.     <ListView
  23.         android:id="@+id/listview1"
  24.         android:layout_width="match_parent"
  25.         android:layout_height="match_parent"
  26.         android:layout_toRightOf="@+id/btn7"
  27.         android:layout_below="@+id/btn1" />
  28. </RelativeLayout>




【参考URL】

今さら聞けないRelativeLayoutの話
LinearLayoutとRelativeLayoutの使い方をまとめてみた
Androidアプリ開発レイアウト探訪「画面下部にボタン固定+リストビューはフル」

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

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