安卓開(kāi)發(fā)UI設(shè)計(jì)的問(wèn)題以及解決方法1. 頁(yè)面部分占用1/N的情況
解決方案;
使用線(xiàn)性布局,其屬性android:orientation="vertical",android:weightSum="3"
線(xiàn)性布局里面有兩個(gè)相對(duì)布局,分別設(shè)置兩個(gè)相對(duì)布局的layout_weight
關(guān)于其中的權(quán)重比為2:1,參閱Android布局中的layout_weight和weightSum屬性的詳解及使用
android:orientation="vertical"
...
android:weightSum="3">
android:layout_weight="2"
android:id="@+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark">
...
android:id="@+id/middle"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
2. 分割線(xiàn)的實(shí)現(xiàn)
分割線(xiàn)的實(shí)現(xiàn),方法比較粗暴,直接使用ImageView組件實(shí)現(xiàn)
給其src設(shè)置為一個(gè)顏色,然后修改其weight(對(duì)應(yīng)分割線(xiàn)的寬度)以及height(對(duì)應(yīng)分割線(xiàn)的高度)屬性以及位置設(shè)置
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è)組件高度一致,頂對(duì)齊,并且水平均勻分布
例子:需要實(shí)現(xiàn)下圖的情況,需要三個(gè)button高度一致,頂對(duì)齊并且水平均勻分布
在這里插入圖片描述
首先需要了解一下約束布局以其使用
約束布局(ConstraintLayout),布局內(nèi)組件按各種約束排列。每個(gè)組件受到三類(lèi)約束,即其他組件,父容器(parent),基準(zhǔn)線(xiàn)(GuideLine)。 約束布局代碼可歸納為以下形式:app:layout_constraint[組件本身的位置]_to[目標(biāo)位置]Of="[目標(biāo)id]"。因此若想要組件水平居中,只需設(shè)置組件的左右邊界與父容器的左右邊界分別對(duì)齊。同理,組件的垂直居中也可以這么設(shè)置。
再思考本問(wèn)題,是否也能使用約束布局來(lái)完成呢?使用約束布局,將三個(gè)按鈕放在一個(gè)約束布局里面,每個(gè)按鈕視圖的左側(cè)或者右側(cè)與需要的對(duì)齊按鈕的相應(yīng)側(cè)對(duì)齊即可,則組件之間就可以處于均勻分布了。
android:layout_width="match_parent"
android:layout_height="wrap_content">
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" />
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" />
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"/>
安卓UI界面設(shè)計(jì)的方式;
用戶(hù)界面在程序開(kāi)發(fā)中十分重要,一個(gè)好的用戶(hù)界面設(shè)計(jì)需要考慮到用戶(hù)使用體驗(yàn)、是否美觀方便等。在界面設(shè)計(jì)的過(guò)程中,需要考慮如何制作出UI界面,怎么樣控制UI界面兩大塊。
本文主要介紹通過(guò)兩種方式來(lái)進(jìn)行界面設(shè)計(jì):
1、通過(guò)xml文件進(jìn)行界面設(shè)計(jì)
2、通過(guò)代碼控制進(jìn)行界面設(shè)計(jì)
一、通過(guò)xml文件進(jìn)行界面設(shè)計(jì)
打開(kāi)Android Studio,建立工程,在res/layout下存放的是界面布局文件。雙擊創(chuàng)建的文件,左邊是界面設(shè)計(jì),右邊對(duì)應(yīng)了界面設(shè)計(jì)的xml文本。
1>在左邊控件中,拖動(dòng)一個(gè)button到右邊的手機(jī)界面中,之后點(diǎn)擊上線(xiàn)畫(huà)圈右邊的text查看文本,可以看到xml已經(jīng)編寫(xiě)完成。
2>切換到代碼目錄,打開(kāi)之前創(chuàng)建的MainActivity,在onCreate()方法中:
setContentView(R.layout.activity_main); //將編寫(xiě)的界面顯示到手機(jī)屏幕
MainActivity添加兩個(gè)私有數(shù)據(jù)成員:
private TextView tv;
private Button bt;
onCreate()里面初始化tv和bt,并給bt添加監(jiān)聽(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("你點(diǎn)擊了按鈕!");
}
);//添加監(jiān)聽(tīng)
運(yùn)行程序,點(diǎn)擊按鈕,原來(lái)的hello world!文本發(fā)生改變。在這里,兩個(gè)控件都是通過(guò)xml文件定義的,我們?cè)诖a中實(shí)現(xiàn)了一個(gè)監(jiān)聽(tīng)器,也就是界面的控制邏輯。
實(shí)例:
通過(guò)代碼進(jìn)行界面設(shè)計(jì)時(shí),我們建立一個(gè)TextView控件來(lái)寫(xiě)標(biāo)題;建立一個(gè)ImageView控件來(lái)寫(xiě)標(biāo)題。先將圖片復(fù)制到res/drawable目錄下,然后通過(guò)app:srcCompat=”@drawable/sysu”來(lái)引用;建立兩個(gè)TextView控件,用來(lái)寫(xiě)“學(xué)號(hào)”和“密碼”,設(shè)置建立兩個(gè)EditView控件,用來(lái)輸入學(xué)號(hào)和密碼;建立一個(gè)RadioGroup,之后再在里面建立兩個(gè)單選按鈕RadioButton。
activity_main.xml
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">
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"/>
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" />
android:id="@+id/user_id"
android:text="學(xué)號(hào):"
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" />
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"/>
android:id="@+id/text_userid"
android:hint="請(qǐng)輸入學(xué)號(hào)"
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"/>
android:id="@+id/text_userpwd"
android:hint="請(qǐng)輸入密碼"
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" />
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">
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"/>
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"/>
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"/>
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" />
android:id="@+id/button2"
android:text="注冊(cè)"
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"/>
shape.xml
android:shape="rectangle">
android:bottom="5dp"
android:top="5dp"
android:left="10dp"
android:right="10dp"/>
android:shape="rectangle">
android:bottom="5dp"
android:top="5dp"
android:left="10dp"
android:right="10dp"/>
二、通過(guò)代碼進(jìn)行界面設(shè)計(jì)定義MainActivity的私有成員:
private TextView tv;
private Button bt;
重寫(xiě)onCreate(),通過(guò)new定義一個(gè)線(xiàn)性布局和Button按鈕和文本框控件,布局里面加入控件,控件加上監(jiān)聽(tīng)事件
LinearLayout l = new LinearLayout(this); //定義線(xiàn)性布局
setContentView(l); //線(xiàn)性布局加入屏幕
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("你點(diǎn)擊了按鈕!");
}
}); //監(jiān)聽(tīng)事件
運(yùn)行代碼,點(diǎn)擊按鈕,將會(huì)出現(xiàn)”你點(diǎn)擊了按鈕!”的文本提示。
網(wǎng)站題目:Android開(kāi)發(fā)UI設(shè)計(jì)問(wèn)題解決方法
本文路徑:http://jinyejixie.com/news/131174.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開(kāi)發(fā)、云服務(wù)器、網(wǎng)站制作、定制網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、標(biāo)簽優(yōu)化
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)