私は以前の記事で言ったように: 良いUIデザイン、あなたは良いのAndroidを学びます, インターフェイスのデザインは、Android未完成未完成学びます. だから、今日、私たちは、インターフェイスデザインの練習に入る開始します.

[qads]

1. 概要を見ます

最初に私はAndroidのインターフェースについてあなたとあなたを少し紹介したいと思います. あなたは次のことを守っ:

すべての表示要素がビューと呼ばれ、ビュークラスの敵からそれらを実践しています. ビューの表示手段. 私たちのビューに分類 2 タイプがあります:

• [表示]メニュー: 我々はTextViewのように直接見ることができ、既存の表示要素であります, EditTextの, ボタン.
• ViewGroup: 含まれているために、他のビューを表示, 単一のビューを収容するか、他のViewGroupを含めることができます.

ViewGroupでは、多くの種類を持っています, ここで私はあなたにお勧めします 2 最も頻繁に使用されるタイプは、RelativeLayoutとのLinearLayoutであります.

• RelativeLayout 含まれており、その中のビューとの関係に応じて管理する他はのViewGroupで見ます. あなたはA、Bの隣に座っているような, あなたのC Bの下に座ります,…
• LinearLayout 他のビューが含まれており、水平または垂直管理のViewGroupです (これは、依存して規定されています). だから同じように、私たちは並んで, 水平または垂直に配置され.

今日はすべてのいくつかのアプリケーションのRelativeLayoutインタフェース設計を実践を通して学ぶしようとしています.
あなたは、新しいプロジェクトファイルを作成し、[テキスト]タブでオフラインactivity_main.xmlを実行するには.

2. RelativeLayoutでログインインターフェース設計

私たちは、次のログイン・インターフェースを想定します:

このような, 我々が必要となります 3 のTextView (ログイン, ユーザー, パスワード), 2 EditTextの (ユーザー, パスワード) と 1 ボタン (OK). 我々は一時的に私たちに置きます tvLogin, TVUS, tvPassword, editUser, editPassword, btnOk.
我々はRelativeLayoutを使用しているので, 私は上記の言ったように, 基づいて、その中のコンポーネント、およびそれらの間の関係を手配RelativeLayout. 私は次の想像します:

• 上部にtvLogin
• tvLogin下tvUser
• tvUser下edituser
• edituser下tvPassword
• tvPassword下editPassword
• editPassword下btnOk

だから我々は、次のコードを持っています:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Login"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvUser"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvLogin"
        android:text="user" />

    <EditText
        android:id="@+id/editUser"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvUser" />

    <TextView
        android:id="@+id/tvPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editUser"
        android:text="password" />

    <EditText
        android:id="@+id/editPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvPassword" />

    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editPassword"
        android:layout_centerHorizontal="true"
        android:text="ok" />

</RelativeLayout>

コー​​ドの彼の説明は、次のように. これはあなたのコードを説明するのは初めてなので注意をXML必要があります. ライン アンドロイド:XYZ プロパティのビューと呼ばれる、対応する[表示]タブで.

まず、最初のカードを見てRelativeLayout

RelativeLayoutので、それは閉じタグのViewGroupになるように (現在 2) そして、開始タグ (現在 48) それは内の子要素が含まれています 2 これは、カードのペアを開きます. その特性は、使用されています

アンドロイド:layout_width VAアンドロイド:layout_height ここに 2 唯一の属性は、そのに水平方向と垂直方向であります. すべては、少なくとも持っているために必要なすべてを見ます 2 そのビューのサイズを決定するには、この属性. 表示はされていない場合 1 で 2 この属性は失敗します. の値 2 この属性は、取得することができます:

– wrap_content : すなわちちょうど十分なコンテンツ (ラップ – かろうじて, コンテンツ – コンテンツ). その内容はそれだけで十分にそこにどのくらいすなわち.
– match_parent : 父の全体を意味します (一致 – 合計, 親 – 親). それは彼の父であります (タンは、それが含まれています) どのくらいのそのセクションを取り出しました.
– XDP : ここで、xは 1 実数, dpが野生センチと同じです, M, インチ,.. 瞬間にAndroidの単位長さでは、それはDPであることを覚えています.
このRelativeLayoutのViewGroupのために, 私たちは、水平方向と垂直方向の両方に配置match_parentすなわち水平および垂直は、すべて彼の父を取られています, 彼の父は、携帯電話の画面でした.

フォロー, あなたが最初のTextViewカードに注意を払います, tvLogin
ここで 2 属性アンドロイド:layout_width VAアンドロイド:layout_heightは、自然と義務であります. あなたがもう少し理解するために彼のための明確化:
– その幅はwrap_contentに設定されています – ちょうど十分なコンテンツ, 全体、すなわち、それは常に十分なコンテンツです. それをクリックしてあなたの周りに青い枠が表示されます, それは常にコンテンツを持っています

– あなたはそれのために値を設定した場合はアンドロイドであります:layout_width =”match_parent” すなわち水平方向にあなたが全体の幅の男にそれを与えました, それは、この男はRelativeLayoutは、画面全体の幅を占めていることを少年の父親は、それは次のように水平方向に画面全体を持っています.

