フラグメントのインスタンスが破棄されたときにそのフラグメントがもつグラフデータのインスタンスを保持しておきたい

Question

タブレイアウト＋viewPagerにて
3タブフラグメントを構築しています。
タブ1ではMPChartを使用してグラフ描画しているのですが、
タブ1→タブ2→タブ3→タブ2→タブ1
と戻ってくるとタブ3に移動するとタブ1のフラグメントのインスタンスが消える関係で
タブ1フラグメントでもってるmChartのインスタンスも消えてしまい、
描画データがなくなってしまいます。
viewModelを使って書いてみましたが、タブ1→3→1で再描画されません。

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;
    private SectionsPagerAdapter sectionsPagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
        ViewPager viewPager = binding.viewPager;
        viewPager.setAdapter(sectionsPagerAdapter);
        TabLayout tabs = binding.tabs;
        tabs.setupWithViewPager(viewPager);
        FloatingActionButton fab = binding.fab;

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        feedMultiple();
    }

    private Thread thread;

    private void feedMultiple() {

        if (thread != null)
            thread.interrupt();

        final Runnable runnable = new Runnable() {

            @Override
            public void run() {
                if( sectionsPagerAdapter.getCurrentFragment() instanceof GraphFragment) {
                    ((GraphFragment) sectionsPagerAdapter.getCurrentFragment()).setChart();
                }
            }
        };

        thread = new Thread(new Runnable() {

            @Override
            public void run() {
                for (int i = 0; i < 1000; i++) {

                    // Don't generate garbage runnables inside the loop.
                    runOnUiThread(runnable);

                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        });

        thread.start();
    }
}

GraphFragment.java

/**
 * A placeholder fragment containing a simple view.
 */
public class GraphFragment extends Fragment {

    private PageViewModel pageViewModel;
    private GraphFragmentBinding binding;

    private LineChart chart;
    private MainActivity activity;

    public static GraphFragment newInstance() {
        GraphFragment fragment = new GraphFragment();
        Bundle bundle = new Bundle();
//        bundle.putInt(ARG_SECTION_NUMBER, index);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        activity = (MainActivity) getActivity();
        pageViewModel = new ViewModelProvider(activity).get(PageViewModel.class);

        // Create the observer which updates the UI.
        final Observer<LineChart> observer = new Observer<LineChart>() {
            @Override
            public void onChanged(@Nullable final LineChart newName) {
                // Update the UI, in this case, a TextView.
                addEntry();
            }
        };

        // Observe the LiveData, passing in this activity as the LifecycleOwner and the observer.
        pageViewModel.getLineChart().observe(this, observer);
    }

    @Override
    public View onCreateView(
            @NonNull LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        binding = GraphFragmentBinding.inflate(inflater,container,false);;
        View root = binding.getRoot();
        if(pageViewModel.getValue() == null){
            chart = binding.chart1;
            initChart();
        }
        else{
            chart = pageViewModel.getValue();
        }

        return root;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }

    public void setChart(){
        pageViewModel.setChart(chart);
    }

    public void initChart(){

        // enable description text
        chart.getDescription().setEnabled(true);

        // enable touch gestures
        chart.setTouchEnabled(true);

        // enable scaling and dragging
        chart.setDragEnabled(true);
        chart.setScaleEnabled(true);
        chart.setDrawGridBackground(false);

        // if disabled, scaling can be done on x- and y-axis separately
        chart.setPinchZoom(true);

        // set an alternative background color
        chart.setBackgroundColor(Color.LTGRAY);

        LineData data = new LineData();
        data.setValueTextColor(Color.WHITE);

        // add empty data
        chart.setData(data);

        XAxis xl = chart.getXAxis();
        xl.setLabelRotationAngle(45);
        xl.setTextColor(Color.WHITE);
        xl.setDrawGridLines(false);
        xl.setAvoidFirstLastClipping(true);
        xl.setEnabled(true);

        YAxis leftAxis = chart.getAxisLeft();
        leftAxis.setTextColor(Color.WHITE);
        leftAxis.setAxisMaximum(100f);
        leftAxis.setAxisMinimum(0f);
        leftAxis.setDrawGridLines(true);

        YAxis rightAxis = chart.getAxisRight();
        rightAxis.setEnabled(false);
    }

    public void addEntry() {
        LineData data = chart.getData();

        if (data != null) {

            ILineDataSet set = data.getDataSetByIndex(0);
            // set.addEntry(...); // can be called as well

            if (set == null) {
                set = createSet();
                data.addDataSet(set);
            }

            data.addEntry(new Entry(set.getEntryCount(), (float) (Math.random() * 40) + 30f), 0);
            data.notifyDataChanged();

            // let the chart know it's data has changed
            chart.notifyDataSetChanged();

            // limit the number of visible entries
            chart.setVisibleXRangeMaximum(120);
            // chart.setVisibleYRange(30, AxisDependency.LEFT);

            // move to the latest entry
            chart.moveViewToX(data.getEntryCount());

            // this automatically refreshes the chart (calls invalidate())
            // chart.moveViewTo(data.getXValCount()-7, 55f,
            // AxisDependency.LEFT);
        }
    }

    private LineDataSet createSet() {

        LineDataSet set = new LineDataSet(null, "Dynamic Data");
        set.setAxisDependency(AxisDependency.LEFT);
        set.setColor(ColorTemplate.getHoloBlue());
        set.setCircleColor(Color.WHITE);
        set.setLineWidth(2f);
        set.setCircleRadius(4f);
        set.setFillAlpha(65);
        set.setFillColor(ColorTemplate.getHoloBlue());
        set.setHighLightColor(Color.rgb(244, 117, 117));
        set.setValueTextColor(Color.WHITE);
        set.setValueTextSize(9f);
        set.setDrawValues(false);
        return set;
    }
}

pageViewModel.java

package com.example.myapplication.ui.main;

import androidx.arch.core.util.Function;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.Transformations;
import androidx.lifecycle.ViewModel;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.LineData;

public class PageViewModel extends ViewModel {

    private MutableLiveData<Integer> mIndex = new MutableLiveData<>();

    private MutableLiveData<LineChart> myLineChart = new MutableLiveData<>();

    private LiveData<String> mText = Transformations.map(mIndex, new Function<Integer, String>() {
        @Override
        public String apply(Integer input) {
            return "Hello world from section: " + input;
        }
    });

    public void setIndex(int index) {
        mIndex.setValue(index);
    }

    public LiveData<String> getText() {
        return mText;
    }

    public void setChart(LineChart m){
        myLineChart.setValue(m);
    }

    public LiveData<LineChart> getLineChart() {
        if (myLineChart == null) {
            myLineChart = new MutableLiveData<LineChart>();
        }
        return myLineChart;
    }

    public LineChart getValue(){
        return myLineChart.getValue();
    }
}

fragment_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/line_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


</LinearLayout>

Comments

[jimbe]

ViewModel を使うのが普通(?)かと思いますが…mChart は View ですので、そのままは保持しないようにご注意です。

[luckyclock]

viewModelに対応しようとしているのですが、いまいち理解しきれていないせいかわからない部分があります。
private LineChart mChartはviewModelの方のLiveDataとして持たせないということでしょうか？

[jimbe]

御存知のように Fragment は基本的に非表示になればシステムによって破棄されます。これは同時に、Fragment に表示されていた各 View も破棄されるということです。
ViewModel は Fragment よりも長生きさせることが出来ますのでデータの保存先とすることが出来るのですが、 それが Fragment の View を保持してしまうと、 Fragment が消された後も無意味な View を保持している状況が起こり得て、もしその View から Fragment の Context 等も持っていると、結果的に破棄されるはずの Fragment 全部のメモリイメージを保持してしまう "メモリリーク" となる可能性があります。
ですので、 ViewModel にはデータのみを保存し、 LiveData で observe されてデータが取り出される (=Fragment が主体となってデータを取り出す)ように作る必要があります。

[jimbe]

ViewModel のサンプルとしましては、 AndroidStudio をお使いであれば　New Project 時の雛形の中に ViewModel のものがあると思います。
ただ、確か ViewModel を Fragment に保存していたので、結局 Fragment 破棄と同時に ViewModel も破棄されてしまっていたと記憶しています。
ViewModel を Fragment より長生きさせるには、 ViewModel を Activity に保存する必要があります。
ですので、AndroidStudio の雛形は ViewModel の作り方やアクセスの仕方程度のサンプルにしかならないかもしれません。

[luckyclock]

AndroidStudio のviewModelを参考にプログラムを変更しました。
タブ移動でグラフが描画されません。
＞ViewModel を Activity に保存する必要があります。
pageViewModel = new ViewModelProvider(activity).get(PageViewModel.class);
このメソッドでViewModelProvider(activity)とするとメインと紐づいてIDかわらないという記事をみたのでpageViewModel はフラグメント内で宣言しています。

[jimbe]

まず、上で書きました通り、 LineChart は View ですので、 ViewModel に持たせてはいけません。恐らく LineData か、いっそ Entry レベルの別形式の List として持たせたほうが良いかと思います。
他に、 AndroidStudio の雛形が悪いのですが、 Fragment は onCreate や onCreateView には(ごく一部以外) ロジックを書かず、 onViewCreated を使うことになってきています。
またこれは全く個人的意見ですが、同じく AndroidStudio の雛形として作られる ViewBinding は、 コードが増える割に役に立ちません。一応実行時エラーとなる案件がコンパイルエラーとして検出できるようになる…という謳い文句がありますが、テスト実行すれば大抵分かる事です。ですので、素直に FindViewById を使ったほうが分かり易いかと思います。

ViewModel の取得は、 Activity でやらなくても Fragment でやった時点で無ければ作成されると思います。
修正されたコードではスレッドで定期的にフラグメントからデータを取得させる？ような感じになっていますが、そうでは無く、定期的に ViewModel の LiveData を更新することで、その LiveData を observe している フラグメントがデータを取得する形にするのが、 LiveData の存在意義です。
このようにすると、データを生成する側は自身のタイミングでデータを更新し、 Fragment 側は observe することでデータが更新されたことを察知して最新のデータを取得することが出来ます。

一応回答用にコードを作成しているのですが、データの生成部分をどうするかで考えています。
1秒ごとに現在秒(X)と乱数データ(Y) を生成する感じで大丈夫でしょうか。

Answer 1

以下の感じで4分間ダミーデータがグラフに表示されます。
MPAndroidChart の仕様を確認していませんので、 setEntries のデータの更新部分が(MPAndroidChart を分かっている人からすると)ダメかもしれません。
ViewPager を ViewPager2 にしています。

MainActivity.java

package com.teratail.q371702;

import android.os.*;
import android.util.Log;

import com.google.android.material.tabs.*;

import androidx.appcompat.app.AppCompatActivity;
import androidx.lifecycle.ViewModelProvider;
import androidx.viewpager2.widget.ViewPager2;

import java.util.Random;

public class MainActivity extends AppCompatActivity {
  private MainViewModel vm;

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

    vm = new ViewModelProvider(this).get(MainViewModel.class);

    ViewPager2 viewPager2 = findViewById(R.id.view_pager2);
    viewPager2.setAdapter(new MainPagerAdapter(this));

    TabLayout tabLayout = findViewById(R.id.tab_layout);
    new TabLayoutMediator(tabLayout, viewPager2,
            (tab,position) -> tab.setText(MainPagerAdapter.TAB_TITLES[position]) //タブタイトル
    ).attach();

    feedMultiple();
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    if (thread != null) thread.interrupt();
  }

  private Thread thread;

  void feedMultiple() {
    if (thread != null) thread.interrupt();
    Handler handler = new Handler(getMainLooper());
    thread = new Thread(new Runnable() {
      Random random = new Random();
      @Override
      public void run() {
        Log.d("","start.");
        for (int i=0; i<MainViewModel.DATA_COUNT_MAX*2; i++) {
          long time = System.currentTimeMillis();
          float value = (float)(Math.random()*40);
          handler.post(() -> vm.setValue(time, value));
          try {
            Thread.sleep(1000);
          } catch (InterruptedException e) {
            break;
          }
        }
        Log.d("","end.");
      }
    });
    thread.start();
  }
}

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

  <com.google.android.material.appbar.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/Theme.Q371702.AppBarOverlay">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:minHeight="?actionBarSize"
        android:padding="@dimen/appbar_padding"
        android:text="@string/app_name"
        android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

  </com.google.android.material.appbar.AppBarLayout>

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager2"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainPagerAdapter.java

