iOS開発者のAndroid開発入門その4(UIコンポーネント)

botman3 Android
スポンサーリンク

はじめに

Android Studio 3.6.3 の Layout Editor の Palette に表示される UI コンポーネントについてまとめました。(結構多い。。。)
UI コンポーネントは大きく分けて TextView などの ViewConstraintLayout のように複数の UI コンポーネントを中に配置する ViewGroup がある。

github鋭意作成中

Text

text

TextView

iOS でいう UILabel 相当だと思う。

定義

参考:TextView

EditText

iOS でいう UITextField, UITextView 相当だと思う。 プレースホルダーにあたるのは hint

edit_text

定義

inputType の設定が色々ある。複数行表示の場合は textMultiLine を設定する。
下記はすべて EditTextinputType が異なる値が設定されている。

  • Plaint Text
  • Password
  • Password (Numeric)
  • E-mail
  • Phone
  • Postal Address
  • Multiline Text
  • Time
  • Date
  • Number
  • Number (Signed)
  • Number (Decimal)

簡易実装(TextWatcher で入力イベントを受け取れる)

"Tes" という状態で "t" を入力すると下記のようにログ出力された。

参考:EditText

AutoCompleteTextView

自動補完機能を備えたテキストフィールド。ArrayAdapter を実装してドロップダウンで入力候補を表示できる。

定義

参考:AutoCompleteTextView

MultiAutoCompleteTextView

AutoCompleteTextView の拡張版。AutoCompleteTextView との違いは、補完された文字列に ", " が付加され、単一テキストビュー内で連続して補完機能が使用できるらしい。

定義

参考:MultiAutoCompleteTextView

TextInputLayout + TextInputEditText

マテリアルコンポーネントの1つ。入力するとプレースホルダーが上に移動する。

定義

参考

Buttons

ボタンはチェックボックスやラジオボタンなど標準で色々用意されている。CheckBox などの OnCheckedChangeListenerOnClickListener より先に呼ばれる

button

Button

iOS でいう UIButton に相当すると思う。

定義

デフォルトだとテキストがすべて大文字になるので小文字にしたい場合は textAllCapsfalse を指定する。ハイライトなど細かい設定したい場合は style の XML を作成し、設定する。

下記の属性を組み合わせて使用すれば背景画像ありアイコンありテキストありのボタンも作成できる。

属性名 説明
android:text テキストを設定
android:drawableLeft テキストの左に画像を設定
android:drawableTop テキストの上に画像を設定
android:drawableRight テキストの右に画像を設定
android:drawableBottom テキストの下に画像を設定
android:drawableStart テキストの先頭に画像を設定
android:drawableEnd テキストの末尾に画像を設定
android:background 背景に画像を設定

簡易実装

参考:Button

ImageButton

テキストがないボタン?タップできる ImageView とでも思えばいいはず。。。

定義

簡易実装

参考:ImageButton

ChipGroup + Chip

マテリアルコンポーネントの1つ。ラジオボタンのようなはてブのタグのようなやつ。

定義

これ入れないと InvocationTargetException になった。。。

簡易実装

参考

CheckBox

標準でチェックボックスがあるのはすばらしい!

定義

簡易実装

参考:CheckBox

RadioGroup + RadioButton

標準でラジオボタンがあるのはすばらしい!RadioGroup 内に RadioButton を置くことで一つのグループとして振る舞う。

定義

簡易実装

参考

ToggleButton

トグルボタン。スイッチとの使い分けはデザイナーに聞こう!

定義

簡易実装

参考:ToggleButton

Switch

iOS でいう UISwitch に相当すると思う。テキストも設定できる。

定義

簡易実装

参考:Switch

FloatingActionButton

マテリアルコンポーネントの1つ。Gmail アプリの右下にあるやつ。テキストはない。

定義

簡易実装

参考:FloatingActionButton

Widgets

widget

View

iOS でいう UIView に相当すると思うが addSubView はできない。(その場合は ViewGroup を使う)

定義

Divider は backgroud?android:attr/listDivide が設定された View。用意してくれているので境界線引きたいときに使おう!

  • Horizontal Divider
  • Vertical Divider

Horizontal Divider は下記のようになっている。(Vertical は width が 1dp に設定されている)

参考:View

ImageView

iOS でいう UIImageView に相当すると思う。

定義

参考:ImageView

WebView

iOS でいう WKWebView に相当すると思う。

web

定義

ウェブページを表示するにはマニフェストに下記のような記述が必要。それでもエラーになる場合は一度アプリをアンインストールすると表示されるかも知れない。

簡易実装(Webページ表示)

