プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Android
  • 【Android】サンプル1~検索画面っぽいデザインを作る~(Android Studio…
 
 
     
  • サーバー言語  
    • Ruby
    • Rails
    • PHP
    • Laravel
  •  
  • データ設計  
    • NoSQL
    • SQL
    • RDB設計
    • Oracle
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    •  
    • セキュリティ
    • コンテナ全般
    • Linux
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
    • TypeScript
  •  
  • 設計  
       
    • 実装設計
    •  
    • 認証設計
    • 例外設計
    •  
    • 動画設計
    • DDD
  • 問い合わせ
  

【Android】サンプル1~検索画面っぽいデザインを作る~(Android Studio3.1にて)

04.08

  • miyabisan2
  • コメントを書く

この記事は6分で読めます

それでは、実際にAndroid Studioで画面デザインを作成してみましょう。

あくまでデザインだけで、内部ロジック等までは作成しません。

デザイン完成イメージ

まず、サンプルとして下記の完成イメージを作っていきます。

作成の流れ

まず、画面を作成する上での流れは下記になります。

1.デザインモードで、パーツを配置する。

2.「string.xml」で、固定値を外出しする。

3.「テキストモード」で、xmlファイルを編集する。

これを見ると「デザインモード」の方が直感的だし、そちらで全て実装すればいいのでは?と思われる方もいらっしゃるかもしれませんが、「デザインモード」の場合は、変更できる属性の数が少なくて細かいレイアウトを行うことができません。

あくまで、「デザインモード」は、大雑把なレイアウトや部品配置だけ行うもので、細かい設定は「テキストモード」で行うと覚えましょう!

前提

なお、今回の手順では「3.「テキストモード」で、xmlファイルを編集する。」の説明に集中するために、「1.デザインモードで、パーツを配置」及び、「「string.xml」で、固定値を外出し」の手順は飛ばします。

もし、やり方がわからない方は、下記の記事を参照下さい。

【Android】Android Studioでの画面レイアウトの作り方~その2:レイアウト部品の使い方~

【Android】Android Studioでの画面レイアウトの作り方~その3:文言の外出し

実際に作ってみる。

まずは、下記のように、「商品検索」とアプリ名をつけます。

次に、レイアウトを決めます。パーツを縦に並べたいので、「LinearLayout(vertical)」を選択します。

テキストビュー(textView)の設定

 

まずは、下記のように「TextView」を配置し、文言を設定します。

1
レイアウトファイルを「テキストモード」で見ると下記のようになります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity">

    <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TextView" tools:text="@string/searchStr" />
</LinearLayout>

「android:layout_width」が「TextView」の横幅、「android:layout_height」が縦幅ということは何となく予想がつくと思いますが、その値である属性の意味は下記です。

属性の値 説明
match_parent 画面いっぱいまで伸ばす。
wrap_content 表示するものに、あわせてビューサイズを変更する。

なので、テキストビューの見た目が横幅がいっぱいになり、縦幅が小さく表示されています。

他のパーツも設定する。

レイアウトファイル

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity">

    <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:text="TextView" tools:text="検索条件を入力してください。" />

    <EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:ems="10" android:inputType="textPersonName" android:text="" />

    <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">

        <CheckBox android:id="@+id/checkBox2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/thousandLow" />

        <CheckBox android:id="@+id/checkBox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/thousandHigh" />
    </LinearLayout>

    <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal">

        <RadioButton android:id="@+id/CompleteMatch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/CompleteMatch" />

        <RadioButton android:id="@+id/portalMatch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/portalMatch" />
    </RadioGroup>

    <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="Button" tools:text="@string/searchButton" />

</LinearLayout>

stringファイル

 <resources> <string name="app_name">商品検索</string> <string name="searchStr">検索したい文言を入力して下さい。</string> <string name="CompleteMatch">完全一致</string> <string name="portalMatch">部分一致</string> <string name="searchButton">検索</string> <string name="thousandLow">1000円以下</string> <string name="thousandHigh">1000円以上</string> </resources> 

すると、下記のような画面デザインになります。

ポイント
「チェックボックス」を横に並べる際には、「LinearLayout」の中に、配置します。
「ラジオボタン」を横に並べる場合は、「RadioGroup」の中に配置します。

 

  • 2018 04.08
  • miyabisan2
  • コメントを書く
  • Android
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2018 04.04

    【Android】Androidプロジェクトのフォルダ構成(Android Studio3.1にて)

  2. 2018 04.01

    【Android】AVD(Android Virtual Device)を作成する。(Android Studio3.1にて)

  3. 2018 04.08

    【Android】アクティビティファイル(Javaコード)の基本

  4. 2018 04.01

    【Android】Activityの種類(Android Studio3.1にて確認)

  5. 2018 03.25

    【スマホアプリ開発】始め方

  6. 2018 04.07

    【Android】Android Studioでの画面レイアウトの作り方~その3:文言の外出し

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【データベース設計】ER図について

【Android】アクティビティファイル(Javaコー…

RETURN TOP

アーカイブ

  • 2023年3月
  • 2023年1月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年6月
  • 2019年5月
  • 2019年3月
  • 2019年1月
  • 2018年12月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

カテゴリー

  • .NET Framework
  • Ajax
  • Android
  • Apache
  • API
  • Auth0
  • AWS
  • Babel
  • Babylon.js
  • Bitbucket
  • BootStrap
  • C#
  • C++
  • CGI
  • CSS
  • Cypress
  • C言語
  • DBスペシャリスト
  • DDD
  • DevOps
  • Django
  • Docker
  • Eclipse
  • EKS
  • Firebase
  • Git
  • GitHub Actions
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Heroku
  • HTML
  • HTML5
  • Java
  • JavaScript
  • Javaサーブレット
  • Jekins
  • Jenkins
  • JIRA
  • jQuery
  • JSP
  • JSTL
  • JUnit
  • Kubernetes
  • Laravel
  • linux
  • Mac
  • Maven
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • OAuth
  • Open ID Connect
  • Oracle
  • OS
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Prisma
  • PWA
  • Python
  • React
  • Recoil
  • Redis
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Salesforce
  • Sass
  • SEO
  • Slack
  • SPA
  • Spring Boot
  • Spring Framework
  • Spring MVC
  • SQL
  • Struts
  • Struts2
  • Sublime Text
  • Swagger
  • Tailwind CSS
  • Three.js
  • Tomcat
  • TypeScript
  • UML
  • Unity
  • UX
  • VB.NET
  • Visual Basic
  • VSCode
  • Vue.js
  • WebGL
  • WebHook
  • webpack
  • WebRTC
  • WebSocket
  • Webサービス開発
  • Webデザイン
  • Web技術
  • wireshark
  • XD
  • XML
  • インフラ
  • オブジェクト指向
  • クラウド
  • ゲームプランニング
  • ゲーム開発
  • サーバー
  • システム開発
  • スクラム
  • スマホアプリ開発
  • セキュリティ
  • その他
  • データベース
  • データ分析
  • デザインパターン
  • テスト
  • ネットワーク
  • バージョン管理システム
  • ハードウェア
  • プログラミング全般
  • マイクロサービス
  • マルチメディア
  • リファクタリング
  • 人間関係
  • 会計知識
  • 体調管理
  • 副業
  • 動画
  • 国際化
  • 応用情報
  • 情報処理技術者試験
  • 文字コード
  • 日常生活
  • 未分類
  • 業務知識
  • 要件定義
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | Wordpress Thema | @