3 XMLでデザイン作成2

by lumenbolk · 2015年3月20日

前回製作したボタンやプログレスなどを使って、デザインの本体を製作します。簡単に言うと、ボタンやバーをどこに配置するのかや、全体の背景などをプログラムします。

res→layout→activity_main.xmlがデザインの本体となるxmlファイルとなります。

activity_main.xmlにはDesignとTextどちらでもデザインを構築できるようになっています。

今回はTextの方でデザインを構築し、Designで結果を確認します。
さっそく、activity_main.xmlの中身を以下に書き換えてみましょう。

activity_main.xml

<?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>

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 使用する文字列をまとめる　に続く。

3 XMLでデザイン作成2

You may also like...

コメントを残すコメントをキャンセル

カテゴリー

ツイッター

最近の投稿

タグクラウド

3 XMLでデザイン作成2

You may also like...

2 XMLでデザイン作成1

5 ボタン機能1

10 距離センサの値を受信

コメントを残す コメントをキャンセル

カテゴリー

ツイッター

最近の投稿

人気の記事

タグクラウド

コメントを残すコメントをキャンセル