Android
AndroidStudio

DAY3:FrameLayoutを使って画像やテキスト、ボタンを配置してみる①

More than 3 years have passed since last update.


目的 Androidアプリをつくる

DAY30でプログラミングをやったことのない素人がAndroidアプリをつくれるようになるための学習の記録です


今日の課題

こういう画面を作る。これは完成形です。

layout-2015-06-06-145651.png


記録

AndroidStudioでNewProjectを作り、

LinearLayoutで作業を進めるため、このようにする。


app/app/src/main/res/layout/activity_main.xml

- <RelativeLayout 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"
+ <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:paddingBottom="@dimen/activity_vertical_margin"
- android:paddingLeft="@dimen/activity_horizontal_margin"
- android:paddingRight="@dimen/activity_horizontal_margin"
- android:paddingTop="@dimen/activity_vertical_margin"
- tools:context=".MainActivity">
+ android:background="#ffffff"
+ android:orientation="vertical"
- </RelativeLayout>
+ </LineaLayout>


完成形のようにX:オレンジにテキスト+ボタン、Y:画像にテキスト+ボタン+テキスト、Z:テキストとしたいので、

まずXの部分は、FrameLayout内にテキストとボタンを作る。


app/app/src/main/res/layout/activity_main.xml

<!--フレームの幅、高さ、背景を指定-->

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff6600"
<!--テキストの位置、色、サイズを指定-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:layout_marginLeft="5dp"
android:text="XXXXXXXXXX"
android:textColor="#ffffff"
android:textSize="36sp" />
<!--ボタンのid、位置、サイズ、テキスト、テキストの色、テキストのサイズを指定-->
<Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginBottom="20dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:text="Facebookでログイン"
android:textColor="#ffffff"
android:textSize="10sp" />

</FrameLayout>


こうなった。

VNDsJHOTGjTVxmj1433577484.jpg

まだ先は長い。


今日の感想

細かな位置を調整するのに時間を使いすぎた。

まずは大まかにでも作り進めたほうが結果的に早く作れるような気がする。

実際に早いのかはまだわからない。