この記事では

我々は、相対的なレイアウトのViewGroupと余分なJavaコードの行を使用して非インタラクティブなアプリケーションを作成します
また、相対的なレイアウトについての道に沿って学ぶ.
コンテンツ全体に触発されます.
グーグルのudacityコースAndroid Basics: User Interface . それは5つの部分の最初の部分ですAndroid Basics Nanodegree Program シリーズは、このコースは、AndroidとJavaプログラミングの基礎です.
それで、私はブログシリーズを書いています、そして、これはこのシリーズの私の第2のブログです.

私たちのアプリのUIのデザインはこのようになります.

相対レイアウトとは❓

ビューは、画面上の矩形領域です.
ViewGroupは、それの内部でより小さな見解を含むことができる大きい見解です.ビューはビューグループの子と呼ばれ、ビューグループは子プロセスの親と呼ばれます.
基本的には、画面上でより多くのビューをきちんと表示するために使用されます.
Relativelayoutは、兄弟グループ(例えば別のビューの左または下にある)に対して子プロセスを相対的に位置させることができるビューグループの一般的な型です.

位置決めビュー

既定では、すべての子ビューがレイアウトの左上に描画されます.したがって、RelativeLayout.LayoutParams .

リレーションシップレイアウト

相対レイアウト内のビューでは、これらの相対的なレイアウトパラメータの値を使用して、画面上のビューの位置を決定します.
各レイアウトプロパティの値は、親相対ビューに対するレイアウト位置を有効にするBooleanまたはビューが配置されるレイアウト内の別のビューを参照するIDです.
以下は専攻attributes ビューで利用可能な関連付けられています.
彼らは4つの異なったカテゴリーに横たわっていた.

1️⃣親ビューで整列する

これらのタイプの属性は、ビューを親ビューの任意の側面に固定します.
その属性にはtrue or false ブール値.
XML属性
説明
アンドロイド:レイアウト
trueの場合、このビューの下端を親の下端に一致させます.
アンドロイド:レイアウト
trueの場合、このビューの末尾は親の末尾に一致します.
アンドロイド:レイアウト
trueの場合、このビューの左端を親の左端に一致させます.
アンドロイド:レイアウト
trueの場合、このビューの右端を親の右端に一致させます.
アンドロイド:レイアウト
trueの場合、このビューの開始エッジを親の開始エッジと一致させます.
アンドロイド:レイアウト
trueの場合、このビューの上端を親の上端に一致させる
例.

2️⃣親ビューに対する相対座標

その属性にはtrue or false ブール値.
ビューを親に対して中心に配置する場合は、次の3属性を使用できます.
XML属性
説明
水平方向のレイアウト
trueの場合、この子を親プロセス内で水平にします.
アンドロイド:レイアウト
trueの場合、この子を親の範囲内で水平方向に、垂直方向に中心に置きます.
の垂直方向のレイアウト
trueの場合、この子を親の中に垂直に配置します.
例.

3️⃣子ビューからの相対パス

既存のビューに対して新しいビューを配置できます.
属性を使用してアンカービューのID(主な子のビューを修正する必要があります)を作成する必要がありますandroid:id .
さて、これらの属性値はビューが配置されるべきアンカービューを参照するのと同じIDです.
例えば.android:layout_toLeftOf="@id/name_of_anchorView"以下の属性を使用することができます.
XML属性
説明
上記のレイアウト
指定したアンカービューIDの上にこのビューの下端を配置します.
アンドロイド:レイアウト
このビューの上端を指定したアンカービューIDの下に配置します.
アンドロイド:レイアウト
このビューの開始エッジを、指定したアンカービューIDの末尾に配置します.
アンドロイドのレイアウト
このビューの右端を指定したアンカービューIDの左側に配置します.
アンドロイド:レイアウト
このビューの左端を指定したアンカービューIDの右側に配置します.
アンドロイド:レイアウト
このビューの終了エッジを、指定したアンカービューIDの先頭に配置します.
例.

4️⃣ビューを子供のビューに相対的な

既存のビューに対して新しいビューを配置する場合は、次の属性を使用できます.
また、これらの属性値はアンカービューを参照するIDです
XML属性
説明
アンドロイド:レイアウト
このビューのベースラインを、指定したアンカービューIDのベースラインに配置します.
アンドロイド:レイアウト
このビューの下端は、指定したアンカービューIDの下端に一致します.
アンドロイド:レイアウト
このビューの終了エッジを、指定したアンカービューIDの末尾に一致させます.
アンドロイド:レイアウト
このビューの左端を指定したアンカービューIDの左端に一致させます.
アンドロイド:レイアウト
このビューの右端を指定したアンカービューIDの右端に一致させます.
アンドロイド:レイアウト
このビューの開始エッジを、指定したアンカービューIDの開始エッジに一致させます.
アンドロイド:レイアウト
このビューの上端を指定したアンカービューの最上部に一致させます.
例.