– プロパティアンドロイド:layout_centerHorizo​​ntal =”真” すなわち、我々は水平に男の真ん中にそれを置きます. センター – ミドル, 水平の – 水平に. だから、画面の中央に表示されますtvLogin. あなたが設定した場合は幅がmatch_parentです (画面全体、すなわち) その後、途中でそれのレイアウトとどのような限り一定 (それは全体の幅であるため、, それはそのの真ん中です) そして、テキスト “ログイン” 左の数字の間に位置し、もはやありません. あなたは差別します 1 オファーを表示します 2 そのコンポーネントとそのコンテンツとして. TextViewので、それはテキストレイアウトを囲まれています, その内容は、テキストであります. それは一部のRelativeLayout包まれたフレームだと, その内容は、その内部の子供であります. したがって、この場合にも同様の間でmatch_parentテキストにしたいtvLoginの幅あなたは、あなたがプロパティを使用しなければならないとき アンドロイド:重力=”センター”. アンドロイド:ビューの内容を定義するための重心位置.
具体的には、樹脂次TextViewLoginする時期:

<TextView
    android:id="@+id/tvLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="Login"
    android:textSize="24sp" />

– プロパティアンドロイド:TEXTSIZE =”24SP” それは24spであるために、すなわち、私たちはフォントサイズを設定しました. フォントサイズの単位はSPです.

次EditTextのビューedituser以下

彼らは同じであり、あります 1 プロパティがあります:

アンドロイド:layout_below : あなたの手段以下のもの. 何かの下には、それに関連するビューのIDによって決定されます.

また、あなたはRelativeLayoutに使用することができるビューの同じ属性の多くを必要とします

• アンドロイド:layout_above : 特定のビューの上に位置します (引数は、ビューのIDです)
• アンドロイド:layout_toLeftOf : 特定のビューの左側にあります (引数は、ビューのIDです)
• アンドロイド:layout_toRightOf: 特定のビューの右側にあります (引数は、ビューのIDです)
• アンドロイド:layout_alignParentTop, アンドロイド:layout_alignParentRight, アンドロイド:layout_alignParentBottom, アンドロイド:layout_alignParentLeft : 属性が指定上に配置します, 右, 下, ビューの父は左. 私たちの引数が真であります, 偽.

3. RelativeLayoutとのインタフェースデザインチャット

我々はFacebookのメサジェアプリケーションインタフェースとして、それについて話しているチャットインタフェース. そこに意味 2 人々が互いにチャット. だから、次のようにインターフェイスがされる思い描きます:

上の画像によると、, 我々が必要とします 1 リストビュー (これは、データの一覧を表示させ、表示), 1 EditTextのと 1 ImageButtonは、その画像のボタンです. 私たちは、それぞれのIDを入れlvMessage, editMessage, btnSend.

• btnSendは、画面の見出しの下に位置し、画面の見出しの右側に位置します
• また、画面の見出しの下とbtnSendの左にあるeditMessage.
• editMessage上方に位置するlvMessage.

今、あなたが作成 1 フォルダを右クリックして、新しいインタフェースファイル レイアウト で 解像度 選択し 新しい - >レイアウトリソースファイル そして、ファイル名を指定 layout_chat.xml

次に、あなたが作成します 1 次のようにボタンアイコンを送ります. フォルダを右クリックして 解像度で描画可能
選択します 新しい - >ベクトルアセット. ダイアログには、[選択]ボタンをクリックします.

別のダイアログボックスが非常に多くのアイコンが表示されます, あなたは約プルダウン 2/3 そして、送信アイコンを選択:

[OK]をクリックします, アイコンのリターンの名前を変更します ic_send

> [完了] - 最後に[次へ]をクリックします. 今のアイコンは、フォルダ描画可能に作成されています, 実際には、XMLによって描かれました.

今layout_chat.xmlのテキスト]タブを開き、. デフォルトでは、あなたがのLinearLayoutが表示されます, RelativeLayoutあなたが編集して、次のようなコードを書きます:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/lvMessage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/editMessage" />

    <EditText
        android:id="@+id/editMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btnSend" />

    <ImageButton
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_send" />

</RelativeLayout>

このコードのプロパティは自身が説明しました, 唯一の属性のみ アンドロイド:SRC ファイルのアイコンへのパスを意味. 値はここにあります @描画可能/ ic_send すなわちフォルダ描画可能ic_send内のファイルを検索.

もう一つ注意すべきは、あなたがリストビューのプレビューが表示されますインターフェイスは次のように記述されることです。. これは、要素のリストを含むものとして説明するが、アプリケーションを実行するときには、空のリストが表示されます, 我々はデータを持っていないので、. その後、我々は、後でそれで動作します. 単独でこの記事では、唯一のインターフェイスの設計.

この時点で、それはまだ私たちはテーブルトップのログインを行うインタフェースを表示するプログラムを実行します, インターフェイスを変更するには、チャットMainActivity.javaの変更を提出する必要があります setContentView(R.layout.activity_main); 街 setContentView(R.layout.layout_chat); それでおしまい.

今日、彼のすべての長めのビットが、希望の多くを置きます. グッドデザインが良いプログラミングです. 私はあなたに効果的な学習を希望します. ご質問のコメントがある場合, シェアは記事下のコメントを残してください.