search

iroha-168 / AndroidUITrain

repository for training UI of Android apps
9 stars 0 forks source link

feat:性別・子供切り替えのタブを実装 #36

Closed iroha-168 closed 2 years ago

iroha-168 commented 3 years ago

概要

男女子供の切り替えタブを実装した

関連情報

特になし

スクリーンショット

## 懸念点 まだ未完成のままPR出してすみません。 タブをクリックすると画像が変わるようにしたいのですが、そもそも画像がタブに表示されません。 まだレディース部分しか実装してませんが、タブ選択によって画像が変わるように`drawable/ladies_selector.xml`に以下のようなコードを書きました。 ``` ``` 参考：[タブ選択時にアイコンを変える](https://qiita.com/ryohey/items/df96d3f7e56756962380#%E3%82%BF%E3%83%96%E9%81%B8%E6%8A%9E%E6%99%82%E3%81%AB%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B) そしてHomeAllFragment.ktのenumで以下のようにTabの項目とdrawableを繋げました ``` private enum class FragmentsOrder(val drawableResId: Int) { MENS(R.drawable.mens_before), LADIES(R.drawable.ladies_selector), KIDS(R.drawable.kids_before) } ``` しかし、クリックすると画像が変わるどころか画像すら表示されませんでした。 一度お手隙の際にレビューして頂きたいです。
Naoki-Hidaka commented 2 years ago

原因はまだ特定できてないですが、Androidの画像表示に関してちょっとだけ

以上を踏まえると、画像が大きすぎるか小さすぎるかで画像がちゃんと表示されていないのかなぁと思ってます ledies.jpeg等を取り込むときに、ディレクトリに直接持ってくるのではなく、res/drawableのところを右クリック-> new -> vector assetsでローカルから該当ファイルを選択してみてください そうすると画像ファイルがxmlになってうまく表示されるかもしれないです

iroha-168 commented 2 years ago

TabLayoutの画像表示の件ですが、VectorAssetsからsvg画像をアップロードする形でエミュレータに表示されるようになりました。

ただ、Tabを選択した時にアイコンの色を変える/色付きの別のアイコンを表示する方法がわかりません。

調べてみるとこのような記事がありまして、 タブ選択時にアイコンを変える この記事だと作成したselector.xmlをFragmentにて以下のように設定しているようです

tabLayout.addTab(tabLayout.newTab().setText(R.string.title_tab_1).setIcon(R.drawable.tab_icon_selector_1))

この部分に当たるところが、私のコードではenumに当たると思い、以下のように書いてみました

// HomeAllFragment
private enum class FragmentsOrder(val drawableResId: Int) {
        LADIES(R.drawable.ladies_selector),
 }

ただ、これだと画像は表示されましたが、クリックしても色の変化はなかったです。Fragmentを別の方法で書き直す必要があるのでしょうか...

Naoki-Hidaka commented 2 years ago

見てみますね〜