Android開發(fā)UI設(shè)計問題解決方法

安卓開發(fā)UI設(shè)計的問題以及解決方法
1. 頁面部分占用1/N的情況
解決方案;
使用線性布局，其屬性android:orientation="vertical"，android:weightSum="3"
線性布局里面有兩個相對布局，分別設(shè)置兩個相對布局的layout_weight

關(guān)于其中的權(quán)重比為2：1，參閱Android布局中的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>
<!-- 中部和底部 -->
<RelativeLayout
android:id="@+id/middle"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</RelativeLayout>
</LinearLayout>
2. 分割線的實現(xiàn)
分割線的實現(xiàn)，方法比較粗暴，直接使用ImageView組件實現(xiàn)
給其src設(shè)置為一個顏色，然后修改其weight(對應(yīng)分割線的寬度)以及height(對應(yīng)分割線的高度)屬性以及位置設(shè)置
<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. 多個組件高度一致，頂對齊，并且水平均勻分布
例子：需要實現(xiàn)下圖的情況，需要三個button高度一致，頂對齊并且水平均勻分布
在這里插入圖片描述
首先需要了解一下約束布局以其使用
約束布局（ConstraintLayout），布局內(nèi)組件按各種約束排列。每個組件受到三類約束，即其他組件，父容器(parent)，基準線(GuideLine)。 約束布局代碼可歸納為以下形式：app:layout_constraint[組件本身的位置]_to[目標位置]Of="[目標id]"。因此若想要組件水平居中，只需設(shè)置組件的左右邊界與父容器的左右邊界分別對齊。同理，組件的垂直居中也可以這么設(shè)置。
再思考本問題，是否也能使用約束布局來完成呢？使用約束布局，將三個按鈕放在一個約束布局里面，每個按鈕視圖的左側(cè)或者右側(cè)與需要的對齊按鈕的相應(yīng)側(cè)對齊即可，則組件之間就可以處于均勻分布了。
<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界面設(shè)計的方式；
用戶界面在程序開發(fā)中十分重要，一個好的用戶界面設(shè)計需要考慮到用戶使用體驗、是否美觀方便等。在界面設(shè)計的過程中，需要考慮如何制作出UI界面，怎么樣控制UI界面兩大塊。
本文主要介紹通過兩種方式來進行界面設(shè)計：
1、通過xml文件進行界面設(shè)計
2、通過代碼控制進行界面設(shè)計
一、通過xml文件進行界面設(shè)計
打開Android Studio，建立工程，在res/layout下存放的是界面布局文件。雙擊創(chuàng)建的文件，左邊是界面設(shè)計，右邊對應(yīng)了界面設(shè)計的xml文本。
1>在左邊控件中，拖動一個button到右邊的手機界面中，之后點擊上線畫圈右邊的text查看文本，可以看到xml已經(jīng)編寫完成。
2>切換到代碼目錄，打開之前創(chuàng)建的MainActivity，在onCreate()方法中：
setContentView(R.layout.activity_main); //將編寫的界面顯示到手機屏幕
MainActivity添加兩個私有數(shù)據(jù)成員：
private TextView tv;
private Button bt;
onCreate()里面初始化tv和bt，并給bt添加監(jiān)聽事件
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("你點擊了按鈕!");
}
);//添加監(jiān)聽
運行程序，點擊按鈕，原來的hello world！文本發(fā)生改變。在這里，兩個控件都是通過xml文件定義的，我們在代碼中實現(xiàn)了一個監(jiān)聽器，也就是界面的控制邏輯。
實例：
通過代碼進行界面設(shè)計時，我們建立一個TextView控件來寫標題；建立一個ImageView控件來寫標題。先將圖片復(fù)制到res/drawable目錄下，然后通過app:srcCompat=”@drawable/sysu”來引用；建立兩個TextView控件，用來寫“學(xué)號”和“密碼”，設(shè)置建立兩個EditView控件，用來輸入學(xué)號和密碼；建立一個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é)生信息系統(tǒ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="學(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>
二、通過代碼進行界面設(shè)計
定義MainActivity的私有成員：
private TextView tv;
private Button bt;
重寫onCreate()，通過new定義一個線性布局和Button按鈕和文本框控件，布局里面加入控件，控件加上監(jiān)聽事件
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("你點擊了按鈕!");
}
}); //監(jiān)聽事件
運行代碼，點擊按鈕，將會出現(xiàn)”你點擊了按鈕!”的文本提示。

當前題目：Android開發(fā)UI設(shè)計問題解決方法
文章分享：http://www.muchs.cn/news24/131174.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站排名、定制開發(fā)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)