前回製作したボタンやプログレスなどを使って、デザインの本体を製作します。簡単に言うと、ボタンやバーをどこに配置するのかや、全体の背景などをプログラムします。
res→layout→activity_main.xmlがデザインの本体となるxmlファイルとなります。
activity_main.xmlにはDesignとTextどちらでもデザインを構築できるようになっています。
今回はTextの方でデザインを構築し、Designで結果を確認します。
さっそく、activity_main.xmlの中身を以下に書き換えてみましょう。
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/color1" tools:context=".MainActivity" > <SeekBar android:id="@+id/Servo" android:layout_width="fill_parent" android:layout_height="wrap_content" android:progressDrawable="@drawable/progress" android:thumb="@drawable/thumb" android:progress="50" android:max="100" android:paddingRight="50dp" android:paddingLeft="50dp" android:layout_centerInParent="true"/> <Button android:id="@+id/ON" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="ON" android:layout_above="@id/Servo" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp"/> <TextView android:id="@+id/distance_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="aaa" android:textColor="@color/color3" android:textSize="20dp" android:layout_above="@id/ON" android:layout_centerHorizontal="true" android:layout_marginBottom="40dp"/> <TextView android:id="@+id/distance1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DISTANCE:" android:textColor="@color/color4" android:textSize="20dp" android:layout_toLeftOf="@id/distance_value" android:layout_alignTop="@id/distance_value" android:layout_marginRight="20dp"/> <TextView android:id="@+id/distance2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/color4" android:text="[MM]" android:textSize="20dp" android:layout_toRightOf="@id/distance_value" android:layout_alignTop="@id/distance_value" android:layout_marginRight="0dp" android:layout_marginLeft="40dp"/> <Button android:id="@+id/Turn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="↻" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:layout_marginBottom="90dp"/> <Button android:id="@+id/RIGHT" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="→" android:layout_toRightOf="@id/Turn" android:layout_alignTop="@id/Turn" android:layout_marginRight="0dp" android:layout_marginLeft="20dp"/> <Button android:id="@+id/UP" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="↑" android:layout_above="@id/Turn" android:layout_alignLeft="@id/Turn" android:layout_marginBottom="20dp"/> <Button android:id="@+id/LEFT" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="←" android:layout_toLeftOf="@id/Turn" android:layout_alignTop="@id/Turn" android:layout_marginRight="20dp"/> <Button android:id="@+id/DOWN" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_1" android:text="↓" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:layout_marginBottom="25dp"/> </RelativeLayout> |
どのようなデザインかをText/DesignのDesignのタブをクリックして、確かめてみましょう。
さて、これでデザインのフレームワークはできました。ここから、本体のシステムを実装していきたいところですが、その前に、使用する文字列をあらかじめxmlのファイルにまとめておきましょう。
4 使用する文字列をまとめる に続く。