package com.teratail.q371702;

import androidx.annotation.*;
import androidx.fragment.app.*;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class MainPagerAdapter extends FragmentStateAdapter {
  static final String TAB_TITLES[] = new String[]{"TAB A","TAB B","Graph"};

  public MainPagerAdapter(FragmentActivity fa) {
    super(fa);
  }

  @NonNull
  @Override
  public Fragment createFragment(int position) {
    switch(position) {
      default: return new DummyFragment();
      case 0: return new ControlFragment();
      case 2: return new GraphFragment();
    }
  }

  @Override
  public int getItemCount() {
    return TAB_TITLES.length;
  }
}

MainViewModel.java

package com.teratail.q371702;

import androidx.lifecycle.*;

import java.util.*;

class RawData {
  final long time;
  final float value;
  RawData(long time, float value) {
    this.time = time;
    this.value = value;
  }
}

public class MainViewModel extends ViewModel {
  static final int DATA_COUNT_MAX = 120;

  private MutableLiveData<List<RawData>> rawDataLiveData = new MutableLiveData<>(Collections.emptyList());
  LiveData<List<RawData>> getValue() {
    return rawDataLiveData;
  }

  void setValue(long time, float value) {
    List<RawData> newList = new ArrayList(rawDataLiveData.getValue());
    newList.add(new RawData(time, value));
    while(newList.size() > DATA_COUNT_MAX) newList.remove(0);
    rawDataLiveData.setValue(Collections.unmodifiableList(newList));
  }
}