その他、http のサイト表示は設定がいったり、window.open の場合に処理が必要だったり色々面倒な設定がいった気がする。(このあたりはまた別記事でまとめたい。。。)

参考

VideoView

動画再生用の View。簡単に動画再生ができてすばらしい!(たしか iOS は表示をカスタムしようと思うと AVPlayerLayer とか使わないといけなかった気がする)

video

定義

端末内やネット上のリソースフォルダの動画を再生できる。
例では res/raw/sample.mp4 を再生している。 (movは再生できなかった。。。)
MediaController を設定することで再生ボタンとかを簡単に表示できる。

簡易実装

参考:VideoView

CalendarView

その名の通りカレンダー。標準であるのはすばらしい!日付は UNIX 時間 (Long 型) で扱われます。
* UNIX 時間は1970年1月1日午前0時0分0秒を基準とした形式的な経過秒数らしい(参考:Wikipedia UNIX 時間

calendar

定義

簡易実装

参考:CalendarView

ProgressBar

iOS でいう UIProgressView に相当すると思う。円形や棒状の表示ができる。

定義

ProgressBar (Horizontal) は style?android:attr/progressBarStyleHorizontal が設定されている

簡易実装

参考:ProgressBar

SeekBar

iOS でいう UISlider に相当すると思う。

定義

SeekBar (Discrete) は style@style/Widget.AppCompat.SeekBar.Discrete が設定されている。単位ごとに動かせるやつ?

簡易実装

参考:SeekBar

RatingBar

星の数で評価を表示するやつ。(こんなのまで標準であるのか!?)

定義

簡易実装

参考:RatingBar

SearchView

iOS でいう UISearchBar に相当すると思う。

定義

簡易実装

参考:SearchView

TextureView

たぶん描画したいときとかに使うやつ。(あんまわかってない。。。)

定義

参考:TextureView

SurfaceView

たぶん描画したいときとかに使うやつ。(あんまわかってない。。。)

定義

参考:SurfaceView

Layouts

View を横並びや重ねたりして配置するためのやつ。Layout はまた別記事でまとめたい。。。(まとめました -> Layout

ConstraintLayout

他の View との相対位置で配置するやつ。RelativeLayout と似たような機能だが今はこちらが主流らしい。

定義

参考:ConstraintLayout

Guideline

ConstraintLayout と組み合わせて水平や垂直に View を整列させたりするのに使うらしい。 (参考

定義

参考:Guideline

LinearLayout

iOS でいう UIStackView のようなものだと思う。垂直方向や水平方向に並べて配置するやつ。

定義

参考:LinearLayout

FrameLayout

1つの View だけを配置するときに使う軽量なやつ。複数 View の配置には向かないみたい。View を重ねるときにも使える。

定義

参考:FrameLayout

TableLayout

View を格子状に配置するためのやつ。

定義

参考:TableLayout

TableRow

TableLayout の1つ1つの行。TableLayout の子 View として使う。(リファレンスにも下記のようにある)

A layout that arranges its children horizontally. A TableRow should always be used as a child of a TableLayout. If a TableRow's parent is not a TableLayout, the TableRow will behave as an horizontal LinearLayout.

定義

参考:TableRow

Space

その名の通り余白用の View。リファレンスにも下記のように書いてある。

Space is a lightweight View subclass that may be used to create gaps between components in general purpose layouts.

定義

参考:Space

Containers

Containers \<include>とか
container special

Spinner

ドロップダウン表示するやつ。SpinnerAdapter でリストやレイアウトを設定する。

定義

簡易実装

参考:Spinner

RecyclerView

iOS でいう UICollectionView に相当するやつだと思う。AdapterLayoutManager で色々設定する。縦に並べたり横に並べたり格子状に並べたり ListView よりも柔軟な配置ができる。たぶんよく使うやつなので別記事でまとめたい。。。

recycler

定義

簡易実装

選択イベントとかは独自にリスナーを用意しないといけないらしい。。。(OnItemTouchListener はあるけど position とか取れないので扱いづらい)

参考:RecyclerView

ScrollView

iOS でいう UIScrollView に相当するやつだと思う。縦にスクロールする。横スクロールは後述の HorizontalScrollView を利用する。

定義

下記のように ScrollView の子 View に設定するだけでスクロールできるようになる!

ScrollView に複数の子 View を設定すると下記のようなエラーでクラッシュする。

ScrollView は子 View を一つしか持てないので複数の View を置きたい場合は LinearLayout を子 View に設定して LinearLayout の子に複数の View を設定する。ScrollView は子 View に ScrollView を使いたい場合は後述の NestedScrollView を使う。

参考:ScrollView

HorizontalScrollView

横にスクロールする ScrollView

定義

参考:HorizontalScrollView

NestedScrollView

その名の通り ScrollView をネストするための ScrollView。通常の ScrollView は入れ子にするとイベントが親の ScrollView に取られて子の ScrollView をスクロールできない。

定義

RecyclerView などの ScrollViewNestedScrollView 配下に置く場合は下記のように設定するらしい(参考

参考:NestedScrollView

ViewPager

iOS でいう UIPageViewController に相当すると思う。FragmentStatePagerAdapter を設定してページごとに Fragment を表示する。左右のスワイプでページが切り替わる。(縦にはできないみたい)

pager

定義

簡易実装(色のついた3つのフラグメントを表示)

CardView

マテリアルコンポーネントの1つ。カードを表示する。

定義

参考:CardView

AppBarLayout

鋭意作成中。。。

定義

参考:AppBarLayout

BottomAppBar

鋭意作成中。。。

定義

参考:BottomAppBar

NavigationView

左端から右にスワイプすると表示されるドロワー(詳細はこっち

定義

参考:NavigationView

BottomNavigationView

画面下のタブバー(詳細はこっち

定義

参考:BottomNavigationView

Toolbar

鋭意作成中。。。

定義

参考:Toolbar

TabLayout + TabItem

タブ。基本的には ViewPager と組み合わせて使うっぽい。

tab_layout

定義

TabItem には texticon が設定できる。ViewPager を設定すると AdaptergetPageTitle(position: Int): CharSequence? の値が text に設定される。

簡易実装(SampleFragmentPagerAdapterViewPager で使用したのと同様のやつです)

参考

ViewStub

仮置の View。たぶん重たい View を読み込むときに使うやつ。 inflate() するまで読み込まれないのでたぶん軽くなる。

定義

下記のように読み込む View は XML 上でもコードでも設定できる。

参考

\<include>

layout ファイルの中に他の layout ファイルのタグを挿入するタグ。

下記のように layout に読み込む layout ファイルを指定する。(下記は MainActivity の layout を読み込んでいる)

参考:\<include>

\<fragment>

layout ファイルの中に Fragment のタグを挿入するタグ。
下記のように name に読み込む Fragment を指定する。

NavHostFragment

Navigation を利用する時のコンテナ。たぶん UINavigationController のようなやつ(詳細はこっち

定義

参考:NavHostFragment

\<view>

指定の View を挿入するタグ。(よくわかってない。。。)
試しに ViewPager を挿入すると下記のようになった。

\<requestFocus>

画面表示時に指定の View にフォーカスするよう指定するタグ。
下記のようにすると EditText にフォーカスされた。

参考:\<requestFocus>

Google

Google API を利用するやつ。別途 API キーの生成等必要。

AdView

広告表示をするやつ。

定義

参考:AdView

MapView

iOS でいう MKMapView に相当すると思う。 API キーの生成が必要。

定義

参考:MapView

Legacy

GridLayout

格子状に View を配置するやつ。TableLayout と同じ感じがするがこっちは列をまたいで配置できるらしい。(Layout の記事でまとめたい。。。(まとめました -> Layout))

定義

GridLayout

ListView

iOS でいう UITableView に相当すると思う。Adapter で色々設定する。UITableView でいう DataSource が Adapter、Delegate が Listener だと思う。よく使うやつなので別記事でまとめたい。。。

list

定義

簡易実装(テキスト表示するだけとか単純なやつなら android.R に layout 用意されている)

参考:ListView

TabHost

タブ付きのコンテナらしいけど下記のように deprecated になっていて変わりに TabLayoutViewPager を使えとあるので割愛。

This class was deprecated in API level R.
new applications should use fragment APIs instead of this class: Use TabLayout and ViewPager instead.

定義

参考:TabHost

RelativeLayout

他の View との相対位置で配置するやつ。ConstraintLayout と似たような機能だが今は ConstraintLayout が主流らしい。

定義

参考:RelativeLayout

GridView

格子状に配置するやつ。アイテム選択イベントも取れるので UICollectionView に近いかも?

grid

定義

下記のように余白や列数を指定できる。

android:stretchMode

  • columnWidth: 各列が同じ幅にストレッチされる
  • none: ストレッチ無し
  • spacingWidth: spacingで指定した値と余る余白を均等に分けた幅を加算
  • spacingWidthUniform: 画像の解像度やその他の設定に応じて配置、余白がでる

簡易実装

参考

さいごに

あまりに時間がかかるので途中で投稿!!残りも随時作成予定。。。

参考

コメント

タイトルとURLをコピーしました