網訊小編帶你詳解安卓開發UI設計問題以及解決辦法：

1. 頁面部分占用1/N的(de)情況

   解決方案;
            使用線性布局，其屬性android:orientation="vertical"，android:weightSum="3"
            線性布局裏面有兩個相對布局，分别設置兩個相對布局的(de)layout_weight
            關于其中的(de)權重比為(wèi)2：1，參閱Android布局中的(de)layout_weight和(hé)weightSum屬性的(de)詳解及使用

 <LinearLayout

                android:orientation="vertical"
                ...
                android:weightSum="3">
                <!-- 上部  -->
                <RelativeLayout
                    android:layout_weight="2"
                    android:id="@+id/top"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/colorPrimaryDark">

                    ...

                </RelativeLayout>

                <!-- 中部和(hé)底部  -->
                <RelativeLayout
                    android:id="@+id/middle"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    ...

                </RelativeLayout>
            </LinearLayout>
            

2. 分割線的(de)實現

    分割線的(de)實現，方法比較粗暴，直接使用ImageView組件實現
    給其src設置為(wèi)一(yī)個顔色，然後修改其weight(對應分割線的(de)寬度)以及height(對應分割線的(de)高(gāo)度)屬性以及位置設置

     <ImageView
           android:id="@+id/horLine2"
           android:layout_width="match_parent"
           android:layout_height="15dp"
           android:layout_below="@+id/info"
           android:layout_marginTop="15dp"
           android:src="#1E000000"/>
   

3. 多個組件高(gāo)度一(yī)緻，頂對齊，并且水平均勻分布

    例子(zǐ)：需要實現下圖的(de)情況，需要三個button高(gāo)度一(yī)緻，頂對齊并且水平均勻分布
    在這裏插入圖片描述
    首先需要了解一(yī)下約束布局以其使用
        約束布局（ConstraintLayout），布局內(nèi)組件按各種約束排列。每個組件受到三類約束，即其他組件，父容器(parent)，基準線(GuideLine)。 約束布局代碼可(kě)歸納為(wèi)以下形式：app:layout_constraint[組件本身的(de)位置]_to[目标位置]Of="[目标id]"。因此若想要組件水平居中，隻需設置組件的(de)左右邊界與父容器的(de)左右邊界分别對齊。同理(lǐ)，組件的(de)垂直居中也可(kě)以這麽設置。
    再思考本問題，是否也能使用約束布局來完成呢(ne)？使用約束布局，将三個按鈕放在一(yī)個約束布局裏面，每個按鈕視(shì)圖的(de)左側或者右側與需要的(de)對齊按鈕的(de)相應側對齊即可(kě)，則組件之間就可(kě)以處于均勻分布了。

     <android.support.constraint.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
         <Button
             app:layout_constraintRight_toLeftOf="@+id/loadBtn"
             app:layout_constraintLeft_toLeftOf="parent"
             android:id="@+id/saveBtn"
             android:text="SAVE"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />

         <Button
             android:id="@+id/loadBtn"
             android:text="LOAD"
             app:layout_constraintLeft_toRightOf="@+id/saveBtn"
             app:layout_constraintRight_toLeftOf="@+id/clearBtn"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />

         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:layout_constraintLeft_toRightOf="@+id/loadBtn"
             app:layout_constraintRight_toRightOf="parent"
             android:id="@+id/clearBtn"
             android:text="CLEAR"/>

     </android.support.constraint.ConstraintLayout>

安卓UI界面設計的(de)方式；

用戶界面在程序開發中十分重要，一(yī)個好的(de)用戶界面設計需要考慮到用戶使用體驗、是否美觀方便等。在界面設計的(de)過程中，需要考慮如(rú)何制作出UI界面，怎麽樣控制UI界面兩大塊。

本文主要介紹通過兩種方式來進行界面設計：
1、通過xml文件進行界面設計
2、通過代碼控制進行界面設計

一(yī)、通過xml文件進行界面設計
打開Android Studio，建立工程，在res/layout下存放的(de)是界面布局文件。雙擊創建的(de)文件，左邊是界面設計，右邊對應了界面設計的(de)xml文本。
1>在左邊控件中，拖動一(yī)個button到右邊的(de)手機界面中，之後點擊上線畫圈右邊的(de)text查看文本，可(kě)以看到xml已經編寫完成。
2>切換到代碼目錄，打開之前創建的(de)MainActivity，在onCreate()方法中：

setContentView(R.layout.activity_main);  //将編寫的(de)界面顯示到手機屏幕

   
MainActivity添加兩個私有數據成員：

