網訊小(xiǎo)編帶你詳解安卓開(kāi)發UI設計問題以及解決辦法：

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

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

 <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>

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

                    ...

                </RelativeLayout>
            </LinearLayout>
            

2. 分(fēn)割線的實現

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

     <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. 多個組件高度一(yī)緻，頂對齊，并且水平均勻分(fēn)布

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

     <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界面設計的方式；

用戶界面在程序開(kāi)發中(zhōng)十分(fēn)重要，一(yī)個好的用戶界面設計需要考慮到用戶使用體(tǐ)驗、是否美觀方便等。在界面設計的過程中(zhōng)，需要考慮如何制作出UI界面，怎麽樣控制UI界面兩大(dà)塊。

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

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

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

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

private TextView tv;
private Button bt;

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

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

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

    private TextView tv;
    private Button bt;

重寫onCreate()，通過new定義一(yī)個線性布局和Button按鈕和文本框控件，布局裏面加入控件，控件加上監聽(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("你點擊了按鈕!");
            }
        });         //監聽(tīng)事件

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

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