android界面佈局

時間 2020-01-29

標籤 android 界面佈局欄目 Android 简体版

原文原文鏈接

（一）LinearLayout界面編排模式android

他的格式是按照線性順序，由上往下或右左往右，逐一排列界面組件。app

layout_width:中的「match_parent」表示要填滿他所在的外框，而「wrap_content」表示它的大小隻要知足內部所包含的界面組件便可。dom

android:orientation:「horizontal」表示排列方式爲水平，而「vertical」表示排列方式爲垂直ide

LinearLayout標籤能夠想象成一個外框，咱們能夠在其裏面加入另一個LinearLayout標籤佈局

咱們將以前的婚姻建議程序改良一下，換成如下格式spa

第一層佈局仍是LinearLayout垂直佈局，裏面嵌套了一個LinearLayout水平佈局，在該佈局中包括性別TextView，和Spinner性別選擇下拉框code

再在第一層上嵌套一個LinearLayout水平佈局，在該佈局中包含年齡TextView和輸入年齡框EditTextxml

最後在第一層的佈局上加入Button肯定按鈕和建議TextViewblog

界面佈局：遊戲

<?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"
    android:padding="@android:dimen/app_icon_size"
    tools:context=".MainActivity">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex"
            android:textSize="25sp" />
        <Spinner
            android:id="@+id/spnSex"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:entries="@array/sex_list"
            android:spinnerMode="dialog"
            android:prompt="@string/spn_sex_list_prompt" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/age"
            android:textSize="25sp" />
        <EditText
            android:id="@+id/edtAge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="number"
            android:hint="@string/edt_age_hint" />
    </LinearLayout>
    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/btn_ok"
        android:textSize="25sp" />
    <TextView
        android:id="@+id/txtR"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp" />

</LinearLayout>

頁面截圖：

（二）TableLayout界面佈局

顧名思義，tabel就是按照表格的形式來進行排列，也就是由上往下一行接着一行，並且每個字段都上下對齊

每一行用標籤用TableRow標籤包裹起來，若是想讓一個TableRow中的足見按照比例使用整個Table的寬度，能夠藉助android:layout_weight屬性

例如：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    tools:context=".MainActivity">
    <TableRow>
        <TextView
            android:text="姓名："
            android:layout_weight="1"/>
        <TextView android:text="性別："
            android:layout_weight="1"/>
        <TextView android:text="生日："
            android:layout_weight="1"/>
    </TableRow>
    <TableRow>
        <EditText android:text="輸入姓名"
            android:layout_weight="1"/>
        <EditText android:text="輸入性別"
            android:layout_weight="1"/>
        <EditText android:text="輸入生日"
            android:layout_weight="1"/>
    </TableRow>
    <Button android:text="肯定"/>
</TableLayout>

程序截屏：

TableRow中的組件和上一個組件對齊，沒法錯開，就會造成以下圖：

那麼咱們想要錯開可使用，在TableLayout標籤中再增長一個TableLayout標籤，這樣就可讓不一樣行的字段錯開

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:layout_gravity="center_horizontal"
    android:layout_margin="10dp"
    tools:context=".MainActivity">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TableRow>
            <TextView
                android:text="姓名："
                android:layout_weight="1"/>
            <TextView android:text="性別："
                android:layout_weight="1"/>
            <TextView android:text="生日："
                android:layout_weight="1"/>
        </TableRow>
        <TableRow>
            <EditText android:text="輸入姓名"
                android:layout_weight="1"/>
            <EditText android:text="輸入性別"
                android:layout_weight="1"/>
            <EditText android:text="輸入生日"
                android:layout_weight="1"/>
        </TableRow>
    </TableLayout>
    <TableRow>
        <TextView android:text="電話：" />
        <TextView android:text="地址：" />
    </TableRow>
    <TableRow>
        <EditText android:text="請輸入電話："/>
        <EditText android:text="請輸入地址"/>
    </TableRow>
    <Button android:text="肯定"/>
</TableLayout>

應用截圖：

（三）RelativeLayout界面編排

先作個小案例試試手：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt1" />
    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt2"
        android:layout_toRightOf="@+id/txt1" />
    <EditText
        android:id="@+id/edt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt1"
        android:layout_below="@+id/txt1" />
    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt2"
        android:layout_toRightOf="@+id/edt1" />
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:layout_below="@+id/edt1" />
</RelativeLayout>

程序截圖：

能夠看到兩個EditText出現一高一低，沒有對齊。所以咱們須要給edt2加上：android:layout_alighTop="@+id/edt1"

