1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

onConfigurationChangedで回転時のレイアウトを変更

Last updated at Posted at 2020-03-19

##やりたかったこと
ImageViewの画像を画面いっぱい(アスペクト比はそのまま)に表示してかつ、ボタンを真下に置きたかったのですが、、、
図1.png
横回転するとボタンが隠れてしまうし、横画面に合わせてレイアウト変えると縦回転したときにボタンの位置がずれてしまってました。
レイアウト用のxmlは1つだけにしたかったので、ソース内で動的にImageViewのサイズを変えることにしました。

##やったこと
####レイアウト

  • レイアウトはConstraintLayoutを使う
  • ImageViewの設定:
    • サイズ(縦向き時):
      • height: wrap_content
      • width: 0dp(match constraint)
    • サイズ(横向き時):
      • height: 0dp(match constraint)
      • width: wrap_content
    • 描画の縦横比を維持するためにandroid:adjustViewBounds = trueを指定
    • ボタンをくっつけるためにapp:layout_constraintVertical_chainStyle="packed"を指定

####Activity

  • マニフェストで、Activityにandroid:configChanges="orientation|screenSize"を追加。縦横の回転を検出できるようにする。
  • 縦横の向きが変わるとonConfigurationChangedがコールされる。その中で、ImageViewのレイアウトを更新。

##ソース

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:padding="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/ic_launcher_background" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //UI取得
        imageView = findViewById(R.id.imageView);
        button = findViewById(R.id.button);
        //一応、起動時の向き取得
        int orientation = getResources().getConfiguration().orientation;
        UpdateLayout(orientation); //レイアウト更新
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        int orientation = newConfig.orientation; //向き取得
        UpdateLayout(orientation); //レイアウト更新
    }

    /**
     * レイアウト更新
     * @param orientation 向き
     */
    protected void UpdateLayout(int orientation){
        //ImageViewのLayoutParam取得
        LayoutParams param = imageView.getLayoutParams();
        if (orientation == Configuration.ORIENTATION_PORTRAIT) {
            // 縦向きの場合
            Log.d("UpdateLayout", "縦向き");
            param.height = LayoutParams.WRAP_CONTENT;
            param.width = 0;
        }
        else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
            // 横向きの場合
            Log.d("UpdateLayout", "横向き");
            param.height = 0;
            param.width = LayoutParams.WRAP_CONTENT;
        }
        imageView.setLayoutParams(param);
    }
}

##参考記事
Androidで横向きか縦向きかを判定する
Androidで画像の縦横比を保ったまま画面幅いっぱいに表示する
https://techblog.zozo.com/entry/constraint_layout

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?