さあ

我々は、基本的に非対話的な、つまり、相対的なレイアウトを使用して、私たちのアプリのUIを設計するためのXMLコードの余分なJavaコードの行はないの誕生日カードアプリを作成します.
XMLレイアウトのコードを書きます

ステップ1 ->ビューを選択

ステップ2 ->ビューの位置

ステップ3 ->スタイル

ステップ1：ビューを選択

UIのコードを書く前に、レイアウトをどのように見ているかを考えたり、UIページのデザインやダイヤグラムを作成したりする方法を考えなければなりません.

私たちのレイアウトはこのようになります.

イメージを見て、それは明らかです.
我々は2つのtextview 1 imageview ssを使用するでしょう、私達は2つの異なる場所で書かれたイメージとそれらのテキストの背景にイメージがあるのを見ます.

ステップ2：ビューの位置

現在、ビューを配置するためにどのViewGroupを使用するべきか、2つのテキストビューがImageViewの上で重なっているのを見て、相対的なレイアウトはこの状況に絶好です.

重複図
相対的なレイアウトでは、ビューはオーバーラップし、XML


画像を挿入する

画像を保存するdrawable folder 属性を使用するandroid:src 像を見せる

ここでもcentre crop 画像をスケールアップし、それを巻き込むようにイメージをイメージするには、フルブリード画像を作成し、良い没入感を与えるし、その幅と高さmatch_parent これにより、画面サイズの全画面を取得する

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/happybirthday" />

テキストビューの配置
今、我々は相対的なレイアウトを選択したので、他の人についてのビューを配置し、配置する方法について考えてください.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HAPPY BIRTHDAY" />
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:text="  ROHIT.K 🎊 " />

HAPPY BIRTHDAY TextViewはデフォルトでは、我々は位置ビューに任意のレイアウトパラメータを追加する必要はありません右上隅に配置されます

ROHIT.K テキストの右下隅に配置する必要がありますtrue

height and width 我々がテキストの量で柔軟になる必要があるので、WrapPount内容に設定されるべきです

さて、このコードでは、レイアウトはこのようになります.

ステップ3：スタイルのビュー

いくつかのスタイルを追加したり、UIの外観を良くするために、いくつかの属性を追加または変更する必要があります.
ので、UIをより美しくするために、より良いユーザー体験のためのスタイルを追加します

スタイリングについては、状況に応じてテキストのサイズ、フロント＆カラーを変更することができます.

また、textviewの背景色の色を変更することもできます.

そして、ベストはパディングまたはマージンを追加することです.そうすれば、それはより読めるようになります.

テキストを大きくするために
テキストのサイズを作る36sp 属性の使用android:textSize
フォントの設定
テキストフォントをsans-serif-light 属性の使用android:fontFamily
色の設定
属性を使用するandroid:textColor
テキストビューの背景
背景色を変更するにはandroid:background
パディングとマージンの追加
属性を使用しますandroid:padding and android:layout_margin 我々は両方の状況のいずれかまたは両方を使用できます.
スタイリングは、我々のアプリの外観をより良くし、審美的な外観を与えるためにどのように良いことができるかによって異なります
それは完全に経験と我々の創造性に依存する
我々のアプリのこのイメージは、どのようにXMLでこれらのコードを書いた後のようになります

書くコードactivity_main.xml アンドロイドスタジオ
内部にあるres フォルダ

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/happybirthday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="#9E03DAC5"
        android:fontFamily="sans-serif-light"
        android:padding="30dp"
        android:text="HAPPY BIRTHDAY"
        android:textColor="@android:color/white"
        android:textSize="36sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="#C8FFFFFF"
        android:fontFamily="sans-serif-light"
        android:padding="10dp"
        android:layout_margin="30dp"
        android:text="  ROHIT.K 🎊 "
        android:textColor="@color/teal_200"
        android:textSize="36sp" />

</RelativeLayout>

それは今日のすべてです！

参考文献

ImageSource

Google's Udacity Course

あなたが私の内容が好きならば、plzは共有します
また、任意の質問や提案を下にコメントを自由に感じている場合.
あなたがAndroid開発を始めることを考えているならば、あなたはこのブログをチェックすることができます.

何をAndroidアプリの開発を始めるために学ぶか？

ロハットクマル・ Jul 12・ 6分読む

#beginners #android #kotlin #java

ありがとう！😊

あなたは私に従うことができます