咱們從新對其編排一下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_height="match_parent"
    android:layout_width="400dp"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt1" />
    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="txt2"
        android:layout_above="@+id/edt2"
        android:layout_alignLeft="@+id/edt2" />
    <EditText
        android:id="@+id/edt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt1"
        android:layout_below="@+id/txt1" />
    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="edt2"
        android:layout_toRightOf="@+id/edt1"
        android:layout_alignTop="@+id/edt1" />
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:layout_below="@+id/edt1" />
</RelativeLayout>

猜拳遊戲：

界面佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_height="match_parent"
    android:layout_width="400dp"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_title"
        android:textColor="#FF00FF"
        android:textSize="40sp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"/>
    <TextView
        android:id="@+id/txtCom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_com_play"
        android:layout_below="@+id/txtTitle"
        android:layout_alignLeft="@+id/txtTitle"
        android:textSize="20sp"
        android:layout_marginBottom="20dp"
        android:layout_alignStart="@+id/txtTitle" />
    <TextView
        android:id="@+id/txtMyPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/prompt_my_play"
        android:layout_below="@id/txtTitle"
        android:layout_alignRight="@id/txtTitle"
        android:textSize="20sp"
        android:layout_marginBottom="20dp"
        android:layout_alignEnd="@id/txtTitle" />
    <Button
        android:id="@+id/btnScissors"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_scissors"
        android:layout_below="@+id/txtMyPlay"
        android:layout_alignLeft="@+id/txtMyPlay"
        android:textSize="20sp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_alignStart="@+id/txtMyPlay" />
    <TextView
        android:id="@+id/txtComPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnScissors"
        android:layout_alignLeft="@+id/txtCom"
        android:textSize="30sp"
        android:textColor="#FF00FF"
        android:layout_alignStart="@+id/txtCom" />
    <Button
        android:id="@+id/btnStone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_stone"
        android:layout_below="@id/btnScissors"
        android:layout_alignLeft="@id/btnScissors"
        android:textSize="20sp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_alignStart="@id/btnScissors" />
    <Button
        android:id="@+id/btnPaper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/play_paper"
        android:layout_below="@id/btnStone"
        android:layout_alignLeft="@id/btnStone"
        android:textSize="20sp"
        android:paddingLeft="25dp"
        android:paddingRight="25dp"
        android:layout_alignStart="@id/btnStone" />
    <TextView
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/result"
        android:layout_below="@id/btnPaper"
        android:layout_alignLeft="@id/txtCom"
        android:textSize="20sp"
        android:textColor="#0000FF"
        android:layout_marginTop="20dp"
        android:layout_alignStart="@id/txtCom" />

</RelativeLayout>

字符串資源文件：

<resources>
    <string name="app_name">RelativeLayout</string>
    <string name="prompt_com_play">電腦出拳：</string>
    <string name="prompt_my_play">玩家出拳：</string>
    <string name="play_scissors">剪刀</string>
    <string name="play_stone">石頭</string>
    <string name="play_paper">布</string>
    <string name="player_win">恭喜，你贏了</string>
    <string name="player_lose">很惋惜，你輸了</string>
    <string name="player_draw">雙方平手！</string>
    <string name="prompt_title">和電腦猜拳</string>
    <string name="result">判斷輸贏：</string>
</resources>

程序文件：

package com.example.relativelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {
    private TextView mTxtComPlay,mTxtResult;
    private Button mBtnScissors,mBtnStone,mBtnPaper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTxtComPlay=(TextView)findViewById(R.id.txtComPlay);
        mTxtResult=(TextView)findViewById(R.id.txtResult);
        mBtnScissors=(Button)findViewById(R.id.btnScissors);
        mBtnPaper=(Button)findViewById(R.id.btnPaper);
        mBtnStone=(Button)findViewById(R.id.btnStone);

        mBtnScissors.setOnClickListener(btnScissorsOnClick);
        mBtnStone.setOnClickListener(btnStoneOnClick);
        mBtnPaper.setOnClickListener(btnPaperOnClick);
    }

    private Button.OnClickListener btnScissorsOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石頭，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
        }
    };
    private Button.OnClickListener btnStoneOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石頭，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
        }
    };
    private Button.OnClickListener btnPaperOnClick=new Button.OnClickListener(){
        @Override
        public void onClick(View v) {
            int iComPlay=(int)(Math.random()*3+1);
            //1.剪刀，2.石頭，3.布
            if(iComPlay==1)
            {
                mTxtComPlay.setText(R.string.play_scissors);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_lose));
            }
            else if(iComPlay==2)
            {
                mTxtComPlay.setText(R.string.play_stone);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_win));
            }
            else
            {
                mTxtComPlay.setText(R.string.play_paper);
                mTxtResult.setText(getString(R.string.result)+getString(R.string.player_draw));
            }
        }
    };
}

程序截圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。