技術共有

Android 電卓インターフェイスの設計 - TableLayout の実際の操作

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

ミッションターゲット

図 1 に示すように、TextView、Button などを使用して電卓インターフェイスを実装します。

ここに画像の説明を挿入します
図 1 電卓インターフェイスのレンダリング

タスク分析

インターフェイス全体はテーブル レイアウトを使用し、最初の行は 4 列にまたがる TextView コントロールを使用し、中央の 4 行と 4 列にまたがり、最後の行の最初のコントロールは 2 列にまたがります。

タスクの実装

1) 新しいプロジェクトを作成し、「空のビュー アクティビティ」を選択し、プロジェクト名を Calucator、パッケージ名を cn.edu.jssvc.calucator として指定します。
2) 線形レイアウト設計インターフェイスを使用し、 activity_mail.xml を開き、コード ビューに切り替え、コード内の制約レイアウト (ConstraintLayout) をテーブル レイアウト (TableLayout) に変更し、コントロールを削除して、属性 android:stretchColumns を設定します。 TableLayout = "0,1,2,3"。
3) 図 2 と図 3 に示すように、パレット領域の TableRow をコンポーネント ツリーにドラッグし、TableRow 属性 android:layout_weight="1" を設定して、これらの 5 行が画面全体を均等に分割するようにします。
ここに画像の説明を挿入します
図 2 TableRow の設定
ここに画像の説明を挿入します
図 3 TableRow プロパティの設定
4) TextView コントロールを行 1 にドラッグし、その android:layout_span 属性を 4、つまり 4 列に設定します。