Xamarin-layouts

提供：Dev Guides
2020年6月23日 (火) 05:24時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

Xamarin-レイアウト

線形レイアウト

線形レイアウトでは、コンテンツは水平または垂直に配置されます。

線形レイアウト─水平

このレイアウトのコンテンツは水平に配置されます。 このデモでは、3つのボタンを作成し、線形レイアウトで水平に配置します。 

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:orientation = "horizontal"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent"
   android:background = "#d3d3d3"
   android:minWidth="25px"
   android:minHeight="25px">
   <Button
      android:id="@+id/MyButton1"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 1"
      android:background="@android:color/holo_green_dark"/>
   <Button
      android:id="@+id/MyButton2"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 2"
      android:background="@android:color/holo_green_dark"/>
   <Button
      android:id="@+id/MyButton3"
      android:layout_width="wrap_content"
      android:layout_margin="10dp"
      android:layout_height="wrap_content"
      android:text="Button 3"
      android:background="@android:color/holo_green_dark"/>
</LinearLayout>

結果の出力は以下のようになります-

水平レイアウト水平

線形レイアウト─垂直

このタイプのレイアウトは、子ビューを垂直に配置します。 

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:orientation = "vertical"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent"
   android:background = "#d3d3d3"
   android:minWidth = "25px"
   android:minHeight = "25px">
   <Button
      android:id = "@+id/MyButton1"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text = "Button 1"
      android:background = "@android:color/holo_green_dark"/>
   <Button
      android:id = "@+id/MyButton2"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text = "Button 2"
      android:background = "@android:color/holo_green_dark"/>
   <Button
      android:id = "@+id/MyButton3"
      android:layout_width = "fill_parent"
      android:layout_margin = "10dp"
      android:layout_height = "wrap_content"
      android:text="Button 3"
      android:background = "@android:color/holo_green_dark"/>
</LinearLayout>

その結果の出力は次のとおりです-

線形レイアウト垂直

相対レイアウト

このビューでは、子ビューの位置は、その親または兄弟ビューに対して相対的です。 次の例では、3つのEditTextビューとボタンを作成し、それらを相対的に配置します。

新しいプロジェクトを作成し、それを relative layout app と呼びます。 main.axml を開き、次のコードを追加します。 

<?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:paddingLeft = "16dp"
   android:background = "#d3d3d3"
   android:paddingRight = "16dp">
   <EditText
      android:id = "@+id/name"
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:hint = "First Name"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark"/>
   <EditText
      android:id = "@+id/lastName"
      android:layout_width = "0dp"
      android:layout_height = "wrap_content"
      android:hint = "Last Name"
      android:layout_below = "@id/name"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark"
      android:layout_alignParentLeft = "true"
      android:layout_toLeftOf = "@+id/age"/>
   <EditText
      android:id = "@id/age"
      android:layout_width = "80dp"
      android:layout_height = "wrap_content"
      android:layout_below = "@id/name"
      android:hint = "Age"
      android:textColorHint = "@android:color/background_dark"
      android:textColor = "@android:color/background_dark"
      android:layout_alignParentRight = "true"/>
   <Button
      android:layout_width = "85dp"
      android:layout_height = "wrap_content"
      android:layout_below = "@id/age"
      android:layout_alignParentRight = "true"
      android:text = "Submit"
      android:background = "@android:color/holo_green_dark"/>
</RelativeLayout>

このコードで使用した重要なパラメータは次のとおりです-

  • android：layout_below -子ビュー要素をその親の下に揃えます。
  • android：layout_alignParentLeft -親要素を左に揃えます。
  • android：layout_toLeftOf -このプロパティは、要素を別の要素の左に揃えます。
  • android：layout_alignParentRight -親を右に揃えます。

今すぐアプリをビルドして実行すると、次の出力画面が生成されます-

相対レイアウト

フレームレイアウト

フレームレイアウトは、1つのアイテムのみを表示するために使用されます。 このレイアウトで複数のアイテムを互いにオーバーラップさせずに配置することは困難です。

新しいプロジェクトを開始し、 frameLayoutApp と呼びます。 以下に示すように、新しいフレームレイアウトを作成します。 

<?xml version = "1.0" encoding = "utf-8"?>
<FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent">
  <ImageView
      android:id = "@+id/ImageView1"
      android:scaleType = "matrix"
      android:layout_height = "fill_parent"
      android:layout_width = "fill_parent"
      android:src = "@drawable/img1"/>
   <TextView
      android:layout_width = "fill_parent"
      android:layout_height = "wrap_content"
      android:textSize = "50dp"
      android:textColor = "#000"
      android:text = "This is a Lake"/>
   <TextView
      android:gravity = "right"
      android:layout_width = "fill_parent"
      android:layout_height = "wrap_content"
      android:textSize = "50dp"
      android:text = "A very Deep Lake"
      android:layout_gravity = "bottom"
      android:textColor = "#fff"/>
</FrameLayout>

上記のコードは、画面全体を埋める imageView を作成します。 次に、2つのテキストビューが imageView の上に浮かびます。

次に、アプリケーションをビルドして実行します。 次の出力が表示されます-

フレームレイアウト

テーブルレイアウト

このレイアウトでは、ビューは*行*および*列*に配置されます。 仕組みを見てみましょう。 

<?xml version = "1.0" encoding = "utf-8"?>
<TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:layout_width = "fill_parent"
   android:background = "#d3d3d3"
   android:layout_height = "fill_parent"
   android:stretchColumns = "1">

   <TableRow>
      <TextView
         android:text = "First Name:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black"/>
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black"/>
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Last Name:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black"/>
      <EditText
         android:width = "50px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black"/>
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Residence:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black"/>
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black"/>
   </TableRow>

   <TableRow>
      <TextView
         android:text = "Occupation:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:textColor = "@android:color/black"/>
      <EditText
         android:width = "100px"
         android:layout_width = "fill_parent"
         android:layout_height = "30dp"
         android:textColor = "@android:color/black"/>
   </TableRow>

   <TableRow>
      <Button
         android:text = "Cancel"
         android:layout_width = "wrap_content"
         android:layout_margin = "10dp"
         android:layout_height = "wrap_content"
         android:background = "@android:color/holo_green_dark"/>
      <Button
         android:text = "Submit"
         android:width = "100px"
         android:layout_margin = "10dp"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:background = "@android:color/holo_green_dark"/>
   </TableRow>
</TableLayout>

上記のコードは、 tables および rows を使用して配置された単純なデータ入力フォームを作成します。

テーブルレイアウト

「https://www.finddevguides.com/index.php?title=Xamarin-layouts&oldid=25765」から取得
Powered by MediaWiki