<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:padding="16dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/icon" android:src="@mipmap/ic_launcher" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
Category: Android
Layout resource file
app -> res -> layout から新規にresource layout fileを作成します。
list_item.xmlを編集します。TextViewにして、layout_heightをwrap_contentにします。
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:padding="16dp" android:layout_width="match_parent" android:layout_height="wrap_content"> </TextView>
MainActivityでデータを用意する。
adapterの設定が必要
Adapter – ArrayAdapter
データを準備する。
ArrayListitems = new ArrayList<>(); for (int i = 0; i < 30; i++){ items.add("item-" + i); }
1.findViewById(R.id.myListView)で、idがmyListViewを取得します。
2.ArrayList<>()を定義します。
3.ArrayAdapter
4.setAapter(adapter)でつなげる。
ListView myListView = (ListView) findViewById(R.id.myListView); ArrayList<String> items = new ArrayList<>(); for (int i = 0; i < 30; i++){ items.add("item-" + i); } ArrayAdapter<String> adapter = new ArrayAdapter<String>( this, R.layout.list_item, items ); myListView.setAdapter(adapter);
build runします。
はぁぁああああ?
listViewをつくろう
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <ListView android:id="@+id/ListView" android:layout_width="match_parent" android:layout_height="match_parent" > </ListView> </LinearLayout>
何故かpreviewにitemlistが表示されている。何故だ?
android:区切り線を入れていこう
fill_parentと1dpで書くんだと。なるほど、頭いいね。
<View android:layout_width="fill_parent" android:layout_height="1dp" android:background="@android:color/darker_gray" />
ok、実機で見てみたい。
run buildします。
なんだよ、いいじゃんか~~~
あと、paddingとmarginと画像のっけたらそれっぽくなるでしょ。
それそろMainActivity.Javaを触りたくなってきました♪
relativeLayoutは相対的な位置指定
frameLayoutは色を重ねる
tableLayoutはテーブルをつくる tableRowで行をつくる
android:横幅のレイアウトを均等配置しよう
orientaion horizontalの時に、layout_widthを0dpとして、layout_weightを同じ値にします。
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="ポートフォリオ" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="ニュース" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="掲示板" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="ランキング" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="スクリーニング" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="資産管理" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="株主優待" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="株価予想" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="業種一覧" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="経済指標" /> </LinearLayout>
これこれ、やりたかったの♪
yahooを良く見ると、下線が。。
htmlでいうところのhr、いわゆる下線を入れたい。
あ、区切り線というらしいね。
scrollviewを使おう
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> hoge </LinearLayout> </ScrollView>
スクロールできてる!!!!!!!!!!
sugeeeeeeeeeee
横は?
->HorizontalScrollView
<HorizontalScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > hoge </LinearLayout> </HorizontalScrollView>
おいおいおい、いいじゃんか!!!!
実機で見てみたいですね。gradle buildしてみましょう♪♪♪♪♪
gradle finish!
スクロールできてる♪ WoW
yahoo financeのappでみると、コンテンツ一覧のhorizontalが均等に5分割されてるんだよね。。
どうやって書くんだろう??
androidでyahoofinanceのレイアウトをつくろう2
linearとhorizontalで埋めていきます。
やっぱりdpがわからない。
->dp(density-independent pixels)とは密度非依存ピクセル
一人問答してますが、、、
結局、横幅は、何dpだといいの?
->320-410dp範囲
あ、320dp想定でつくって、410dpのときにどう表示されるかを考えるらしい。
なるほど!
コンテンツ一覧は5個なので、dpは320/5 = 64dpですね。早速作りましょう。
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="ポートフォリオ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="ニュース" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="掲示板" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="ランキング" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="スクリーニング" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="資産管理" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="match_parent" android:text="株主優待" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="株価予想" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="業種一覧" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="64dp" android:layout_height="wrap_content" android:text="経済指標" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout>
ん?androidってpreview下まで見れないの?
activity_main.xmlをつくっていこう
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="ポートフォリオ" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ポートフォリオ1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="損益:" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="***" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(---%)" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="前日比" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="***" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(---%)" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="マーケット情報" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="日経平均" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="22408.88" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(---%)" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="NYダウ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="24542.54" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(---%)" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="米ドル/円" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="109.715" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(---%)" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="最新ニュース" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="本日の東京株式市場の見通し" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="<きょうの個別材料>コロプラ、ぐるなびなど" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="米ドル/円" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="条件から銘柄を探す" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="最近見た銘柄" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="掲示板" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:textColor="@android:color/background_light" android:text="コンテンツ一覧" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout>
androidでyahoofinanceのレイアウトをつくろう
linearlayoutで書いていきます。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ポートフォリオ" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="マーケット情報" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="最新ニュース" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="条件から銘柄を探す" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="最近見た銘柄" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="掲示板" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="コンテンツ一覧" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout>
backgroundとtextColorを設定していきます。
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_dark" android:padding="5dp" android:text="ポートフォリオ" android:textColor="@android:color/background_light" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
あれ?思った以上にそれっぽくない?
vertical の中にhorizontalで書きたい。
損益 — %とか。
linearLayoutを入れ子にすればokのようだ。
<LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="損益:" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="***" android:orientation="horizontal" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </LinearLayout>
続きは明日やろう
androidの余白は?
余白は android:layout_margin を使っていく
内側は android:padding
marginLeft というように、大文字小文字を区別して書かないと、指定通りの表示になりません。
android:layout_margin="10dp" android:layout_marginTop="10dp" android:paddingLeft="10dp" android:paddingBottom="10dp"
android:gravityで寄せる
android:layout_height="120dp" android:gravity="bottom" android:layout_width="match_parent" android:layout_height="120dp" android:gravity="right"
layout_gravityはfloatのようなもの
android:layout_gravity="right"
android:layout_gravity=”bottom” と指定しても、下にはいきませんね。
android:layout_weight は、余白の割り当て
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:layout_weight="1" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
大分分かってきましたね。
ではいよいよ応用といきましょう。