安卓開發(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),基準(zhǔn)線(GuideLine)。 約束布局代碼可歸納為以下形式:app:layout_constraint[組件本身的位置]_to[目標(biāo)位置]Of="[目標(biāo)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界面兩大塊。
本文主要介紹通過兩種方式來進(jìn)行界面設(shè)計:
1、通過xml文件進(jìn)行界面設(shè)計
2、通過代碼控制進(jìn)行界面設(shè)計
一、通過xml文件進(jìn)行界面設(shè)計打開Android Studio,建立工程,在res/layout下存放的是界面布局文件。雙擊創(chuàng)建的文件,左邊是界面設(shè)計,右邊對應(yīng)了界面設(shè)計的xml文本。
1>在左邊控件中,拖動一個button到右邊的手機(jī)界面中,之后點擊上線畫圈右邊的text查看文本,可以看到xml已經(jīng)編寫完成。
2>切換到代碼目錄,打開之前創(chuàng)建的MainActivity,在onCreate()方法中:
setContentView(R.layout.activity_main); //將編寫的界面顯示到手機(jī)屏幕
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)聽器,也就是界面的控制邏輯。
實例:
通過代碼進(jìn)行界面設(shè)計時,我們建立一個TextView控件來寫標(biāo)題;建立一個ImageView控件來寫標(biāo)題。先將圖片復(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>
二、通過代碼進(jìn)行界面設(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)”你點擊了按鈕!”的文本提示。
當(dāng)前題目:Android開發(fā)UI設(shè)計問題解決方法
文章分享:http://m.rwnh.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)