private TextView tv;
private Button bt;

   
onCreate()裏面初始化tv和(hé)bt，并給bt添加監聽事件

tv = (TextView)findViewById(R.id.textView);//控件初始化
bt = (Button) findViewById(R.id.button);//控件初始化

bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText("你點擊了按鈕!");
}
);//添加監聽

運行程序，點擊按鈕，原來的(de)hello world！文本發生改變。在這裏，兩個控件都是通過xml文件定義的(de)，我們在代碼中實現了一(yī)個監聽器，也就是界面的(de)控制邏輯。
實例：
通過代碼進行界面設計時，我們建立一(yī)個TextView控件來寫标題；建立一(yī)個ImageView控件來寫标題。先将圖片複制到res/drawable目錄下，然後通過app:srcCompat=”@drawable/sysu”來引用；建立兩個TextView控件，用來寫“學(xué)号”和(hé)“密碼”，設置建立兩個EditView控件，用來輸入學(xué)号和(hé)密碼；建立一(yī)個RadioGroup，之後再在裏面建立兩個單選按鈕RadioButton。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.example.yc.sysu.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="學(xué)生信息系統"
        android:textSize="20sp"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <ImageView
        android:id="@+id/icon"
        android:layout_width="104dp"
        android:layout_height="104dp"
        app:srcCompat="@drawable/sysu"
        app:layout_constraintTop_toBottomOf="@id/title"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/user_id"
        android:text="學(xué)号："
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/icon"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/user_pwd"
        android:text="密碼："
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/user_id"
        android:layout_marginTop="20dp"/>

    <EditText
        android:id="@+id/text_userid"
        android:hint="請輸入學(xué)号"
        android:textColor="#000000"
        android:textSize="18sp"
        android:paddingTop="0dp"
        android:digits="0123456789"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_id"
        app:layout_constraintLeft_toRightOf="@+id/user_id"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp"/>

    <EditText
        android:id="@+id/text_userpwd"
        android:hint="請輸入密碼"
        android:textColor="#000000"
        android:textSize="18sp"
        android:password="true"
        android:paddingTop="0dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_pwd"
        app:layout_constraintLeft_toRightOf="@+id/user_pwd"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp" />

    <RadioGroup
        android:id="@+id/radioButton"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/user_pwd"
        android:layout_marginTop="30dp">

    <RadioButton
        android:id="@+id/radioButton1"
        android:text="學(xué)生"
        android:textColor="#000000"
        android:textSize="18sp"
        android:checked="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:text="教職工"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"/>
    </RadioGroup>

    <View
        android:id="@+id/button_box"
        android:layout_height="50dp"
        android:layout_width="185dp"
        app:layout_constraintTop_toBottomOf="@id/radioButton"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/button1"
        android:text="登錄"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@id/button_box"
        app:layout_constraintTop_toTopOf="@id/button_box" />

    <Button
        android:id="@+id/button2"
        android:text="注冊"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/button1"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toTopOf="@id/button_box"/>

</android.support.constraint.ConstraintLayout>

shape.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> <solid android:color="#3f51b5"/> <corners android:radius="10dip"/> <padding
        android:bottom="5dp"
        android:top="5dp"
        android:left="10dp"
        android:right="10dp"/> </shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#3f51b5"/>
    <corners android:radius="10dip"/>
    <padding
        android:bottom="5dp"
        android:top="5dp"
        android:left="10dp"
        android:right="10dp"/>
</shape>

二、通過代碼進行界面設計
定義MainActivity的(de)私有成員：

    private TextView tv;
    private Button bt;

重寫onCreate()，通過new定義一(yī)個線性布局和(hé)Button按鈕和(hé)文本框控件，布局裏面加入控件，控件加上監聽事件

LinearLayout l = new LinearLayout(this);  //定義線性布局
        setContentView(l);                //線性布局加入屏幕

        tv = new TextView(this);          //定義控件
        bt = new Button(this);            //定義控件

        l.addView(bt);                   //加入布局
        l.addView(tv);                  //加入布局

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv.setText("你點擊了按鈕!");
            }
        });         //監聽事件

運行代碼，點擊按鈕，将會出現”你點擊了按鈕!”的(de)文本提示。

責任編輯：中山網站建設
 【網訊網絡】國(guó)家高(gāo)新技術企業》十年(nián)專注軟件開發，網站建設，網頁設計，APP開發，小程序，微信公衆号開發，定制各類企業管理(lǐ)軟件（OA、CRM、ERP、訂單管理(lǐ)系統、進銷存管理(lǐ)軟件等)！
服務熱線：0760-88610046、13924923903，http://www.wansion.net