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

1. 頁面部分(fēn)占用(yòng)1/N的(de)情況

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

 <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. 分(fēn)割線的(de)實現

    分(fēn)割線的(de)實現，方法比較粗暴，直接使用(yòng)ImageView組件實現
    給其src設置爲一個(gè)顔色，然後修改其weight(對(duì)應分(fēn)割線的(de)寬度)以及height(對(duì)應分(fēn)割線的(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. 多(duō)個(gè)組件高(gāo)度一緻，頂對(duì)齊，并且水(shuǐ)平均勻分(fēn)布

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

     <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òng)戶界面在程序開發中十分(fēn)重要，一個(gè)好的(de)用(yòng)戶界面設計需要考慮到用(yòng)戶使用(yòng)體驗、是否美(měi)觀方便等。在界面設計的(de)過程中，需要考慮如何制作出UI界面，怎麽樣控制UI界面兩大(dà)塊。

本文主要介紹通(tōng)過兩種方式來(lái)進行界面設計：
1、通(tōng)過xml文件進行界面設計
2、通(tōng)過代碼控制進行界面設計

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

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

   
MainActivity添加兩個(gè)私有數據成員(yuán)：

private TextView tv;
private Button bt;

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

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

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

運行程序，點擊按鈕，原來(lái)的(de)hello world！文本發生改變。在這(zhè)裏，兩個(gè)控件都是通(tōng)過xml文件定義的(de)，我們在代碼中實現了(le)一個(gè)監聽(tīng)器，也(yě)就是界面的(de)控制邏輯。
實例：
通(tōng)過代碼進行界面設計時(shí)，我們建立一個(gè)TextView控件來(lái)寫标題；建立一個(gè)ImageView控件來(lái)寫标題。先将圖片複制到res/drawable目錄下(xià)，然後通(tōng)過app:srcCompat=”@drawable/sysu”來(lái)引用(yòng)；建立兩個(gè)TextView控件，用(yòng)來(lái)寫“學号”和(hé)“密碼”，設置建立兩個(gè)EditView控件，用(yòng)來(lái)輸入學号和(hé)密碼；建立一個(gè)RadioGroup，之後再在裏面建立兩個(gè)單選按鈕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="學生信息系統"
        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="學号："
        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="請輸入學号"
        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="學生"
        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>

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

    private TextView tv;
    private Button bt;

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

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("你點擊了(le)按鈕!");
            }
        });         //監聽(tīng)事件

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

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