ビンゴアプリハンズオン あんざいゆき（@yanzm） ABC 2019S

Yuki Anzai • Android App Developer (2009~) • CEO of uPhyca Inc. (2011~) • Google Developer Expert for Android • Organizer of GTUG Girls and droid girls • Twitter : @yanzm

クリック

1.クリック 2. Next を クリック

My Bingo Finish をクリック com.sample.mybingo デフォルトのままでOK API 21: Android 5.0 Java Use androidx.* artifact にチェック

No content

1.ダブルクリック 2. Design をクリック

Blueprint を選択

クリック

0dp (match_constraint) に変更 bottom のハンドルをクリック

No content

左右と上の margin を 16 に変更

text の Hello World! を削除 プレビュー⽤の text に 1, 2, 3, 4, 5 と⼊⼒

id を historyView に変更

Palette から Button を drag して下部に drop

Infer Constrains をクリック

layout_width を 0dp (match_contstrains) にし、margin を変更

1. text の右端の⼩さい ボタンをクリック 2. Add new resources, New string Value... をクリック

next_number 次の数字を出す OK をクリック

No content

Palette から TextView を drag して真ん中あたりに drop

上のハンドルを drag して 上部の TextView の ハンドルにつなげる 下のハンドルを drag して 下部の Button の ハンドルにつなげる

Infer Constrains をクリック

layout_width と layout_height を 0dp (match_contstrains) にし、margin を変更

クリックして展開

gravity を展開して center を true に変更

textSize を 100sp に変更 text を削除してプレビュー の text を 75 に変更

id を numberView に変更

design にして⾒た⽬を 確認

ダブルクリック

public class MainActivity extends AppCompatActivity { private TextView historyView; private TextView numberView; private View button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); historyView = findViewById(R.id.historyView); numberView = findViewById(R.id.numberView); button = findViewById(R.id.button); } }

public class MainActivity extends AppCompatActivity { private TextView historyView; private TextView numberView; private View button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); historyView = findViewById(R.id.historyView); numberView = findViewById(R.id.numberView); button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { numberView.setText("" + System.currentTimeMillis()); } }); }

public class MainActivity extends AppCompatActivity { private TextView historyView; private TextView numberView; private View button; private final Random random = new Random(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { final int nextNumber = random.nextInt(75) + 1; numberView.setText("" + nextNumber); } });

public class MainActivity extends AppCompatActivity { ... private final List histories = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { ... button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { final int nextNumber = random.nextInt(75); numberView.setText("" + nextNumber); histories.add(nextNumber); historyView.setText(createHistoryText()); } }); }

public class MainActivity extends AppCompatActivity { ... private String createHistoryText() { final StringBuilder sb = new StringBuilder(); boolean isFirst = true; for (int history : histories) { if (isFirst) { isFirst = false; } else { sb.append(", "); } sb.append(history); } return sb.toString(); } }

public class MainActivity extends AppCompatActivity { ... private final List pickNumbers = new ArrayList<>(); private final List histories = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); pickNumbers.clear(); for (int i = 1; i <= 75; i++) { pickNumbers.add(i); } historyView = findViewById(R.id.historyView); numberView = findViewById(R.id.numberView); button = findViewById(R.id.button);

public class MainActivity extends AppCompatActivity { ... @Override protected void onCreate(Bundle savedInstanceState) { ... button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { final int index = random.nextInt(pickNumbers.size()); final int nextNumber = pickNumbers.remove(index); numberView.setText("" + nextNumber); histories.add(nextNumber); historyView.setText(createHistoryText()); if (pickNumbers.isEmpty()) { button.setEnabled(false); } }

チャレンジ課題

ViewModel を使う

https://developer.android.com/jetpack/androidx/releases/lifecycle dependencies { ... def lifecycle_version = "2.0.0" implementation "androidx.lifecycle:lifecycle-extensions:$lifecycle_version" annotationProcessor "androidx.lifecycle:lifecycle-compiler:$lifecycle_version" } build.gradle (Module: app) Android developer ページ → Jetpack → AndroidX → Release Notes → androidx.lifecycle

public class MainViewModel extends ViewModel { private final Random random = new Random(); private final List pickNumbers = new ArrayList<>(); private final List histories = new ArrayList<>(); public MainViewModel() { for (int i = 1; i <= 75; i++) { pickNumbers.add(i); } } int pickNextNumber() { final int index = random.nextInt(pickNumbers.size()); final int nextNumber = pickNumbers.remove(index); histories.add(nextNumber); return nextNumber; }

String createHistoryText() { final StringBuilder sb = new StringBuilder(); boolean isFirst = true; for (int history : histories) { if (isFirst) { isFirst = false; } else { sb.append(", "); } sb.append(history); } return sb.toString(); } boolean isAllPicked() { return pickNumbers.isEmpty(); } }

public class MainActivity extends AppCompatActivity { private TextView historyView; private TextView numberView; private View button; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); historyView = findViewById(R.id.historyView); numberView = findViewById(R.id.numberView); button = findViewById(R.id.button); final MainViewModel viewModel = ViewModelProviders.of(this) .get(MainViewModel.class);

public class MainActivity extends AppCompatActivity { ... @Override protected void onCreate(Bundle savedInstanceState) { ... button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { final int nextNumber = viewModel.pickNextNumber(); numberView.setText("" + nextNumber); historyView.setText(viewModel.createHistoryText()); if (viewModel.isAllPicked()) { button.setEnabled(false); } } }); }

LiveData を使う

public class MainViewModel extends ViewModel { private final Random random = new Random(); private final List pickNumbers = new ArrayList<>(); private final List histories = new ArrayList<>(); private final MutableLiveData state = new MutableLiveData<>(); public MainViewModel() { pickNumbers.clear(); for (int i = 1; i <= 75; i++) { pickNumbers.add(i); } } LiveData getState() { return state; }

void pickNextNumber() { final int index = random.nextInt(pickNumbers.size()); final int nextNumber = pickNumbers.remove(index); histories.add(nextNumber); state.setValue(new State(nextNumber, createHistoryText(), isAllPicked())) } private String createHistoryText() { final StringBuilder sb = new StringBuilder(); boolean isFirst = true; for (int history : histories) { if (isFirst) { isFirst = false; } else { sb.append(", "); } sb.append(history); } return sb.toString(); }

private boolean isAllPicked() { return pickNumbers.isEmpty(); } static class State { final int nextNumber; final String historyText; final boolean isAllPicked; State(int nextNumber, String historyText, boolean isAllPicked) { this.nextNumber = nextNumber; this.historyText = historyText; this.isAllPicked = isAllPicked; } } }

public class MainActivity extends AppCompatActivity { ... @Override protected void onCreate(Bundle savedInstanceState) { ... viewModel.getState().observe(this, new Observer() { @Override public void onChanged(MainViewModel.State state) { numberView.setText("" + state.nextNumber); historyView.setText(state.historyText); if (state.isAllPicked) { button.setEnabled(false); } } });

public class MainActivity extends AppCompatActivity { ... @Override protected void onCreate(Bundle savedInstanceState) { ... button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { viewModel.pickNextNumber(); } }); } }