GraphFragment.java

package com.teratail.q371702;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.components.YAxis.AxisDependency;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.ValueFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.text.SimpleDateFormat;
import java.util.*;

public class GraphFragment extends Fragment {
  private MainViewModel mainViewModel;
  private LineChart chart;

  private static class DateXAxisFormatter extends ValueFormatter {
    private SimpleDateFormat sdf = new SimpleDateFormat("MM:dd:ss");
    private List<Long> xAxis = new ArrayList<>();

    void clear() { xAxis.clear(); }
    void add(long time) { xAxis.add(time); }

    @Override
    public String getFormattedValue(float value){
      int i = (int)value;
      if(i < 0 || xAxis.size() <= i) return "-"; //ガード
      return sdf.format(new Date(xAxis.get(i)));
    }
  }
  private DateXAxisFormatter dateXAxisFormatter = new DateXAxisFormatter();

  @Override
  public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_graph, container, false);
  }

  @Override
  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    mainViewModel = new ViewModelProvider(requireActivity()).get(MainViewModel.class);
    mainViewModel.getValue().observe(getViewLifecycleOwner(), rawDataList -> setEntries(rawDataList));

    chart = view.findViewById(R.id.line_chart);
    initChart();
  }

  public void initChart(){

    chart.getDescription().setEnabled(true);
    chart.setTouchEnabled(true);
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);
    chart.setDrawGridBackground(false);
    chart.setPinchZoom(true);
    chart.setBackgroundColor(Color.LTGRAY);

    LineData data = new LineData();
    data.setValueTextColor(Color.WHITE);
    chart.setData(data);

    XAxis xl = chart.getXAxis();
    xl.setTextColor(Color.WHITE);
    xl.setDrawGridLines(false);
    xl.setAvoidFirstLastClipping(true);
    xl.setEnabled(true);
    xl.setValueFormatter(dateXAxisFormatter); //X軸のラベルを時刻にする

    YAxis leftAxis = chart.getAxisLeft();
    leftAxis.setTextColor(Color.WHITE);
    leftAxis.setAxisMaximum(100f);
    leftAxis.setAxisMinimum(0f);
    leftAxis.setDrawGridLines(true);

    YAxis rightAxis = chart.getAxisRight();
    rightAxis.setEnabled(false);
  }

  public void setEntries(List<RawData> rawDataList) {
    LineData data = chart.getData();
    if(data != null) {

      data.clearValues();
      data.addDataSet(createSet());
      dateXAxisFormatter.clear();
      for(int i=0; i<rawDataList.size(); i++) {
        RawData rawData = rawDataList.get(i);
        dateXAxisFormatter.add(rawData.time);
        data.addEntry(new Entry(i, rawData.value), 0);
      }
      data.notifyDataChanged();

      chart.notifyDataSetChanged();
      chart.setVisibleXRangeMaximum(MainViewModel.DATA_COUNT_MAX);
      chart.moveViewToX(data.getEntryCount());
    }
  }

  private LineDataSet createSet() {
    LineDataSet set = new LineDataSet(null, "Dynamic Data");
    set.setAxisDependency(AxisDependency.LEFT);
    set.setColor(ColorTemplate.getHoloBlue());
    set.setCircleColor(Color.WHITE);
    set.setLineWidth(2f);
    set.setCircleRadius(4f);
    set.setFillAlpha(65);
    set.setFillColor(ColorTemplate.getHoloBlue());
    set.setHighLightColor(Color.rgb(244, 117, 117));
    set.setValueTextColor(Color.WHITE);
    set.setValueTextSize(9f);
    set.setDrawValues(false);
    return set;
  }
}

res/layout/fragment_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<com.github.mikephil.charting.charts.LineChart
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/line_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

※ DummyFragment, ControlFragment のコード・レイアウトは省略

Comments

[luckyclock]

うまく実装できました。
結局シンプルにデータの部分をview modelにもたせて
サイズ分addすればよかったのですね。
ようやく使い方が見えてきて応用できそうな気がしてきました。
時間表示の部分もありがとうございます。
最後までお付き合いいただき感謝です。

[jimbe]

根本的な見方の転換の部分を書いていませんでしたが、「ビュー(フラグメント)に表示しているデータを、(再表示時にまた表示されるように)モデルに保存する」のでは無く、「モデルが保持してるデータを、ビューが必要時(ビューの初期表示時やデータが更新された時)に表示する」ということです。
ですので、モデルは(ビューの状態・有無さえ関係無く)データの保持・更新に注力でき、ビューは任意に LiveData の機能を使ってデータを得て表示できます。