Android手机应用开发(一) | 基本的UI界面设计
實驗目的:
創建一個文本框 TextView
首先要清楚布局文件在哪里
用Android模式查看項目結構,在layout里面存放著app的所有布局,默認第一個頁面就是activity_main.xml
那么就可以直接在這里面添加一些列界面元素了
這里有一點需要注意的
- 官方是建議使用layout_marginEnd和layout_marginStart代替layout_marginLeft和layout_marginRight,說法是這樣文字不論從左到右還是從右到左都不會出現問題,之前我還一直疑惑為什么又有Left又有Start,不知道該用什么,反正就按官方的做,不過有時候用不了?我還是用回了Left和Right
創建一個圖片塊ImageView
一般來說圖片文件放在mipmap文件夾里,不過其實不止一個文件夾
這里的不同后綴代表不同的分辨率圖片
不過一般的小程序放錯了問題應該不大,反正都能找到(/emm)
然后在xml這樣引用這個圖片
這里的sysu是圖片文件名,不帶格式后綴!
創建一個輸入框EditText
<EditText......android:layout_width="0dp"android:layout_height="wrap_content"android:gravity="center" //表示文字格式android:hint="@string/edit_text" //表示未輸入時提示的文字app:layout_constraintTop_toBottomOf="@+id/image" /> //表示它始終位于組件`image`的下方這里有一個小問題,我用的layout_width是0dp,它表示與外組件適應,這是因為如果我用的是wrap_content,將會是這樣的效果,因為文字只有七個字,這樣以后文字多了它也會一直拉伸,很不美觀
修改之后就是這樣的了,它處于并將長期處于這個長度!
創建一系列單選按鈕RadioButton
單選按鈕組件是不能獨立存在的,它需要一個組即RadioGroup(因為一個按鈕實在沒什么意思),然后再在這個組里面創建需要數目的RadioButton
<RadioGroup......android:orientation="horizontal"><RadioButton......style="@style/AppTheme"/><!--設置默認選中--><RadioButton/><RadioButton /><RadioButton /></RadioGroup>主要不同的就是需要確定其排列方向horizontal或者vertical
而RadioButton還可以指定style,這里隨便寫了個系統默認的,如果沒有特別好看的style就不用寫了吧【haha
效果如下
其實可以試用一下group的padding屬性(因為我不太熟),我加了句android:padding="10dp"之后,成了下面這個樣子,確實內部邊框都加粗了,不過我覺得還是用外邊距Margin和內邊距Padding其中一個就好了(針對我這種小應用),不然跟別的組件距離不好計算,用一個就能解決的話多好
每個小按鈕可以設置其周圍的margin,當然可以設置不一致,難道還會擔心group包不下嗎
創建一個簡單按鈕Button
<Button......android:background="@drawable/button_shape"android:textColor="@color/colorWhite"/>主要有兩個需要注意的屬性
-
background:這個是按鈕文本的顏色,用的是colors.xml中定義的顏色
-
background:說是叫按鈕背景,其實差不多也是按鈕樣式了,因為默認按鈕是這樣的
想要有顏色的橢圓形按鈕的話需要自己定義樣式,在drawable文件夾新建一個文件button_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="180dp" /> //指定弧度 </shape>最后的樣子就是這個樣子
需要注意,xml是不能用//作為注釋的,但是既然不是在代碼里,用<-- -->好麻煩,就用//意思意思【傲嬌
總結
以上是生活随笔為你收集整理的Android手机应用开发(一) | 基本的UI界面设计的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一些最最基本的几何图形公式
- 下一篇: ADO-2